jQuery介绍与常见选择器的使用-原创手记-慕课网

jQuery简介

jQuery是继Prototype之后又一个优秀的JavaScript库，是一个由John Resig创建与2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI、插件和jQuery Mobile 等开发人员以及推广和网站设计、维护人员。

jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM树、处理事件、执行动画和开发AJAX的操作。其独特而优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、业务爱好者还是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都有足够多的理由去学习jQuery。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery优势

jQuery强调的理念是写得少，做得多（write less，do more）。jQuery独特的选择器、链式操作、事件处理机制和封装完善的AJAX都是其他JavaScript库望尘莫及的。概括起来，jQuery有以下优势：

1.轻量级（那些说jQuery臃肿的，自己定制库的大神就当我没说）。相对于其他库来说jQuery非常轻巧，采用UglifyJS压缩后，目前最新版压缩后大小在85KB左右（随着版本的不同这个数字可能不一样）。

（题外话：为了使jQuery变得轻巧，jQuery一直在寻求最好的压缩工具，所以jQuery的压缩工具也一直在变化，从最早采用Dean Edward编写的Packer，到后来使用Google Compiler进行压缩，最后到目前使用UglifyJS进行压缩。）

2.强大的选择器。jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。由于jQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易的切入到jQuery的学习中来。

3.出色的DOM操作的封装。jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。通过jQuery可以轻松地完成各种原本非常复杂的操作，让 JavaScript 新手也能写出出色的程序。

4.可靠的事件处理机制。jQuery的事件处理机制吸收了JavaScript专家Dean Edward编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。在预留退路（graceful degradation）、循序渐进以及非***式（Unobtrusive）编程思想方面，jQuery也做得非常不错。

5.完善的AJAX。jQuery将所有的AJAX操作封装到一个函数$.ajax()里，使得开发者处理AJAX的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

6.不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象。该特性使jQuery可以与其他JavaScript库共存，在项目中放心的引用而不需要考虑到后期可能的冲突。

7.出色的浏览器兼容性。作为一个流行的JavaScript库，浏览器的兼容性是必须具备的条件之一。jQuery能够在IE6.0+、FF3.6+、Safari5.0+、Opera和Chrome等浏览器下正常运行。jQuery同时修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。

8.链式操作方式。jQuery中最具有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。这一特点是jQuery的代码无比优雅。

9.隐式迭代。当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成自动操作对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅减少代码量。

10.行为层与结构层的分离。开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也非常方便，不需要再HTML代码中寻找某些函数和重复修复HTML代码。

11.丰富的插件支持。jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。目前已经有成百上千的官方插件支持，而且还不断有新插件面世。

12.完善的文档。jQuery的文档非常丰富，不管是英文文档还是中文文档。

13.开源。jQuery是一个开源的产品，任何人都可以自由地使用并提出改进意见。

注：以上转自《锋利的jQuery》一书

配置jQuery环境

jQuery的环境配置很简单，只需要到官网下载一个.js文件放到工程里就可以了。
官网下载地址：https://jquery.com/download/

图中的Download the compressed, production jQuery 3.2.1是最小化版，代码经过压缩的，一般用于生产环境。
Download the uncompressed, development jQuery 3.2.1则是未压缩版，代码未经过压缩，可供阅读，一般用于开发环境。

下载完成：

打开压缩版的jQuery可以发现，除了注释外，代码中几乎没有空格和换行，这附带在生产环境中可以节省资源：

未压缩版的jQuery代码是正常的格式，在开发时遇到一些特殊的问题就可以参考源码寻找解决方法：

注意：虽然有压缩和未压缩的两种版本，但是两个版本除了在代码压缩之外并没有任何区别，压缩版并没有删减jQuery的功能，未压缩版也没有增加什么功能。

选择一个版本的jQuery，导入工程中，我选择的是min版：

然后在HTML文件中引入jQuery：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>    <body>    </body></html>

使用如下语句测试jQuery是否能够正常使用：

<script>        function test(){            alert('Hello jQuery');        }        $(document).ready(test());</script>

使用浏览器访问该页面，弹出如下对话框则代表没问题：

使用jQuery的选择器

在开始使用jQuery之前，首先应该明确一点，在jQuery库中，\$就是jQuery的一个简写形式，例如\$("#foo") 等价于 jQuery("#foo")，\$.ajax和jQuery.ajax是等价的。如果没有特别的说明，程序中的\$符号都是jQuery的一个简写形式。既然是简写形式，那么我们来看看jQuery在源码中是怎么定义的：

    // Define a local copy of jQuery    jQuery = function( selector, context ) {        // The jQuery object is actually just the init constructor 'enhanced'        // Need init if jQuery is called (just allow error to be thrown if not included)        return new jQuery.fn.init( selector, context );    },    //......以下代码省略......

