JQuery学习笔记

JQuery学习笔记

学习目标：

1.什么是JQuery

2.JQuery设计思想

3.JQuery常用方法

4.JQuery下的Cookie缓存和ajax

一、什么是JQuery

1.什么是JQ？

一个优秀的JS库，大型开发必备。

2.JQ的好处？

• 2.1简化JS的复杂操作
• 2.2不再需要关心兼容性
• 3.3提供大量实用方法

3.如何学习JQ？

• www.jquery.com JQ的官方网站
• JQ只是辅助工具，要正确面对
• 需要分阶段学习

4.JQuery版本

4.1 jquery版本区别：

​ 1.3版本 一般功能充足

​ 1.4.2版本 一般功能充足而且稳定

​ 1.7+版本 增加新特性

​ 2版本 不支持老IE（只兼容IE8以上）

​ 兼容的话最好选 1.x。稳定性就用1.7或者1.4，其中1.4的体积相对小

​ 另外根据情况选用1.0版本还是2.0系列，2系列不支持ie6，7，8

4.2 常用1.4版本和1.7版本：

​ 两者可扩展性、兼容性分析：

​ 由于 Jquery 的版本都是不向后兼容的，导致了基于 jquery 开发的插件兼容性有问题，当新版本的 jquery 推出后，如果开发想升级的话，
要看插件是否支持。通常情况下，在最新版 jquery 版本下，现有插件可能无法正常使用。开发者使用的插件越多，这种情况出现概率越高。

​ 同时，由于 jquery1.4.2 版本发布时间比较早，基于这版本开发的插件数量庞大，而对应版本的开发社区相当活跃，很多诡异的问题，
网上都有对应的解决方案。

​ 从可扩展性来分析吧，无论是 1.7.1 还是 1.4.2 留给开发扩展的方法只有两个，分别是 jquery.extend 和 jquery.fn.extend ，
一种是添加静态属性和方法、一种是对象添加属性和方法，扩展方式比较简单，经历了多个版本，扩展方式都一致，因此在扩展性上面没什么可比较的。

​ 综合来说， jquery1.7.1 的版本在多数浏览器上的性能表现无疑比 jquery1.4.2 更好，而稳定性和兼容性方面 jquery1.4.2 更出色点，
其它地方基本没什么差距。

​ 从目前前端开发情况来说吧，引用到第三方的扩展库相对来说比较少，我们更多的关注框架性能是否优越，可扩展性是否良好，因此， jquery1.7.1 的版本是当前最好的选择。

4.3 既然jQuery 2.x不支持老旧浏览器，那么为什么要开发这个版本？

​ 要说明的是，这个版本主要是用于目前一些比较高级的JS环境，也即是版本比较新的浏览器。这些JS和老旧IE没有多大关系，而jQuery 1.x中有大部分代码是 对老旧浏览器做的兼容，这个就增加了运行的负担，影响了运行效率。

4.4jquery3.0 新特性:

• 移除旧的IE工作区

  新的最终版最主要的目标是更加快速，更加时尚，因此，那些支持早于IE9版本的相关技术与工作区都被移除了。这意味着如果你想要或者需要支持IE6-8，你必须用回1.12版本，因为甚至是2.X版本都无法完整支持早于IE9的浏览器。

• jQuery 3.0运行在Strict Mode下

大多数支持jQuery 3的浏览器都支持strict mode，而在本次更新中对此进行了规定。

虽然jQuery 3是写在strict mode中的，但是你需要了解的是你的代码并不需要运行在strict mode中，因此如果你想要把以前的代码迁移到jQuery 3，你不需要对已存在的jQuery代码进行重写。Strict和non-strict mode的JavaScript代码可以和谐共存。

这里有一些例外：某些版本的ASP.NET，因为strict mode的缘故，无法与jQuery 3兼容，如果你的代码涉及到了ASP.NET，你可以查看关于strict mode的细节。

• 引进for…of循环

jQuery 3支持for…of语句，这是由ECMAScript 6中新引进的一种for循环语句。这提供了对Arrays，Maps和Sets这样的可迭代对象一种更直接的遍历方法。

在jQuery中，for…of循环可以取代以前的$.each(…)语法，并且更容易通过jQuery的元素集合进行循环。

• 动画方面采用新的API

  jQuery 3使用requestAnimationFrame() API来执行动画，使动画运行得更加顺畅、快速。新的API只用于支持它的浏览器，对于那些更老的浏览器（如IE9）jQuery使用先前的API来作为显示动画的后备方案。

  RequestAnimationFrame已经推出一段时间了，如果你对如何使用它以及什么时候使用它感兴趣，CSS Tricks上有一篇很好的文章可供你阅读。

