jQuery的代码应用

一 认识jQuery

jQuery是JavaScript Query的缩写形式。jQuery是一款非常优秀的JavaScript库，即便是MVVM框架盛行的今天，也有超过半数的网页及应用直接或间接的使用了jQuery。jQuery的设计理念是“Write Less, Do More“，即写的更少，做的更多！使用jQuery可以大大简化我们的JS代码，从而提高开发效率。

jQuery现在有3个大的版本，分别是1.x，2.x，3.x。你可以从jQuery官方网站下载需要的版本，然后从本地引入到自己的项目，也可以使用CDN引入。在你下载jQuery时一般有两个可选的版本，一个是压缩版（不包含换行和空格，体积更小，多用于实际项目开发），另一个是未压缩版（包含换行和空格，体积稍大，多用于学习和测试）。

另外，jQuery从第二个大的版本开始，为了优化网络响应和使语法更加简洁，抛弃了对IE6、7、8的支持，并且从2.1.0开始，压缩版本的文件中也不再包含注释信息了。为了获得更好的兼容性，我们这里使用的jQuery文件版本号是1.12.4。

二 jQuery核心

1，$符号

jQuery实际上是一个函数对象。事实上，jQuery通过全局变量jQuery引用该函数对象，$符号是jQuery变量的一个别名，为了写的更少，我们通常都使用$符号表示该对象。

如果你还使用了其他框架，或自定义了$变量，那么有可能和jQuery的$符号造成冲突。

在使用jQuery编程之前，首先调用noConflict()方法，解除jQuery对$符号的占用，这样就可以解决这一问题了。但往后就只能通过变量jQuery来使用jQuery的所有功能了。

2，参数

$核心函数可以接收3种类型的参数，分别是函数引用、字符串、DOM对象。

a) 接收一个函数

这种方式类似原生JS的window.DOMContentLoaded方法，只要HTML文档解析完毕并生成DOM tree就会触发该事件。但是在jQuery中可以同时存在多个该方法。

b) 接收字符串

c) 接收DOM元素

如果核心函数接收一个DOM元素，那么它会把该DOM元素包装成一个jQuery对象，并返回。

bat一线互联网面试真题详解企业及项目开发实战详解
可以添加前端学习群：1017810018 大家一起学习
小助理微信：hxhn_7758
lyf___1201

jQuery对象事实上是一个类数组，保存了获取到的DOM元素。只有通过jQuery对象才可以访问jQuery提供的属性和方法。

3，静态方法

jQuery提供了一些静态方法，例如遍历数组，字符串去空格，判断数据类型等等，这些方法在ES5之前都是很实用的方法，但ES5之后，原生JS就已经实现了这类似的方法，所以这里就不再详细讲解了，有兴趣可以自行查看官方文档。jQuery把ajax相关操作也封装为静态方法，稍后会专门讲解。这里要讲的只有holdReady方法。

三 jQuery 属性和节点

1，选择器

选择器是jQuery的核心功能。绝大多数css支持的选择器都可以在jQuery得到支持。

通过核心函数获取到的DOM元素都被包装成jQuery对象，以类数组的形式存储。我们可以通过eq方法获取其中某一个，还可以通过get方法获取DOM对象。

另外jQuery还提供了一些通过层级结构查找元素的方法。

2，属性操作

获取DOM元素之后，jQuery把它们包装成jq对象，然后你就可以通过jQuery提供的方法修改相应的DOM元素了，包括CSS，文本，属性节点，HTML结构等等。

属性及属性节点相关：

当属性没有被显示的设置时，通过attr()方法获取将返回undefined，而prop()方法可以返回true或者false，所以，如果你要检索和更改DOM属性，比如元素的checked，selected，或disabled状态，推荐使用prop()方法，其他时候都使用attr方法。

注意，使用上诉方法获取属性值时，返回的只是第一个匹配的DOM元素的相应属性值。但是设置的时候却是为所有匹配的DOM元素都添加该属性。

class类相关：

文本及结构相关：
css相关：

尺寸及位置相关：

3，节点

jQuery也提供了节点的增、删、改、查相关方法。

四 jQuery 事件

1，事件绑定和移除

jQuery提供了两种绑定事件的方式，第一种是on+事件名称的具体事件方法，第二种是直接使用on方法。

jQuery的事件绑定类似原生JS的addEventListener方法，可以同时绑定同一类型的多个事件，而不会相互覆盖。

