为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery介绍与常见选择器的使用

标签:
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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消