jQuery的优势
jQuery是继Prototype之后又一个优秀的JavaScript库，是一个由John Resig创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和遍写程序的方式。总之，无论是网页设计师、后台开发师、业余爱好者还是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都有足够多的理由去学习JQuery。
jQuery强调的理念是写得少，做的多（write less，do more）。jQuery独特的选择器、链式的DOM操作、事件处理机制和封装完善的Ajax都是其他JavaScript库往尘莫及的。概括起来，jQuery具有轻量级、强大的选择器、出色的DOM操作的封装、可靠的事件处理机制、完善的Ajax、不污染顶级变量、出色的浏览器兼容性、链式操作操作方式、隐式迭代、行为层与结构层的分离、丰富的插件支持、完善的文档、开源等优点。
配置jQuery环境
获取jQuery最新版本
进入jQuery的官方网站https://jQuery.com/进行下载。
jQuery库类型说明
jQuery库分为两种，分别是Jquery-3.6.0.js和jQuery-3.6.0.min.js,可以在https://jQuery.com/download/地址中获取最新的两种类型的jQuery库。
| 名称 | 说明 |
| jQuery-3.6.0.js | 完整无压缩版本，主要用于测试、学习和开发 |
| jQuery-3.6.0.min.js | 经过工具压缩后的版本，大小为94.8KB。如果服务器开启Gzip压缩，大小将更小，成为体积最小的版本。主要应用于产品和项目 |
jQuery环境配置
jQuery不需要安装，只把jQuery-3.6.0.js放到网站上的一个公共位置，想要在某个页面上使用jQuery时。只需在相关的HTML文档中引入该库文件的位置即可。
在页面中引入jQuery
本书将jQuery-3.6.0.js放在目录js下，为了方便调试，在所提供的jQuery例子中使用的是相对路径。在实际项目中，应该根据实际需要调整jQuery库路径。
在编写的页面代码中<head>标签内引入jQuery库后，就可以使用jQuery库了，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="../js/jquery.js">
</script>
</body>
</html>jQuery开发工具和插件
Visual Studio Code
Visual Studio Code（简称VS Code）是一款由微软公司开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能，并且内置了命令行工具和Git版本控制系统VS Code默认支持非常多的编程语言，包括JavaScript、Typescript、CSS和HTML。也可以下载扩展支持python、C/C++、Java、go语言支持其他语言。作为跨平台的编辑器，VS Code允许用户更改文件的代码页、换行符和编程语言。
要使用VS Code支持jQuery自动提示代码功能，方法非常简单，只需在“插件管理器”中输入关键字jQuery，在结果列表中选择相应的jQuery Co的Snippet插件安装即可
HBuilder
HBuilder是一款支持HTML5的Web开发IDE，是当前效率最高的HTML开发工具，强大的代码助手帮用户快速完成开发。 HBuilder支持jQuery、zepto等JavaScript框架。 在HBuilder中引入jQuery框架也很方便，选择“新建”命令，选择“JavaScript文件”选项，弹出提示窗口，在“选择模板”中选择所需要的版本。
基本选择器
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
基本选择器时jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。
| 选择器 | 描述 | 返回 | 示例 |
| #id | 根据给定的id匹配一个元素 | 单个元素 | $('#test')选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取所有class为test元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $('p')选取所有元素的<p>元素 |
| * | 匹配所有的元素 | 集合元素 | $('*')选取所有的元素 |
| selector1，selector2，...selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $('div,span,p,myClass')选取所有<div>、<span>和拥有class为myClass的<p>标签的一组元素 |
层次选择器
如果项通过DOM元素之间的层次关系来获取特定元素，例如后代选择器，子元素，想等元素和兄弟元素等，那么层次选择器是一个非常好的选择。
| 选择器 | 描述 | 返回 | 示例 |
| $('ancestor descendant') | 选取ancestor元素里的所有descendant后代元素 | 集合元素 | $('div span')选取<div>里所有的<span>元素 |
| $('parent>child') | 选取parent元素下的child子元素，$('ancestor descendant')选择的是后代元素 | 集合元素 | $('div>span')选取<div>元素下的元素名是span的子元素 |
| $('prev+next') | 选取紧接在prev元素后的next元素 | 集合元素 | $('.one+div')选取class为one的下一个<div>元素 |
| $('prev~siblings') | 选取prev元素之后的所有sibings元素 | 集合元素 | $('#two~div')选取id为two的元素后面的所有<div>兄弟元素 |
过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都一个冒号开头。按照不同的过滤规则，过滤选择器可以分为基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性选择器。
基本过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :first | 选取第一个元素 | 单个元素 | $('div:first')选取所有<div>元素中第一个<div>元素 |
| :last | 选取最后一个元素 | 单个元素 | $('div:last')选取所有<div>元素中最后一个<div>元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $('input:not(.myClass)')选取class不是myClass的<input>元素 |
| :even | 选取索引是偶数的所有元素，索引从0开始 | 集合元素 | $('input:even')选取索引是偶数的<input>元素 |
| :odd | 选取索引是奇数的所有元素，索引从0开始 | 集合元素 | $('input:odd')选取索引是奇数的<input>元素 |
| :eq(index) | 选取索引等于index的元素，index从0开始 | 单个元素 | $('input:eq(1)')选取索引等于1的<input>元素 |
| :gt(index) | 选取索引大于index的元素，index从0开始 | 集合元素 | $('input:gt(1)')选取索引大于1的<input>元素 |
| :lt(index) | 选取索引小于index的元素，index从0开始 | 集合元素 | $('input:lt(1)')选取索引小于1的<input>元素 |
| :header | 选取所有的标题元素，如h1、h2、h3等 | 集合元素 | $(':header')选取页面中所有的<h1>、<h2>、<h3>... |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 | $('div:animated')选取正在执行动画的<div>元素 |
内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。
| 选择器 | 描述 | 返回 | 示例 |
| :contains(test) | 选取含有文本内容为test的元素 | 集合元素 | $("div:contains('我')")选取含有文本“我”的<div>元素 |
| :empty | 选取不包含子元素或者文本的空元素 | 集合元素 | $('div:empty')选取不包含子元素（包含文本元素）的<div>空元素 |
| :has(selector) | 选取含有选择器所匹配的元素 | 集合元素 | $('div:has(p)')选取含有<p>元素的<div>元素 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 | $('div:parent')选取含有子元素（包含文本元素）的<div>元素 |
可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态选择相应的元素。
| 选择器 | 描述 | 返回 | 示例 |
| :hidden | 选取所有不可见的元素 | 集合元素 | $(':hidden')选取所有不同的元素，包括<input type="gidden'>、<div style='display:none'>和<div style='visibillty:hidden'>等元素。如果只想选取<input>元素，可以使用$('input:hidden') |
| :visible | 选取所有可见元素 | 集合元素 | $('div:visible')选取所有可见的<div>元素 |
属性过滤选择器
属性过滤选择器的过滤规则是通过元素属性来获取相应的元素。
| 选择器 | 描述 | 返回 | 示例 |
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $('div[id]')选取拥有属性id的元素 |
| [attribute=value] | 选取属性的值为value的元素 | 集合元素 | $('div[title=test]')选取属性title为test的<div>元素 |
| [attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 | $('div!=[title=test]')选取属性title不等于test的<div>元素。注意：没有属性title的<div>元素也会被选取 |
| [attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | $('div[title^=test]')选取属性title以test开始的<div>元素 |
| [attribute$=value] | 选取属性的值以value结束的元素 | 集合元素 | $('div[title$=test]')选取属性title以test结束的<div>元素 |
| [attribute*=value] | 选取属性的值含有value介绍的元素 | 集合元素 | $('div[title*=test]')选取属性title含有test的<div>元素 |
| [selector1][selector2]... [selectorN] | 用属性过滤选择器合并成一个复合属性过滤选择器，满足多个条件。每选择一次，缩小一次范围 | 集合元素 | $('div[id][title$=test]')选取拥有属性id，并且属性title以test结束的<div>元素 |
子元素过滤选择器
子元素过滤选择器的过滤规则相对于其他过滤选择器稍微复杂，只要将元素的父元素和子元素区分清，那么使用起来也非常简单。另外，还要注意它与普通的过滤选择器的区别。
| 选择器 | 描述 | 返回 | 示例 |
| :nth-child(index/even/odd/equation) | 选取每个父元素下的第index个子元素或者奇偶元素（index从1算起） | 集合元素 | :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的 |
| :first-child | 选取每个父元素的每一个子元素 | 集合元素 | :first只返回单个元素，而:first-child选择符将为每个父元素第一个子元素。例如，$('ul li:first-child')选择每个<ul>中第一个<li>元素 |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 | 同样,:last只返回单个元素，而:last-child选择符将为每个元素匹配最后一个子元素。例如，$('ul li:last-child')选取每个<ul>中最后一个<li>元素 |
| :only-child | 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素父元素中 含有其他元素，则不会被匹配 | 集合元素 | $('ul li:only-child‘)在<ul>中选取是唯一子元素的<li>元素 |
:neth-child()选择器是很常用的子元素过滤选择器，详细功能如下。
（1）:nth-child(even)能选取每个父元素下的索引值是偶数的元素。
（2）:nth-child(odd)能选取每个父元素下的索引值是奇数的元素。
（3）:nth-child(2)能选取每个父元素下的索引值等于2的元素。
（4）:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素，n从0开始
（5）:nth-child(3n+1)能选取每个元素下的索引值是3n+1的元素，n从 0开始
表单对象属性过滤选择器
表单对象属性过滤选择器主要是对所选择的表单元素进行过滤，如选择被选中的下拉列表框、多选框等。
| 选择器 | 描述 | 返回 | 示例 |
| :enabled | 选取所有可用元素 | 集合元素 | $('#form1 :enabled')选取id为form1的表单内的所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $('#form2 :disabled')选取id为form2的表单内的所有不可用元素 |
| :checked | 选取所有被选中的元素(单选按钮、复选框) | 集合元素 | $('input:checked')选取所有被选中的<input>元素 |
| :selected | 选取所有被选中的选项元素（下拉列表框） | 集合元素 | $('select:selected')选取所有被选中的选项元素 |
jQuery对象与DOM对象
DOM对象和jQuery对象简介
在HTML结构中可以描述为一颗DOM树。
在这颗DOM树中的body结构中的所有子节点都是DOM元素节点。可以通过JavaScript中的getElementsByTagName()或者getElementById()来获取元素节点。像这样得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法，示例方法：
var domObj=document.getElementById("id");//获得DOM元素
var objHTML=domObj.innerHTML;
jquery对象就是通过jQuery包装DOM对象后产生的对象。如果一个对象时jQuery对象，那么就可以使用jQuery中的方法。例如：
$("#foo").html(); 获取id为foo的元素内部的html代码等价于：
document.getElementById("foo").innerHTML;jQuery对象和DOM对象的相互转换
获取对象是jQuery对象，那么在变量前面加上$,例如：
var $(variable)=jQuery对象;如果获取的对象是DOM对象，则定义如下：
var variable=DOM对象;jQuery对象不能使用DOM中的方法，但如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象，有以下几种处理方法。
jQuery提供两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index).
(1)jQuery对象是一个数组对象，可以通过[index]方法得到相应的DOM对象
jQuery代码如下：
var $(cr)=$("#cr"); jQuery对象
var cr=$cr[0];//DOM对象
alert(cr.checked);//检查这个checkbox是否被选中了（2）通过jQuery本身提供的get(index)方法得到相应的DOM对象。
jQuery代码如下：
var $cr=$("#cr"); //jQuery对象
var cr=$cr.get(0); //DOM对象
alert(cr.checked);//检查这个checkebox是否被选中了对于一个DOM对象，只需用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象).
var cr=document.getElementById("cr");//DOM对象
var $cr=$(cr);//jQuery对象转换后，可以任意使用jQuery中的方法。
表单选择器
| 选择器 | 描述 | 返回 |
| :input | 选取所有的<input>、<textarea>、<select>和<button>元素 | 集合元素 |
| :text | 选取所有的单行文本框 | |
| :password | 选取所有的密码框 | |
| :radio | 选取所有的单选按钮 | |
| :checkbox | 选取所有的复选框 | |
| :submit | 选取所有的提交按钮 | |
| :image | 选取所有的图像按钮 | |
| :reset | 选取所有的重置按钮 | |
| :button | 选取所有的按钮 | |
| :file | 选取所有的按钮 | |
| :hidden | 选取所有的上传域 |
2475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
