jQuery 用法入门

概述

虽然已经 2020 年了，但是，对于非专业编程人士来说，使用 jQuery 仍然是一个不错的选择的。因为它是一个希望用户 写的少，做的多 的 JavaScript 库，并得到了广泛的使用。它具有以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

我并非是职业写程序的，既没有完整的时间去学习，也没有那样的环境让我学习；只是偶尔由于工作需要使用编程工具，因此 jQuery 帮我快速地完成了网站菜单、网站 UI 等其他工具没有帮我完成的事情。因此，虽然知乎等网站上充斥着大量的批评jQuery的意见，我仍然愿意选用 jQuery 来帮我完成工作上的一些编程任务。

jQuery版本

1.xx 的版兼容 IE 6/7/8，官方只做 BUG 维护，功能不再新增。最终版本：1.12.4 (2016年5月20日)
2.xx 版本不兼容 IE 6/7/8，官方只做 BUG 维护，功能不再新增。
3.xx 版本不兼容 IE 6/7/8，只支持最新的浏览器。并且很多老的jQuery插件不支持 3.x 版。目前该版本是官方主要更新维护的版本。

压缩版（mini,js）与未压缩版本的功能一致，区别只在于文件大小

引用 jQuery 到 HTML

在网页中引入 jQuery 库的方法有很多种，简单总结如下：

本地引用
```
 <head>
     <script src="jquery-1.10.2.min.js"></script>
 </head>
```
JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！因此没有必要在 <script> 标签中使用 type="text/javascript" 了。

CDN 引用

 <head>
     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

     <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

     <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

     <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
 </head>

使用 CDN 的原因
许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

jQuery 的语法

jQuery 库的引用字符

当然要在 JavaScript 语句中指明使用的是 jQuery 库，否则网页怎么知道呢？用法有两种：

最常见： $ ，如 $("#ID值"); ；
最安全： jQuery ，如 jQuery("#ID值"); 。

这两种我都用过，不过网上最常见的是第一种用法，后续也采用这种表述，字面上简洁一些。

入口函数

为了确保 JavaScript 脚本能够正确执行，建议 jQuery 的编写如下：

<script>
    $(function(){

       // 开始写 jQuery 代码...

    });
</script>

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
上述方法可以对多个脚本片段进行加载。

语法公式

$(selector).action()

选择符（selector）：需要 “查询”和”查找” HTML 元素

action()：执行对元素的操作

  $(this).hide() - 隐藏当前元素

  $("p").hide() - 隐藏所有 <p> 元素

  $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

  $("#test").hide() - 隐藏 id="test" 的元素

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。它基于已经存在的 CSS 选择器，实现对元素的 id、类、类型、属性、属性值等 “查找”（或选择）HTML 元素的功能。

选择器的基本用法

 //id选择器
 $("#ID值");

 //标签选择器
 $('tagName');

 //class类选择器
 $('.className');

 //交集选择器,选择两个条件同时成立的标签
 $('div.c1'); //选择class=c1的div标签

 //并集选择器，选择满足以下条件中任意一个的所有标签
 $('#d,.c1,p'); //选择id=d的标签，具有class=c1的标签，标签是p的标签。

 //所有元素选择器
 $('*'); //选择所有的标签

多层匹配选择

jQuery 的选择器不仅可以选择一个层级的元素，还可以像串珠子一样依次选择多个层级的元素，化简代码的处理逻辑，主要方法如下：

 //后代选择器
 $('a b'); //处于a标签级别下的所有b标签，用空格分开。

 //子类选择器
 $('a>b'); //处于a标签级别下一级别的所有b标签。

 //毗邻单一弟弟选择器
 $('a+b'); //与a标签同一级别的紧挨着a标签的b标签。

 //毗邻多个弟弟选择器
 $('a~b'); //与a标签同一级别的位于a标签之后的所有b标签。

精确筛选元素

嗯，jQuery 还可以精确地筛选第 1 个、最后 1 个等元素，相当方便，如下：

