最近项目中入手了一个非常实用的插件,这里和大家一起分享下:通过canvas实现图片裁剪的工具--cropper.js cropper.js简介 cropper是一款使用简单且功能强大的图片剪裁jQuery...安装和使用 下载安装 cropper需要配合jQuery使用,因此需要同时引入cropper和jQuery。...-- 引入js文件 --> src="jquery.js"> src="cropper.js"> 构建html 接来到cropper方法相关的部分--因为配置名和方法名几乎是一致的。...getCroppedCanvas([options]):得到一个画布绘制裁剪图像(有损压缩)。如果没有裁剪,则返回绘制整个图像的画布,即会得到一个 HTMLCanvasElement。
UI选择 微信开发 基于vue2.0 Vux 基于jquery weui app开发 vonic mint-UI Vant Muse-UI 桌面端 IView ElemtUI 插件使用...clipboard.jpg 在上图所示位置,我们项目安装的所有的模块依赖都在这个pageage.json文件中,当我们需要整理一波自己的依赖的时候,可以在这个文件里面找有没有现在已经没用的依赖,可以使用命令行...--save-dev和--save的区别 上面的这些依赖有些只在开发环境里面使用的模块,有的在项目上线之后还是要继续依赖的模块。...静态资源处理 assets和static文件夹的区别 相信有很多人知道vue-cli有两个放置静态资源的地方,分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。...必须使用绝对路径引用这些文件,这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。
元素 JQuery对象的方法 context 选择元素时使用的上下文对象 $("img:odd").context.TagName; each(function()) 在每个选中的元素上运行给定的函数...jquery对象 map 以一个函数为参数,map方法能够帮助我们灵活的处理一个jquery对象,从而得到满足需要的一个jquery对象。...,那么就返回true,否则false 实例: console.log($("img").is("[src*=astor]"));//这里是判断img中的src属性有没有astor字段的,如果存在返回...); end 当我们调用方法链来修改结果集的时候,jquery维护者一个历史结果集的查找,我们可以利用end回退到历史的结果集中,end用来扔掉当前的结果集,返回到上一层结果集 实例: $("img...(elem.tagName+" "+elem.id); }) offestParent 得到距离最近的祖先定位元素,使用fixed,absolute,relative定位的元素,形式为offestParent
jQuery 判断元素上是否绑定了事件 //jQuery event封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件 var $events = $("#foo").data("events...$('link[media='screen']').attr('href', 'alternative.css'); 如何限制选择范围(基于优化目的): //尽可能使用标签名来作为类名的前缀, //这样...]').get(); 如何使用jQuery来预加载图像: jQuery.preloadImages = function() { for(var i = 0; i < arguments.length...); 如何检查图像是否已经被完全加载进来 $('#theImage').attr('src', 'image.jpg').load(function() { alert('This Image...; date.setTime(date.getTime() + (x 60 1000)); $.cookie('example', 'foo', { expires: date }); 如何使用一个可点击的链接来替换页面中任何的
一、jQuery简介 jQuery是一个快速、简洁的JavaScript框架,是一个丰富的JavaScript代码库。jQuery设计的目的是为了写更少的代码,做更多的事情。...据一项调查报告,在对433,000个网站的分析中发现,77%的网站至少使用了一个具有已知安全漏洞的前端JavaScript库,而jQuery位列榜首,而且远远超过其他库。...漏洞原因在于过滤用户输入数据所使用的正则表达式存在缺陷,可能导致LOCATION.HASH跨站漏洞。这也是最为被大众熟知的jQuery的一个漏洞。...故触发条件较为苛刻,且只可触发DOM型xss漏洞。...尽可能使用不含漏洞的高版本JQuery,对于已开发的程序,需采取的方案有: 1)采取隐藏版本号的方法增加攻击难度; 2)对已存在的jQuery进行升级和打补丁; 3)在代码层对用户输入数据进行严格限制,
请注意,从技术上讲, 标签并不会在网页中插入图像,而是从网页上链接图像。 标签创建的是被引用图像的占位空间。...对象来请求数据的 fetch window的一个方法 主要特点是 1、第一个参数是URL 2、第二个参数可选参数 可以控制不同的init对象 3、使用了js 中的promise对象 data-xxx 属性的作用是什么...清除浮动方法总结 父元素高度塌陷了 在父元素的最后加一个冗余元素并为其设置clear:both 采用伪元素,这里我们使用:after 使用overflow属性,给父元素添加overflow:hidden...,prototype是什么,什么时候用 prototype对象是实现面向对象的一个重要机制 在JavaScript中没有类的概念,都是函数 1.原型和原型链是JS实现继承的一种模型。...let 声明的变量只在 let 命令所在的代码块内有效。 const 声明一个只读的常量,一旦声明,常量的值就不能改变。 JSON 语法规则 数据为 键/值 对。 数据由逗号分隔。
第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" percentage(百分比) 以父元素的百分比来设置背景图像的宽度和高度。。...第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。...背景图像的某些部分也许无法显示在背景定位区域中。 contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。...border-box 背景图像相对于边框盒来定位 背景被裁剪到边框盒 content-box 背景图像相对于内容框来定位 背景被裁剪到内容框 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传...定义字体文件的 URL } [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tFYNixpQ-1629980842702)(/assetis/image-20210325013634762
1.正则在js的使用方法 列一个变量,存储正则规则,用这个变量去test某个数据-----匹配True和不匹配False var re = new RegExp(规则,正则表达式的参数) g全文搜索...jQuery中定义变量的时候,一般命名用$开头。同事一看就知道是使用了jQuery,然后使用jQuery的语法。 其实$是jQuery中的一个函数。...比如子级有单击事件,那么父级如果有单击事件也会被触发,父级的父级如果有单击事件也会被触发。 任何一个操作,计算机或者浏览器都会去处理。不管你有没有设置对应的事件。...新增节点------- 步骤: 1、声明变量保存节点数据(名字一般为$开头,然后找的标签是什么就叫做什么) 2、使用追加函数将节点变量追加到指定位置 子级加: append(添加的内容) 向末尾加 appendTo...;2、使用追加函数将节点变量追加到指定位置 var $li = $('22222') // $('ul').append( $li )
看得懂的话就可以完全跳过我的这篇“小教程啦”,真的,我说得一定不够官方的详细、全面、好,还有可能会说错(:汗 好吧,这次真的要开始啦!准备好了吗? 开始 啦!!!...的人都叫自己 ASer)的欢迎,学AS的人,没有一个说是不知道、没使用过GSAP的。...使用之前,就像使用其他任何js类库,先要导入类包,导入方法如下: src="你的类包的路径" > 导入包的比较常用组合有两种...latest/TweenMax.min.js"> 我不怎么会说话,直接来一个小实例好啦,边做边解说!...,但我们还可以利用jQuery强大的选择器来简化TweenLite创建动画的代码, 比如上面的代码可以通过id名来(#rect)来简化动画的创建过程,当我们导入jQuery时,我们还可以使用 元素的类
Fluid 支持更优化的注入功能,本文记录 Fluid 代码注入的使用方法,并将背景视频功能转为注入实现。...修改过的仓库很容易在更新时引入冲突,那时候很可能需要面对自己都不记得为什么改的代码和完全不懂的项目代码做出取舍,实在是很危险、痛苦而且不优雅的 也就是说,我们又要调整项目代码功能,又要保持项目足够...例如创建一个 /blog/scripts/example.js,内容为: hexo.extend.injector.register('body_end', 'src="/jquery.js...">', 'default'); 上述代码会在生成的页面 注入加载 jquery.js 的代码。...,第二个参数则是一句原生的 HTML 语句; default 表示注入的键名,可以使用任意键名,同一个注入点下的相同键名会使注入的内容覆盖,而不同键名则会让内容依次排列(默认按执行先后顺序,可通过
如果说php是世界上最好的语言,那么javascript无疑可以称为世界上最飘逸的语言,最近看了下jQuery的源码,实现了一个简陋的jQuery。...我觉得要看懂jQuery整体结构,需要搞懂js作用域链,闭包,js prototype继承,关于闭包网络上的定义实在太多了,这里参照了js权威指南里的定义,感觉从js的角度好理解一点。...闭包:js函数对象不仅包含函数的代码逻辑,还引用了当前的作用域链, 函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内 这种特性在计算机科学文献中称为闭包,所有的js函数都是闭包...的选择器使用了Ssize,这里简单的使用一个id选择器 jQuery.fn.init = function(selector){ /* (在Javascript中,This关键字永远都指向函数...(方法)的所有者) this指向的是jQuery.fn * 这里简单的将DOM对象赋值给this[0],其他属性省略, 我们使用jQuery的时候使用下标0即可将jQuery对象转化为普通的
请注意,从技术上讲, 标签并不会在网页中插入图像,而是从网页上链接图像。 标签创建的是被引用图像的占位空间。...XMLHttpRequest对象来请求数据的 fetch window的一个方法 主要特点是 1、第一个参数是URL 2、第二个参数可选参数 可以控制不同的init对象 3、使用了js 中的promise...清除浮动方法总结 父元素高度塌陷了 在父元素的最后加一个冗余元素并为其设置clear:both 采用伪元素,这里我们使用:after 使用overflow属性,给父元素添加overflow:hidden...,prototype是什么,什么时候用 prototype对象是实现面向对象的一个重要机制 在JavaScript中没有类的概念,都是函数 1.原型和原型链是JS实现继承的一种模型。...写一个数组去重的方法,使用hash表的方式 ?
04.JQuery键盘记录键盘 一旦加载jQuery,一行(长)会写一个键盘记录器。像往常一样,捕获的密钥在制作的URL的查询字符串中发送。在许多情况下可能有用。...这使得钩住所有事件并收集它们以供进一步使用成为可能…… 这绝对超越了键盘记录器的一步。...17.浏览器指纹 基于计算机显示器的图像呈现功能,为注入的浏览器生成独特的指纹。对于定位特定用户或设备非常有用… 18.iFrame CSRF令牌盗窃 通过嵌套的iFrames窃取CSRF令牌。...提供来自Boris Reitman的CrossXHR,它最有可能受到启发。 35.获取本地存储 一个微小的代码来检索HTML5本地存储并通过图像源URL发送出去。...39.jQuery钓鱼 一个脚本,可以通过网络钓鱼连接并劫持所有表单。 40.振动 关于如何在Android手机上使用振动API以及可以完成的一些恶意用法的例子。
在 jQuery 中,只有全局都会用到的变量、正则表达式定义在了代码最开头,而每个模块一开始,又会定义一些只在本模块会使用到的变量、正则、方法等。...很有可能一开始你在一个奇怪的方法或者变量处卡壳了,很想知道这个方法或变量的作用,然而可能它要到几千行处才被调用到。如果去追求这种逐字逐句弄清楚的方式,很有可能在碰壁几次之后阅读的积极性大受打击。 ...道理说了很多,接来下进入真正的正文,对 jQurey 的一些前期准备,小的细节进行分析: jQuery 闭包结构 // 用一个函数域包起来,就是所谓的沙箱 // 在这里边 var 定义的变量,属于这个函数域内的局部变量...{ // jQuery 代码 })(window); jQuery 具体的实现,都被包含在了一个立即执行函数构造的闭包里面,为了不污染全局作用域,只在后面暴露 $ 和 jQuery 这 2 个变量给外界...当然,除了链式调用,jQuery 甚至还允许回溯,看看: // 通过 end() 方法终止在当前链的最新过滤操作,返回上一个对象集合 $('div').eq(0).show().end().eq(1).
其实前端就是一个体力活,你要优化你的布局,美化你的界面,交互你的控件。 如果按照传统的写法,每个都劳心劳力。有没有快速的方法呢?...把词语和类看成一个个可以任意组合的概念,使用如:名词/修饰语,文字序列以及诸多的自然语法来定义类名。...padded:文字的间距靠里 vertical:去掉边框的圆角、阴影和缝隙 inverted:颜色需要反选填充 basic: 处理黑边问题 fixed: 固定位置 Mini Tiny Small Medium...3个文件即可 src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"> 一个简单登陆页面的前端。 然后再结合前面讲的后端,就可以做出一个完整的登陆页面来了。 前端的东西,要慢慢磨,熟能生巧。
那么在遍历的过程中,我们可以考虑使用 hasOenProperty 方法来判断是否过滤掉那些继承自原型链上的属性。...isFunction(target)) { // 如果是其它类型变量,则强制重新赋值为新的空对象 target = {}; } // 如果只传入1个参数;或者是传入2个参数,第一个参数为...// 将 jQuery 本身赋值给 target target = this; // i 自减1,可能的值为 0 或 1 i--; } for (; i 一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象;否则的话,副本会与原对象共享结构。 未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。...再谈原型链属性 在项目实践中,发现有起码有以下两种方式可以来规避原型链属性上的拷贝。
简单来说,Referer是HTTP协议中的一个请求报头,用于告知服务器用户的来源页面。...,主要是图片和网盘服务器使用的较多。...直接输入网址或通过浏览器书签访问 使用JavaScript的Location.href或者是Location.replace() HTTPS等加密协议 很多网站挟持脚本一般是注入https链接来隐藏referer...,这样固然好用,但是一定要一个域名,有点不方便。...9 10 11 12 13 14 15 16 17 jQuery(function() { //遍历所有的img元素,凡是QQ和微信引用的统统放到iframe里面 jQuery
/js/jquery-1.8.1.min.js"> src="....真正使用的时候,后台只需要传data到前端,加载到页面就ok了。 这里面依赖了JQuery、XBGMenuTree.css、XBGMenuTree.js。 JQuery文件没什么好说的。...虽然this随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象!好好体会吧。...(1)比如一些位置的知识: jquery获取元素位置的方法有两个: position方法: 获取匹配元素集中第一个元素的坐标,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。...使用: offset方法: 获取匹配元素集中第一个元素的坐标,获取的是该元素相对于document对象的偏移位置。 使用: (2)CSS 伪元素 ?
其他标签,如设置图像的标签〈img〉,在文本提取时将忽略这类标签。...jQuery的DOM 使用 jQuery 选择器选择页面中的元素,是为了生成 jQuery 对象,jQuery 对象具有特有的方法和属性,完全能够实现传统 DOM 对象的所有功能 使用jQuery操作元素...使用选择器获取某个元素 使用jQuery对象的方法操作元素。...DOM对象,并将它们包含在一个数组中 DOM 对象转换成 jQuery 对象 对于一个 DOM 对象,只需要用 () 将它包装起来就可以获得对应的 jQuery 对象,其语法结构为:(DOM 对象 )...示例: 利用js的DOM修改颜色,使用jQuery对象修改文本内容 点击变颜色·变文字 src="js/jquery-3.4.1.min.js">
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题。...②主要是使用其它网站提供的javascript api如QQ。使用script的src可以直接读取跨域资源。 ③当然跨域还有其它处理方式:如代理服务器、改变domain、JSONP等。...①原型对象也是普通的对象,是对象一个自带隐式的 proto 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链。...②原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链。 JQuery 1、你使用过jQuery吗?如果有,你为什么要使用jQuery呢? ①用过。...③对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样? ④加班的看法? ⑤有没有女朋友