• 对包含特殊含义的字符串提供转义的新方法

  新的jQuery.escapeSelector()提供了对在CSS中存在特殊含义的字符串或字符进行转义的方法，该方法可使这些字符串或字符能够继续用于jQuery选择器中，而无需对那些无法进行正确理解的JavaScript解释器进行转义。

  这个示例可以让你更好的了解这个全新的方法：

  举个例子，页面中某个ID为**“abc.def”的元素由于选择器将其解析为ID为“abc”且包含一个名为“def”的类的对象，*而无法被$( “#abc.def” )选定。但是它可以由 $( “#” + $.escapeSelector( “abc.def” ) )来进行选定。

  我无法确定发生中情况的频率，但是假如你碰到过这种类似的情况，这无疑给了你一个解决该问题的简单方法。

• 类操作方法支持SVG

  不幸的是，jQuery 3现在还无法完整的支持SVG，但是对于操作CSS类名称的jQuery方法，如.addClass()和.hasClass()现在可以将SVG文档作为目标。这意味着你可以修改（添加、删除、切换）或者查找SVG（可缩放矢量图形）下的jQuery类，然后使用CSS的类样式。（相关阅读：Styling Scalable Vector Graphic (SVG) with CSS）

• ** 延迟对象现在与JS Promises兼容**

  JavaScript Promises，用于异步计算的对象，现在在ECMAScript 6中已经被标准化；它们的运行状况和特性的详细说明参见Promises/A+标准。

  在jQuery 3中，延迟对象已经与新的Promises/A+标准相兼容，延迟对象已经成为让创建回调队列成为可能的可链对象(chainable objects)。

  新的特性改变了异步回调函数执行过程，Promises允许开发者编写在逻辑上与同步代码更接近的异步代码。

  查看升级指南的代码示例，或者查看关于JavaScript Promises基础的Scotch.io教程可以让你了解更多的信息。

• jQuery.when()对于多种参数的不同解读

  $.when()提供了执行回调函数的一种方法，它成为了jQuery 1.5之后的一部分。这个方法非常灵活，它适用于零参数，也适用于一个或者多个作为参数的对象。

  jQuery 3改变了当包含**$.then()\ast \ast 方法时对$.when()中参数的解读方法，你可以对$.when()进行额外的参数回调。

  在jQuery 3中，如果你在$.when()中的then()方法内增加一个输入参数，该参数将会被解释成一个可与Promise兼容的**“thenable”**。

  这意味着 $.when方法能够接收更加宽广的输入范围，比如原生的ES6 Promises和Bluebird Promises，这也使得编写更复杂的异步回调成为了可能。

• 新的显示/隐藏逻辑

  为了增加响应式设计的兼容性，与元素显示和隐藏的代码在jQuery 3中进行了更新。

  从现在开始，.show()、.hide()和.toggle()方法将会以内联样式为重点取代以前的计算样式，这种方式能够更尊重样式列表的改变。

  新的代码尽可能的尊重样式列表中所呈现的数值，这意味着CSS规则可根据事件（如设备重新定位和窗口尺寸调整）进行动态改变。

  这个说明文件申明了最重要的结果就是：

  “作为结果，断开连接的元素除非指定了内联display: none，否则将不再认定为是隐藏的。因此，在jQuery 3.0中，.toggle()不再对断开连接元素与已连接元素进行区分。”

  如果你想要更好的了解关于全新的显示/隐藏逻辑，这个Github discussion会对你有帮助。jQuery开发者还发布了Google文档表来展示在不同用例下新规则的运转。

• 对于防止XSS攻击的额外保护

  jQuery 3增加一个额外的安全层用户用于防备跨站点脚本(XSS)攻击，它需要开发者指定$.ajax()](http://api.jquery.com/jquery.ajax/)和[$.get()方法中的选项为dataType: “script”。

  换言之，如果你想要执行跨站点的脚本请求，你必须在这些方法中作出这样的声明。

  新的改变对于当“远程站点传递非脚本内容之后又提供有恶意脚本的服务内容”的情况是非常有效的。这个变化不会影响$.getScript()方法，因为它明确地设置了dataType: "script"选项。

二、JQuery设计思想

• 选择网页元素

1. 模拟css选择元素的方式 请参阅 CSS 选择器参考手册。http://www.runoob.com/cssref/css-selectors.html

2. 独有表达式选择

3. 多种筛选方法

• JQuery写法

1. 方法函数化——所有赋值的操作都可以通过函数传参的方式实现

2. 链式操作——当对一个主体进行多种操作时，可以使用“.”进行串联

3. 取值赋值一体化

• JQ与JS的关系

  可以共存，不能混用。

三、JQuery常用方法

$()下的常用方法

• has()——拥有。直接判断子节点中是否有符合要求的元素

• not()——排除。排除not方法中对应参数的元素

• filter()——过滤。在已经获取到的网页元素中进行过滤，得到符合filter属性值的元素

• next()——查找当前兄弟节点中的下一个节点

• prev()——查找当前兄弟节点中的上一个节点

• find()——查找子节点

• eq()——eq（下标）通过下标获取指定的元素

• index()——获取当前节点在兄弟节点中的下标值

• attr()——设置和修改行间属性

$()下的常用方法

• addClass() removeClass() 操作Class属性

• width()——width

​ innerWidth()——width + padding

​ outerWidth()——width + padding + border

​ outerWidth(true)——width + padding + border + margin

• insertBefore() 插入到指定节点之前 before() 操作主体不同

• insertAfter() 插入到指定节点之后 after()

• appendTo() 插入到子节点的末尾 append()

• prependTo() 插入到子节点的首位 prepend()

• remove() 移除指定节点

• on() 给一个时间添加一个函数；同时给多个事件添加一个函数，多个事件之间使用空格进行分隔；给不同的事件添加不同的函数，中间使用逗号进行分隔；事件委托，第二个参数，是触发对象的选择器

off()

• scrollTop()——返回或设置匹配元素的滚动条的垂直位置。

$()下的常用方法（兼容后的）

• ev ——事件

pageX——带滚动距离

clientX——可视窗口为原点

which——鼠标事件中代表button（1左键2滚轮3右键）；键盘事件中keydown中代表keyCode键码，不区分大小写；在keyPress中代表charCode字符码，只支持字符键区分大小写

preventDefault()——阻止默认事件

stopPropagation()——阻止事件冒泡

既阻止事件冒泡，又阻止默认行为，可以在函数末尾return false

• one()

• offset()——直接获取当前元素距离最左边的距离，margin不包含在内

position()——直接获取当前元素距离第一个有定位的父节点的距离，包含margin

offsetParent()——查找第一个有定位的父节点，如果父节点没有定位就继续向上查找，直到HTML节点

• val()——获取设置表单元素的值。JQuery取值只能获取第一个符合条件的值，但是赋值是批量操作，会对所有获取到的元素进行赋值

css()、attr()、html()等方法在赋值时都是批量操作

• size()——输出获取到的网页元素的个数

• each()——循环

$()下的常用方法

• hover(funOver，funOut)——移入移出

• show()——显示

hide()——隐藏。第一个参数：动画持续的毫秒数；第二个参数，回调函数，动画结束的时候执行的

• fadeIn() fadeOut()——淡入淡出效果

fadeTo()——参数分别是动画持续时间；透明度0~1；回调函数

• slideDown() slideUp()——卷闸效果

基础方法扩充

• get(): 下标和length属性

• outerWidth(): 针对隐藏元素和参数true

• text(): 合体的特例

• remove()，detach()

• $(), $(document).ready()

$()下的常用方法

• parents() closest()

• siblings()

• nextAll() prevAll()

• parentsUntil() nextUntil() prevUntil() • clone()

• wrap() wrapAll() wrapInner() unwrap() • add() slice()

• serialize() serializeArray()

$()下的常用方法

• animate(width;height;opacity)——动画效果。默认的运动形式是“慢快慢”，匀速参数为leaner，默认的参数为swing

拓展更多的animate的运动形式可以引入JQuery-UI框架

• stop()

• delay() 延迟

• trigger() 主动触发

• ev.data ev.target(兼容后触发对象) ev.type(输出事件类型)

$().xxx()

$()下的常用方法(都没用了，ECMA5和ECMA6类似功能的函数)

• type()

• trim()

• inArray()

• proxy() 功能类似于bind

• noConflict()

• $.parseJSON() JSON.parse()

• makeArray() 将伪数组转成数组。 Array.from()

插件方法

•$

– $.extend

• $.fn

– $.fn.extend

四、总结和拓展

去查官方文档，学习剩余的方法

关于JQ的方法，我们需要多加练习熟练

http://jquery.cuishifeng.cn/