jQuery通过off方法解除事件绑定。

2，阻止事件冒泡和默认行为

使用jQuery阻止事件冒泡和默认行为与原生JS一样。不太清楚的可以查看我的《DOM之事件（一）》。

3，一次性事件和自动触发事件

通常我们给元素绑定的事件处理程序需要特定的事件才能触发，比如click，mouseover等等，jQuery提供了triggerHandler方法，你可以通过该方法手动触发元素绑定的事件处理程序，而不用等到特定事件发生。

jQuery还提供了另一个方法：trigger。它的功能和triggerHandler方法一样。他们的不同之处在于triggerHandler不会触发事件的默认行为和冒泡。

4，事件委托

jQuery通过delegate方法实现事件委托。该方法使用上和原生JS有一些区别，原生JS实现事件委托也请移步《DOM之事件（一）》。

五 jQuery 动画

1，显示和隐藏

jQuery通过show方法和hide方法实现元素的显示和隐藏。它的原理是修改元素的display和宽高及opacity属性。

这两个方法还可以接受一个回调函数作为第二个参数，用于设置动画完成后需要执行的操作。

2，展开和收起

jQuery通过slideDown，slideUp实现平缓的展开和收起元素。该方法是通过高度变化（向下增大或减小）来动态地显示元素，在显示完成后可选地触发一个回调函数。

展开后收起动画常用来做下拉菜单。

3，淡入淡出

jQuery通过fadeIn和fadeOut实现淡入淡出效果。该方法的原理是修改元素的opacity属性，不会改变元素的宽高。也可接收一个回调函数。

4，自定义动画

jQuery通过animate方法实现自定义动画效果。

注意，jQuery的动画采用队列形式，每编写一个动画，就向动画队列中插入一个，只能等前面的执行完后才执行后面的。

5，停止和延迟

jQuery的stop方法可以暂停正在执行的动画。

介于jQuery通过队列形式控制动画执行，我们建议在调用jQuery动画之前都先调用一次stop方法，以免造成动画混乱。

jQuery通过delay延迟动画的执行。

六 jQuery Ajax

jQuery封装了功能完整的Ajax方法，我们常用的jQuery方法有3个，分别是$.ajax()、$.get()、$.post()。

1，ajax()方法

ajax方法接收一个对象作为参数，对象的属性名为ajax的设置参数，属性值为ajax的设置值。

常用的参数有：

type：请求类型，可选值有post和get。

url：发送请求的地址。

data：发送到服务器的数据。必须是“key0=value0&key1=value1“或键值对的形式（对象）。

cache：规定是否读取缓存数据，true表示读取，false表示不读取，直接从服务器获取。

dataType：期望服务器返回的数据类型，可选值有xml，html，script，json，text。

success：ajax请求成功回调函数。

error：ajax请求失败回调函数。

使用ajax()方法时，所有的设置参数都是可选的，除了上诉参数外，还有很多其他的参数可选，这让我们在通过jQuery实现ajax时有了更大的灵活性。如果你想了解更多相关参数的信息，请到jQuery官网查询。

2，get()方法

如果你觉得ajax()方法发送简单get请求还是太麻烦，那么你可以直接使用$.get()方法。

该方法只需要4个参数，发送请求的url，发送的数据，请求成功的回调函数，期望的返回值类型。

3，post()方法

使用$.post()方法和$.get()一样，他们都只需要4个参数。

4，load()方法

load()方法可以直接请求服务器的数据并添加到DOM元素中。默认使用get方式，如果你向服务器发送了数据，将自动转换为post方式。


load()方法可以有3个参数，请求的url，向服务器发送的数据，请求成功后的回调函数。

写在最后：jQuery作为一款工具库，我们只需要知道它能干什么和怎么干就好，不必完全深入的学习它。当我们需要用它的时候配合官方文档编写相关代码即可。如果你在技术上有所追求，那么你还是可以仔细研读jQuery源码，相信一定会有不少收获。其实不光jQuery，在你学习其他框架或库或工具的时候，也可以按照这种方式学习，作为一个软件工程师，计算机原理，操作系统，网络技术等等才是构造你上升的基石，其次才是各种编程语言，热门框架及工具等等。

bat一线互联网面试真题详解企业及项目开发实战详解
可以添加前端学习群：1017810018 大家一起学习
小助理微信：hxhn_7758
lyf___1201