jQuery 学习系列笔记（一）

发布时间：2020-05-30 05:39:38 作者：我不会抽烟
来源：网络阅读：744

jQuery的强大自不必我多言，我想是时候的来认真的学习一下它了，不说废话了，一起来领会jQuery的伟大吧！

导航：

一	基本原理
二	jQuery包装器
三	实用工具函数
四	文档就绪处理程序
五	创建DOM元素
六	扩展jQuery
七	jQuery和其他库

一、基本原理

1、jQuery核心部分就是如何从HTML页面里获取元素并对其进行操作。即选择器（selector）。

2、选择器是通过元素的特性或元素在HTML文档中的位置去描述元素组。

二、jQuery包装器

当收集一组元素时，可以使用的简单语法如下：

$(selector)
或者
jQuery(selector)

由此可以看出，$()函数是jQuery()函数的别名。“$”刚接触可能有点奇怪，但是你很快就会喜欢上它的简洁。

举个例子：为了获取嵌套在<p>元素内的一组链接（<a>元素）。jQuery语句如下：

$("p a");

$()函数返回特别的JavaScript对象，它包含着与选择器相匹配的DOM元素的数组。

下面说一个比较好玩的东西，就是jQuery链。

举个例子：让带有CSS类star的所有<div>元素呈现淡出效果，同时再给它们添加一个新的CSS类big。jQuery语句如下：

$("div.star").fadeOut().addClass("big");

说明一下，fadeOut()是jQuery自带的淡出效果的方法，addClass()是jQuery的添加类方法。

我想说的这条语句的重点是：选择一次，可以进行多次不同的操作。这就是jQuery链，它可以无限延续。之所以可以这样做是因为，当$()完成一个操作（比如淡出操作）时，它们返回相同的一组元素，提供给下一个操作。

jQuery选择器还有更加高级的用法，下面举几个例子大家体会一下：

（1）选择所有偶数的<p>元素

$("p:even");    even指偶数的意思

（2）选择每个表格的第一行

$("tr:nth-child(1)");

（3）选择作为<body>直接子节点的<div>

$("body > div");

（4）选择指向PDF文件的链接

$("a[href$=pdf]");

（5）选择作为<body>直接子节点、包含链接（<a>元素）的<div>

$("body > div:has(a)");

三、jQuery实用工具函数

$()函数不光是能作为选择器使用，它还有另外的一个职责就是作为几个通用的实用工具的命名空间前缀。通常我们可能很少会用到，因为通过选择器的使用，就觉得jQuery已经很强大了，不过作为jQuery的一部分，有必要了解一下。

什么是实用工具？举个例子大家就都会明白。删除字符串前后空格的实用工具函数，写法如下：

$.trim(someString);

大家如果觉得$.不得劲，那就把它当成一个类的命名空间就好了，就好像string.一样的意思，或许用jQuery代替会觉得更加熟悉一些。

jQuery.trim(someString);

虽然被称作实用工具函数，事实上就把它当成函数$()的一个方法就好。

四、文档就绪处理程序

通常页面在浏览器窗口显示前要经历两个步骤：

（1）构建DOM树

（2）加载图像和其他外部资源

我们都知道如果使用JavaScript对页面元素进行操作的时候，必须要在浏览器把HTML转换成DOM树之后。传统上，window实例的onload处理程序被用于上述上的，语法通常如下：

window.onload = function(){
    $("div.star").fadeOut().addClass("big");
}

这样就能在文档完整地加载之后，执行淡出效果和添加CSS类big。

但是需要注意一点的是这并不是最好的时机，因为onload的执行不仅是在步骤（1）之后，它也在步骤（2）之后，这就会导致一个问题，如果图像或外部资源比较大的时候，我们不仅要等待加载的这段时间，甚至我们会看到页面到我们脚本执行的效果的延时。如果是一个没什么耐心的用户，可能还没等资源加载完成，就已经把页面关掉了，那也就看不到你的“效果”了。

所以jQuery提供了我们一个简单的方法，它可以在一个完美的时机去展示我们的效果。下面我们来看看它是什么

$(document).ready(function() {
    $("div.star").fadeOut().addClass("big");
});

把“效果”写在这个函数里，只要等到步骤（1）结束之后，我们的代码就会被激活。上述代码也可以简写成：

$(function() {
    $("div.star").fadeOut().addClass("big");
});

还有一个是$()比window.onload好的地方，$()可以同一个HTML文档中多次使用，而浏览器则会按照函数在页面中定义的先后顺序一一执行。而window.onload机制只能使用一次，如果我们引入任何第三方代码里采用了onload机制，就会很麻烦。

五、创建DOM元素

通过给$()函数传递包含HTML标记的字符串，可以即时创建相应的DOM元素。

举个例子：新建段落元素。写法如下：

$("<p>Hello World</p>");

但是只创建了一个元素，但并不知道它的层次结构（即它的位置），看起来其作用不大，所以通常会在创建DOM元素之后直接对其安排位置。

举个例子：在id="paragraph"的<p>元素后新建一个段落元素。写法如下：

$("<p>Hello World</p>").insertAfter("#paragraph");

六、扩展jQuery

关于扩展jQuery让我有点热血沸腾，我们都知道没有哪个库能设法将每个人需要的东西都预先准备好。所以jQuery核心库里只为我们准备了大多数页面作者需要的功能（当然，这也是相当多的功能了）。

下面举个例子展示一下扩展jQuery有多爽，我们做一个“用于禁用一组表单元素的函数”。

$("form#myform input.special").disable();

因为jQuery并没有提供disable()这样的方法，所以我们要扩展，基本惯用语法如下：

$.fn.disable = function(){
    return this.each(function() {
        if(typeof this.disabled != "undefined"){
            this.disabled = true;
        }
    });
}

突然看到这么一堆乱糟糟的大家别怕，下面一一进行解释，等大家继续学习，这些就很easy了，反正我是这样想的，我也是在这正边看边学，感觉看明白了这块的知识点才敢表上来的。

首先，$.fn.disable表示我们用名为disable的函数来扩展$包装器。大家有没有发现$.fn属于一个实用工具函数，第2行的this表示将被操作的包装DOM元素集合（其实就是所有满足“form#myform input.special”这一条件的DOM元素集合）。

然后，each()方法就是遍历this集合里的每个元素，第3行的this表示的是当前遍历到的元素，它不是集合，是指特定的这一DOM元素。如果这块大家有点没理解也不要慌，多写写慢慢就懂了。

最后，if条件句里表示当前遍历到的这个元素有没有disabled特性，如果有，将其值置为true。

这样我们就把一个扩展jQuery写好了。同时它也支持jQuery命令链的。

$("form#myform input.special").disable().addClass("moreSpecial");

这里面其实大家仔细琢磨会发现一些有趣的东西，现在可能是一脑子浆糊，不过继续学习就Ok啦！

七、jQuery和其他库

jQuery可以说是一个和平使者，即便其本身很强大，但也从来未想过独霸天下，创造者也是本着满足用户需求，但是由于其别名$，有时还是与其他库造成小小的冲突，比如Prototype库（我个人是不知道其是什么东东）。不过jQuery还是把这个问题给解决了，那就是使用另一个实用工具函数noConflict()来消除冲突。

jQuery.noConflict();

它会把$还原到非jQuery库所定义的含义。

关于jQuery的学习系列笔记我写的会比较简洁，更注重的是快速上手使用，当然，非常重要的知识点我还是会专门指出的。

PS：欢迎留言交流，24小时内必有回复。

jQuery 学习系列笔记（一）

相关阅读