从以上源码可以看到，jQuery是通过函数表达式定义的，所以它是一个函数（function）对象。

知道jQuery是怎么定义的，那么再来看看$这个别名是怎么定义的，顺便再看看jQuery是如何防止变量冲突的，这段代码是jQuery源码的最后一段：

//......以上代码省略......var    // Map over jQuery in case of overwrite    _jQuery = window.jQuery,    // Map over the $ in case of overwrite    _$ = window.$;    // 以上两个私有变量映射了 window 的 jQuery 和 $ 两个对象，以防止变量被强行覆盖// 这是防止变量冲突，用来释放变量控制权的一个重要函数，deep是一个可选的布尔参数，用以决定移交 $ 引用的同时是否移交 jQuery 对象本身。一旦 noConflict 方法被调用，则通过 _jQuery, _$, jQuery, $ 四者之间的差异，来决定控制权的移交方式。jQuery.noConflict = function( deep ) {    // 默认处理 $     if ( window.$ === jQuery ) {        window.$ = _$;    }    // 当deep设置为 true 的话，_jQuery 覆盖 window.jQuery，此时 $ 和 jQuery 都将失效。    if ( deep && window.jQuery === jQuery ) {        window.jQuery = _jQuery;    }    // 无论如何都会返回jQuery对象给jQuery.noConflict    return jQuery;};// Expose jQuery and $ identifiers, even in AMD// (#7102#comment:10, https://github.com/jquery/jquery/pull/557)// and CommonJS for browser emulators (#13566)// noGlobal函数没被调用就把jQuery对象给window中的 jQuery 和 $ if ( !noGlobal ) {    window.jQuery = window.$ = jQuery;}return jQuery;} );

在使用jQuery时，通过$( )来包装、简化操作，这个括号中可以传递选择器的名称，也可以传递DOM对象。传递DOM对象的话，就是直接包装传递过去的DOM对象。传递选择器的名称则包装的是使用这个选择器的DOM对象。不管传递什么，包装后生成的都是jQuery对象，jQuery对象不能调用DOM对象的方法或属性，例如innerHTML、checked等。jQuery对象只能调用自己的方法，例如html、attr等。而且我们得知道，在DOM树中的每一个节点或者说标签，都是一个对象。

以下演示几个常用的选择器：
1.标签选择器。传入标签的名称，就可以控制所有符合该名称的标签，示例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>    <body>        <p></p>        <p></p>        <p></p>        <p></p>        <p></p>    </body>    <script>        $("p").html('hello');  // 给所有的p标签都写入hello    </script></html>

运行结果：

hello
hello
hello
hello
hello

2.类选择器。传入css中定义的类选择器名称，就可以控制包含该选择器的所有标签，示例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>    <style>        .test{        }    </style>    <body>        <p class="test" ></p>        <p class="test"></p>        <p class="test"></p>        <p></p>        <p></p>    </body>    <script>        $(".test").html('hello');  // 给包含该类选择器的标签都写入hello    </script></html>

运行结果：

hello
hello
hello

3.id选择器。传入标签的id值，然后在值的前面加上 # （与css中的选择器命名一样）即可，无论css中是否有定义该id选择器都可以这么使用，示例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>    <style>    </style>    <body>        <p id='test' ></p>        <p id='test1' ></p>        <p id='test2' ></p>    </body>    <script>        // 给包含该id的标签都写入hello        $("#test").html('hello');        $("#test1").html('hello1');        $("#test2").html('hello2');    </script></html>

运行结果：

hello
hello1
hello2

属性选择器，同样的和CSS里的使用方式是一样的：
p[title] p标记中只要有titile属性即可
p[title='1'] 只要写类title属性并且等于 1
p[title*='1'] 只要属性中包含1即可
p[title^='1'] 只要属性开头是1即可
p[title$=1] 只要属性结尾是1即可

示例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>    <body>        <pre title="test" ></pre>        <p title="test2"  ></p>        <p title="10086" ></p>        <p title="001" ></p>        <p title="100" ></p>    </body>    <script>        $("pre[title]").html('hello');        $("p[title='test2']").html('hello1');        $("p[title*='86']").html('hello2');        $("p[title^='0']").html('hello3');        $("p[title$='0']").html('hello4');    </script></html>

运行结果：

hello
hello1
hello2
hello3
hello4

以上只是演示的了一些常见的选择器使用方式，其他的选择器使用方式可以参考以下jQuery的中文文档：
https://www.jquery123.com/

简单的事件注册：

通过选择器搜索出来的对象包装后是jQuery对象，所以不能使用DOM中的事件注册方式，需要使用jQuery对象的事件注册方式。示例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>    <body>        <button class="test" >Hi</button>    </body>    <script>        // 当对象被点击，就会执行function里面的代码，这和onclick事件一样        $(".test").click(function(){            alert('hello');        });    </script></html>