通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。 - 如果元素是最初显示,它会被隐藏 - 如果隐藏的,它会显示出来 display属性将被储存并且需要的时候可以恢复。...fadeOut()函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果 所谓"淡出"隐藏的,元素是隐藏状态不对作任何改变,元素是可见的,则将其隐藏。....fadeOut( [duration ], [ complete ] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。...fadeIn()函数用于显示所有匹配的元素,并带有淡入的过渡动画效果。 注意: - 淡入的动画原理:操作元素的不透明度从0%逐渐增加到100% - 如果元素本身是可见的,不对其作任何改变。...要特别注意所有用于动画的属性必须是数字的,除非另有说明;这些属性如果不是数字的将不能使用基本的jQuery功能。
//DOM加载完成的入口 }) jQuery的顶级对象:$ `是jQuery 别称,在代码中`和jQuery和等价,为了方便都是$。...jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。...//(3)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。...(3)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。...trigger() 有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。...将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。...注意:我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。...这个选项也会影响 data 选项中的内容如何发送到服务器。...Ajax 的第一个字母是 asynchronous 的开头字母,这意味着所有的操作都是并行的,完成的顺序没有前后关系。
这个选项也会影响data选项中的内容如何发送到服务器。...Ajax的第一个字母是asynchronous的开头字母,这意味着所有的操作都是并行的,完成的顺序没有前后关系。...注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。...将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。...在jQuery 1.4中,他也会检查服务器指定的'etag'来确定数据没有被修改过。
返回的内容必须是Response对象,所以new Response构建一个新对象,并直接返回。不匹配html头将直接原封不动地透明代理。...Promise.race 此函数也是并行执行,不过与all不同的是,只要有任何一个函数完成,就立刻返回,无论其是否reject或者resolve。...同时,任何一个镜像站崩溃了都不会造成太大的影响,脚本将自动从其他源拉取信息。 除非所有源都炸了,否则此请求不会失败。...所以我们应该在其中任何一个请求完成后就打断其余请求。...,并且没有任何数据输出。 让我们看一下Network选项卡: [4.png] 其中,知乎返回的最快,但他并没有完整的返回文件源文件1.8KB,但他只返回了1.4KB。
3.1 代码自动抽取 让我们使用这个插件,将之前的示例中重复的 lodash 模块 和 jquery 模块抽取出来。...image.png 可以看到, jquery 由于引用次数小于 2,没有被单独分离出来。...image.png 可以看到, jquery 和 lodash 由于引用次数小于 3,都没有被单独分离出来。...这可能会影响 chunk 的结果文件名。 3.3 小结 可以看到,提取公共代码单独输出后,我们加载资源的时间并没有变短,因为带宽是一定的,并行资源过多,反而会增加 http 耗时。...预拉取的块在父块完成加载后启动。 预加载块具有中等优先级,可以立即下载。在浏览器空闲时下载预拉取的块。 一个预加载的块应该被父块立即请求。预拉取的块可以在将来的任何时候使用。 浏览器支持是不同的。
新版已经支持scss文件检索,这个也是必备插件之一; 5.Auto Close Tag :匹配标签,关闭对应的标签。...很实用【HTML/XML】; 6.Auto Rename Tag :修改 html 标签,自动帮你完成尾部闭合标签的同步修改; 7.Path Autocomplete :路径智能补全; 8.Path Intellisense...,这款自动补全插件真的很棒; 12.beautify :格式化代码的工具,可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用; 13.jQuery Code Snippets:jquery...重度患者必须品; 14.Debugger for Chrome:让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试,真666~; 15.jQuery...Code Snippets:jquery 重度患者必须品; 16.vscode-icon:让 vscode 资源树目录加上图标,必备良品!
中指操作指定类名,不影响原先的类名 3.2 jQuery效果 注意: 动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。...三种预定速度(show,normal,fast)或者是动画时长的毫秒数 第二个参数 easing:指定切换效果,默认是’swing’ 还可设为’linear’ 第三个参数 fn :回调函数,在动画完成时执行的函数...对象,需要转换成jquery对象才能使用方法 $.each(obj,function(index,domele){}) 可以用来遍历任何对象,主要用来做数据处理, var sum = 0; var...(true) 取得匹配元素宽度和高度值 包括 padding、border、margin 返回值是数字型的 如果参数是数字,则修改样式 参数不写单位 4.4.2 jQuery 位置操作 offset(...---- 还有很多东西没有学,那就继续加油吧!
jQuery自动触发事件与bootstrap/jQuery插件用法 jQuery自动触发事件: 有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。...5.浅拷贝是把被拷贝数据中的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。 6.深拷贝,前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被考贝对象。...当我们对拷贝对象或者被拷贝到对象的复杂类型地址的修改时机会对所有的拷贝对象数据进行修改 第六点深拷贝解析:拷贝时是将所有的数据拷贝到另外一个对象当中,因此再修改拷贝对象中的复杂数据类型数据时不会对拷贝对象中的数据造成任何影响...jQuery插件的使用 jQuery功能比较有限,想要更复杂的特效效果,可以借助于jQuery插件完成。...注意:这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件 JQuery插件常用的网站: 1.jQuery插件库 jQuery插件库-收集最全最新最好的jQuery插件 jQuery
如果不同用户交互是否能在某一时刻自动触发该事件呢?...尽管 .trigger() 模拟事件对象,但是它并没有完美的复制自然发生的事件,若要触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件,使用.triggerHandler() 来代替 triggerHandler...jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素 使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡。...如果它们不是由目标元素直接触发的,那么它就不会进行任何处理 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。...如果没有触发任何事件,会返回 undefined <!
1.querySelector和querySelectorAll 是W3C提供的 新的查询接口,其主要特点如下: ①、querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。 ...②、querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)。 ③、返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果。 ...removeClass('test2'); }]); 注意:一旦在div使用ng-app(如ng-app="myApp")时,js就必须申明...find() - 通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代 hasClass()-确定任何一个匹配元素是否有被分配给定的(样式)类 html()-获取集合中第一个匹配元素的...(同时移除元素上的事件及 jQuery 数据。)
昨天将所有的基础知识进行了回顾,今天继续磕,不死不休~ 今天要说的便是 jquery 这个函数库,毕竟它影响范围之广,不会都不好意说自己会前端?...大可放心,jquery 有容错机制,即使没有找到元素,也不会出错。还为你提供了验证是否找到的方法,那便是 length 属性。...既然都能找到了,重新赋值也必须到位!...其中规则老生常谈,我们再复习一遍: \d 匹配一个数字,即0-9 \D 匹配一个非数字,即除了0-9 \w 匹配一个单词字符(字母、数字、下划线) \W 匹配任何非单词字符。...这只是一种机制,但是我们并不是任何情况下都需要,那么可以将其关掉。
的事件处理为同步的,没有异步。...,该对象必须为css的属性名(使用驼峰命名法) 动画只支持数值属性,不支持颜色,字体,或者display的枚举属性。...中默认的队列名为fx,这是没有指定队列名时默认使用的队列。...5年的内容,无奈,所以,如果要使用扩展,必须使用npm,无奈,毕竟现在已经8102年了。 jQuery.fn是所有jQuery对象的原型对象。...jquery的插件的封装 使用jQuery.fx.speeds完成对缓动函数的封装 扩展css选择,使用jQuery.expr';'完成对css选择的封装 jQuery.expr[':'].draggable
它的宗旨就是:“Write less, do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。...相当于: document.getElementById("i1").innerHTML; 虽然 jQuery对象是包装 DOM对象后产生的,但是 jQuery对象无法使用 DOM对象的任何方法,同理...,在3.x版本的jQuery中则没有这个问题。...$(function(){ // 你在这里写你的代码 }) 文档加载完绑定事件,并且阻止默认事件发生: 登录校验示例 与window.onload的区别 window.onload()函数有覆盖现象,必须等待着图片资源加载完成之后才能调用...jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数) 事件委托 事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。
依靠成千上万可供选择的插件,你可以利用 gulp 自动完成几乎任何事。 如何使用 gulp Installing Gulp 新版的 gulp 命令行工具已经改名为 gulp-cli 。...时,则表示不匹配方括号中出现的其他字符中的任意一个,类似 js 正则表达式中的用法。 !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的 ?...b*.js',*.js]) //不会排除任何文件,因为排除模式不能出现在数组的第一个元素中 此外,还可以使用展开模式。...jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js 再举更多一点的例子 gulp.src("script/avalon/avalon.js").pipe...base参数,此时默认的base路径为script/lib //假设匹配到的文件为script/lib/jquery.js //生成的文件路径为build/jquery.js gulp.src("script
link引入的样式页面加载时同时加载,@import引入的样式需等页面加载完成后再加载。 link没有兼容性问题,@import不兼容ie5以下。...盒模型的理解 92.html5中的form怎么关闭自动完成? 设置form的autocomplete属性为off 93....重绘和重排的关系:在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘。...XHTML 标签必须关闭 XHTML 所有标签必须小写 XHTML 标签必须正确嵌套 134.为什么10.toFixed(10)会报错? ? image ?...153.说说body载入问题 Firefox的body对象在body标签没有被字体完全读入之前就存在。 ie的body对象则必须在body标签被浏览器完全读入之后才存在。
时,则表示不匹配方括号中出现的其他字符中的任意一个,类似js正则表达式中的用法 !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的 ?...b*.js',*.js]) //不会排除任何文件,因为排除模式不能出现在数组的第一个元素中 此外,还可以使用展开模式。...jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js 再举更多一点的例子 gulp.src('script/avalon/avalon.js') //没有通配符出现的情况...gulp-load-plugins这个插件能自动帮你加载package.json文件里的gulp插件。...最后要提醒的一点是,因为gulp-load-plugins是通过你的package.json文件来加载插件的,所以必须要保证你需要自动加载的插件已经写入到了package.json文件里,并且这些插件都是已经安装好了的
· 5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。...内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0 3. JS 3.1. 解释下JavaScript中this是如何工作的。...Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解 使用.bind()方法非常浪费性能因为它把同一个事件处理函数附加到了每一个匹配的元素上 你应该停止使用.live...,这边的调用直接调用,前面不用任何对象。...实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。 mounted(载入后) 在el 被新创建的 vm.
所谓工欲善其事,必先利其器,所以通读了cheerio的API,顺便翻译了一遍,有些地方因为知道的比较少,不知道什么意思,保留了英文,希望各位不吝告诉我,然后一起把这个翻译完成。...我人会使用JSDOM如果我需要用一个在服务器上的浏览器环境,特别是如果我想要自动化一些功能测试。...这一步对jQuery来说是必须的,since jQuery operates on the one, baked-in DOM。通过Cheerio,我们需要把HTML document 传进去。...(selector) .is(function(index)) 有任何元素匹配selector就返回true。如果使用判定函数,判定函数在选中的元素中执行,所以this指向当前的元素。...context参数对chreeio没有意义,但是用来维护APi的兼容性。