选择器	实例	选取
:first	$(“p:first”)	第一个 `<p>` 元素
:last	$(“p:last”)	最后一个 `<p>` 元素
:even	$(“tr:even”)	所有偶数 `<tr>` 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:odd	$(“tr:odd”)	所有奇数 `<tr>` 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:first-child	$(“p:first-child”)	属于其父元素的第一个子元素的所有 `<p>` 元素
:first-of-type	$(“p:first-of-type”)	属于其父元素的第一个 `<p>` 元素的所有 `<p>` 元素
:last-child	$(“p:last-child”)	属于其父元素的最后一个子元素的所有 `<p>` 元素
:last-of-type	$(“p:last-of-type”)	属于其父元素的最后一个 `<p>` 元素的所有 `<p>` 元素
:nth-child(n)	$(“p:nth-child(2)”)	属于其父元素的第二个子元素的所有 `<p>` 元素
:nth-last-child(n)	$(“p:nth-last-child(2)”)	属于其父元素的第二个子元素的所有 `<p>` 元素，从最后一个子元素开始计数
:nth-of-type(n)	$(“p:nth-of-type(2)”)	属于其父元素的第二个 `<p>` 元素的所有 `<p>` 元素
:nth-last-of-type(n)	$(“p:nth-last-of-type(2)”)	属于其父元素的第二个 `<p>` 元素的所有 `<p>` 元素，从最后一个子元素开始计数
:only-child	$(“p:only-child”)	属于其父元素的唯一子元素的所有 `<p>` 元素
:only-of-type	$(“p:only-of-type”)	属于其父元素的特定类型的唯一子元素的所有 `<p>` 元素

当然，如果涉及上下层级之间的关系切换，那就需要在选择器的基础上使用筛选方法了。

选择器	实例	选取
parent > child	$(“div > p”)	`<div>` 元素的直接子元素的所有 `<p>` 元素
parent descendant	$(“div p”)	`<div>` 元素的后代的所有 `<p>` 元素
element + next	$(“div + p”)	每个 `<div>` 元素相邻的下一个 `<p>` 元素
element ~ siblings	$(“div ~ p”)	`<div>` 元素同级的所有 `<p>` 元素

表单的筛选

方法	说明
$(“:text”);	找出type=”text”(文本)的input标签
$(“:password”);	找出type=”password”（密码）的input标签
$(“:file”);	找出type=”file”（文件）的input标签
$(“:radio”);	找出type=”radio”（单选框）的input标签
$(“:checkbox”);	找出type=”checkbox”（多选框）的input标签
$(“:submit”);	找出type=”submit”的input标签
$(“:reset”);	找出type=”reset”的input标签
$(“:button”);	找出type=”button”的input标签

注意：$(“:text”)与$(“input:text”);结果相同

表单对象的属性

方法	说明
$(“input:enabled”);	找出属性为enabled（可用）的input标签
$(“input:disabled”);	找出属性为disabled（不可用）的input标签
$(“input:checked”);	找出属性为checked（显示默认选择）的input标签
$(“:selected”);	找出属性为selected（显示默认选择）的option标签

jQuery 的方法

jQuery 方法涉及到事件的操作方法、元素的筛选方法以及元素的动态效果等等。由于该部分内容较为复杂，此处不再展开，详询参考文献 ^6-12 相关部分。

参考文献

张三帅.jQuery[EB/OL].https://www.cnblogs.com/mingkong-z/articles/9131866.html, 2020/10/05.
老佐.JavaScript 及 jQuery 常用dom操作方法[EB/OL].https://www.cnblogs.com/html5css3js/p/4550666.html, 2020/10/05.
hemin.jQuery 1.12.1 速查表[EB/OL].http://hemin.cn/jq/, 2020/10/05.
minoz.JQuery字符串的操作[EB/OL].https://www.cnblogs.com/minozMin/p/8328028.html, 2020/10/05.

菜鸟教程.jQuery 安装[EB/OL].https://www.runoob.com/jquery/jquery-install.html, 2020/10/07.

菜鸟教程.jQuery 选择器[EB/OL].https://www.runoob.com/jquery/jquery-ref-selectors.html, 2020/10/07.

菜鸟教程.jQuery 事件方法[EB/OL].https://www.runoob.com/jquery/jquery-ref-events.html, 2020/10/07.

菜鸟教程.jQuery 效果方法[EB/OL].https://www.runoob.com/jquery/jquery-ref-effects.html, 2020/10/07.

菜鸟教程.jQuery HTML / CSS 方法[EB/OL].https://www.runoob.com/jquery/jquery-ref-html.html, 2020/10/07.

菜鸟教程.jQuery 遍历方法[EB/OL].https://www.runoob.com/jquery/jquery-ref-traversing.html, 2020/10/07.

菜鸟教程.jQuery AJAX 方法[EB/OL].https://www.runoob.com/jquery/jquery-ref-ajax.html, 2020/10/07.

菜鸟教程.jQuery 杂项方法[EB/OL].https://www.runoob.com/jquery/jquery-ref-misc.html, 2020/10/07.

最后更新： 2021/03/08 20:17:54

编者： David Faraday

主用链接： https://faradays-studio.gitee.io/202010052246/

备用链接： https://faradays-studio.github.io/202010052246/

引用、演绎等请注明出处，共创和谐社会，谢谢你的合作！