本文详细介绍了jQuery的基础知识点，包括jQuery简介、jQuery对象、DOM对象与jQuery对象的转换、丰富的选择器系统（如基本选择器、层级选择器、过滤选择器等）、DOM操作（如查找、创建、插入、删除、克隆和包裹节点）以及事件处理（如事件绑定、事件冒泡和事件对象属性）。此外，还涵盖了jQuery中动画效果的使用，如元素的隐藏和显示。
jQuery基础知识点
文章目录
1. jQuery简介
为了简化JavaScript开发而产生的JS库，JS库封装了很多预定义的对象和使用函数，可以帮助开发者建立有高难度交互的Web2.0 特性的富客户端页面，并且兼容各大浏览器。
- 理念：写得少，做得多（write less，do more）。
2. jQuery对象
通过
jQuery（$()）包装DOM对象后产生的对象。jQuery对象是jQuery所独有的，它无法使用DOM对象的任何方法，同样，DOM对象也无法使用jQuery里的任何方法。
-
约定：如果获取的是jQuery对象，那么要在变量前面加上
$如：
var $variable = jQuery对象；
var variable = DOM对象；
3. jQuery对象与DOM对象的相互转换
jQuery对象是一个数组对象。
-
jQuery对象—>DOM对象：
- 通过数组下标得到对应DOM对象
如：var $cr = $("#cr");
var cr = $cr[0]; - 通过jQuery里的get（index）方法得到相应的DOM对象
如：var $cr = $("#cr");
var cr = $cr.get(0);
- 通过数组下标得到对应DOM对象
-
DOM对象—>jQuery对象：
-
将DOM对象使用$()包装起来即可
如：
var cr = document.getElementById（"cr"）;
var $cr = $(cr);
-
4. jQuery选择器
选择器是jQuery的根基，在jQuery中，对事件的处理、遍历DOM和Ajax操作都依赖于选择器。
优点： 1）：简洁的写法
2）：完善的事件处理机制：使用jQuery获取网页中的元素即使不存在也不会报错。
4.1 基本选择器：
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id，class和标签名来查找DOM元素（在网页中id只能使用一次，class允许重复使用）。
| 选择器 | 描述 | 返回 |
|---|---|---|
| #id | 根据给定的id匹配一个元素 | 单个元素组成的集合 |
| .class | 根据给定的类名匹配元素 | 集合元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 |
| * | 匹配所有元素 | 集合元素 |
| selector1，selector2，… ,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 |
**用法：**使用$("")包装住选择器即可选择相应元素，如：$("input")即会选择所有名为input的元素。
**注：**可以用基本选择器合并成一个复合基本选择器，满足多个条件，每选择一次，缩小一次范围。
如：$("div.one")将选取每个class为one的div元素，同理，其他的选择器也可以如此复合。
4.2 层级选择器：
如果想通过DOM元素之间的层次关系来获取特点元素，例如：后代元素、子元素、相邻元素、兄弟元素等，则需要使用层级选择器。
| 选择器 | 描述 | 返回 |
|---|---|---|
| ancestor descendant | 选取ancestor下的所有名为descendant的后代元素 | 集合元素 |
| parent > child | 选取parent下的所有名为child的子元素（不包括子元素的后代元素） | 集合元素 |
| prev + next | 选取紧接在prev元素后的名为next的元素 | 集合元素 |
| prev ~ siblings | 选取prev元素后的所有名为siblings的兄弟元素 | 集合元素 |
注意：
- 其中的ancestor、parent以及prev并不一定是单个元素，也可以是多个元素，即可以是基本选择器中的任何一个（不包括选择器集合）。
$("prev + next")选择器要求“prev”元素与名为next的元素相邻，若不相邻该选择器失效。$("prev ~ div")选择器只能选择“prev”元素后的兄弟元素，而jQuery中的方法siblings()与前后位置无关，只要是兄弟元素都可以选取。
4.3 过滤选择器：
主要是通过特定的过滤规则来筛选出所需的DOM元素，该选择器基本都以:开头。
**注：**相同的过滤选择器支持组合使用，不同的过滤选择器同样也支持组合使用，即可以
（:基本过选择器:内容过滤选择器:可见性选择器：...），如：$("div:visible:last")即会选择所有可见的div元素中的最后一个。
-
基本过滤选择器：
选择器 描述 返回 :first 选取第一个元素 单个元素组成的集合 :last 选取最后一个元素 单个元素组成的集合 :not(selector) 去除所有与给定选择器匹配的元素 集合元素 :even 选取索引是偶数的所有元素，索引从0开始 集合元素 :odd 选取索引是奇数的所有元素，索引从0开始 集合元素 :eq(index) 选取索引等于index的元素，索引从0开始 单个元素组成的集合 :gt(index) 选取索引大于index的元素，索引从0开始 集合元素 :animated 选取当前正在执行动画的所有元素 集合元素 注意： 基本过滤选择器与别的选择器写法之间不可存在空格，否则会产生问题，因为空格代表选取后代元素。如：
$("div:first")该写法正确，但$("div :first")或者$("div: first")以及别的写法都会产生问题,其他带**:**的过滤选择器同样如此。 -
内容过滤选择器：
选择器 描述 返回 :contains(text) 选取含有文本内容为text的元素 集合元素 :empty 选取不包含子元素或者文本的元素（即元素为空） 集合元素 :parent 选取含有子元素或者文本的元素（即非空元素） 集合元素 :has(selector) 选取含有选择器所匹配的元素的元素 集合元素 注意：
$(":parent")与$(":not(:empty)")两者效果是等价的，都是选择非空元素。 -
可见性过滤器：
选择器 描述 返回 :hidden 选取所有不可见的元素 集合元素 :visible 选取所有可见的元素 集合元素 **注意：**hidden不仅包含样式属性display为none的元素，也包含文本隐藏域（
<input type = "hidden">）和visible:hidden之类的元素。 -
属性过滤选择器：
选择器 描述 返回 [attribute] 选取拥有此属性的元素 集合元素 [attribute = value] 选取指定属性的值为value的元素 集合元素 [attribute != value] 选取指定属性的值不为value的元素 集合元素 [attribute ^= value] 选取指定属性的值以value开始的元素 集合元素 [attribute $= value] 选取指定属性的值以value结束的元素 集合元素 [attribute *= value] 选取指定属性的值含有value元素 集合元素 [selector1][selector2]…[selectorN] 用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围 集合元素 注意：属性过滤选择器前面不带
:，它与其他的选择器进行组合时，也不可加**:**。 -
子元素过滤选择器：
选择器 描述 返回 :nth-child(index/even/odd/equation) 选取每个父元素下第index个子元素或者奇偶元素(index从1开始) 集合元素 :first-child 选取每个父元素的第一个子元素 集合元素 :last-child 选取每个父元素的最后一个子元素 集合元素 :only-child 如果某个元素是它父元素中唯一的子元素，那么将被匹配 集合元素 注意：
- 使用子元素过滤选择器时,必须要在选择器前添加一个空格。如：
$("div.one :only-child）这种写法才可以选取到子元素。 - nth-child()选择器详解：
nth-child(even/odd)：能选取每个父元素下索引值为偶（奇）数的子元素。nth-child(2)：能选取每个父元素下索引值为2的子元素。nth-child(3n+1)：能选取每个父元素下索引值是3n+1的元素（n为自然数）。
-
表单对象属性过滤选择器：
选择器 描述 返回 :enabled 选取所有可用元素 集合元素 :disabled 选取所有不可用元素 集合元素 :checked 选取所有被选中的元素（单选框，复选框） 集合元素 :selected 选取所有被选中的选项元素（下拉列表） 集合元素
- 使用子元素过滤选择器时,必须要在选择器前添加一个空格。如：
4.4 表单选择器：
| 选择器 | 描述 | 返回 |
|---|---|---|
| :input | 选取所有<input>、<textarea>、<select>和<button>元素 | 集合元素 |
| :text | 选取所有的单行文本框 | 集合元素 |
| :password | 选取所有的密码框 | 集合元素 |
| :radio | 选取所有的单选按钮 | 集合元素 |
| :checkbox | 选取所有的复选框 | 集合元素 |
| :submit | 选取所有的提交按钮 | 集合元素 |
| :image | 选取所有的图像域 | 集合元素 |
| :reset | 选取所有的重置按钮 | 集合元素 |
| :button | 选取所有的按钮 | 集合元素 |
| :file | 选取所有的文件域 | 集合元素 |
| :hidden | 选取所有的不可见元素，或者type为hidden的元素 | 集合元素 |
注意： 选取被选中的select的option需要使用选取子节点的方式，如：
$("select[name = 'test'] :selected").each(fuction(){
alert(this.value);
});
5. jQuery对象的几个方法
jQuery 的很多方法支持方法的连缀, 即一个方法的返回值是调用该方法的 jQuery 对象，因此可以继续调用该对象的其他方法.如：show()、hide()、parent()、append()…
-
val()：获取或设置表单元素的value值
val()：获取元素的value值；val(str)：设置元素的value值。
-
attr()：和val（）方法类似
attr(name)：获取name属性值;
attr(name, val)：设置name属性值为val。 -
each()：jQuery中的显式迭代，对jQuery对象进行遍历，其参数为function，函数内部的this是正在遍历的DOM对象。如：$("select :selected").each(fuction(){ alert(this.value); //$(this)是一个jQuery对象 //alert($(this).val()); }); -
text()：和val方法类似
text()：获取元素节点的文本子节点的值；
text(str)：设置元素节点的文本子节点的值。 -
is()：检测匹配元素集合，如果其中至少有一个元素符合给定的表达式就返回true，参数可为选择器、DOM元素或 jQuery 对象。如：$("#content").is(":visible")可以判断元素是否可见。
6. jQuery中DOM操作
6.1 查找节点：
-
查找元素节点：通过jQuery选择器完成
-
操作属性节点：查找到所需的元素后，jQuery对象的
attr（）方法可以获取和设置它的各种属性值。 -
操作文本节点：查找到所需的元素后，jQuery对象的
text（）方法可以获取和设置文本节点的文本值。
6.2 创建节点：
使用jQuery的工厂函数$(),根据传入的html标记字符串创建一个DOM对象，并把这个DOM对象包装成一个jQuery对象返回。
注意：
-
动态创建的新元素节点不会被自动添加到文档中，而是需要使用其它方法将其插入到文档中。
-
当创建单个元素时，需注意闭合标签和使用标准的XHTML格式。如：创建一个
<p>元素，可以使用$("<p />")或者$("<p></P>")，但不能使用$("<p>")或者$("<P>")。 -
创建文本节点就是在创建元素节点时，直接将文本内容写出来；创建属性节点也是在创建元素节点时一起创建。
6.3 插入节点：
将动态创建的html元素插入到文档中，即成为文档中某个节点的子节点。
内部插入：
| 方法 | 描述 |
|---|---|
| append() | 向每个匹配的元素内部结尾处追加子元素 |
| appendTo() | 把所有匹配的元素追加到指定元素的内部结尾处 |
| prepend() | 向每个匹配的元素内部开始处添加子元素 |
| prependTo() | 把所有匹配的元素添加到指定元素的内部开始处 |
外部插入：
| 方法 | 描述 |
|---|---|
| after() | 向每个匹配的元素之后添加新元素 |
| insertAfter() | 把所有匹配的元素插入到指定元素之后 |
| before() | 向每个匹配的元素之前添加新元素 |
| insertBefore() | 把所有匹配的元素插入到指定元素之前 |
**注意：**以上八个方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。
6.4 删除节点：
-
remove()：从DOM中删除所有匹配的元素，参数为筛选元素的jQuery表达式。当某个节点被remove()删除后，它所包括的后代节点都将被同时删除。这个方法的返回值是指向已被删除节点的引用。 -
empty()：清空节点——清空元素中的所有后代节点(不包含属性节点)。
6.5 克隆节点：
-
clone()：克隆匹配的DOM元素，返回值为克隆后的副本，但此时复制的新节点不具有任何行为。 -
clone(true)：复制元素的同时也复制元素包含的事件。
注意： clone节点时需要注意克隆后的节点的id属性，若原节点有id属性，则克隆后会出现有两个id相同的节点的情况。
6.6 替换节点：
-
replaceWith()：将所有匹配的元素都替换为指定的HTML或DOM元素。返回值为被替换的节点的引用。 -
replaceAll()：把指定的HTML或DOM元素都替换为匹配的元素。
**注意：**若在替换之前，已经在元素上绑定了事件，替换后原先绑定的事件会与原先的元素一起消失。如：有节点1与节点2，将节点1替换为节点2则节点1会消失，同时它绑定的所有事件也会消失，但节点2绑定的事件仍然存在。
6.7 包裹节点：
-
wrap()：将指定节点用其他标记包裹起来，该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。 -
wrapAll()：将所有匹配的元素用一个标记来包裹，而wrap()方法是将所有匹配的元素本身单独用一个标记来包裹。 -
wrapInner()：将每一个匹配元素的子内容（包括文本节点）用其它结构化标记包裹起来。
7. jQuery中属性操作
jQuery中有很多方法都是一个函数实现获取和设置。如：attr()、html()、text()、val()、height()、width()、css()等。
-
attr()：获取属性和设置属性。注意： 以下情况应该使用prop()访问元素的属性：
- 只添加属性名称就可以使属性生效的就应该使用
prop()，如checked属性和disable属性; - 只存在true/false的属性（即值为布尔型的属性）应该使用
prop()。
- 只添加属性名称就可以使属性生效的就应该使用
-
removeAttr()：删除指定元素的指定属性。 -
html()：读取和设置某个元素中HTML内容，相当于JS中的innerHTML属性，该方法可用于XHTML，但不能用于XML文档。 -
text()：读取和设置某个元素中的文本内容，该方法既可用于XHTML，也可用于XML文档。 -
val()：读取和设置某个元素中的值，类似于JS中的value属性，对于文本框（<input type = "text">）、下拉列表框(<select>)和单选框(<input type = "radio">)，该方法可返回元素的值（多选框<input type = "checkbox">只能返回第一个值），如果为多选下拉列表框(<select multiple="multiple">)，则返回一个包含所有选择值的数组。注意：
- 为一组 radio 赋值,
val()参数应该使用数组， 使用一个值不起作用。如：$(":radio[name='r']").val(["radio2"]); val()不能直接获取checkbox 被选择的值，因为$(":checkbox:checked")得到的是一个数组. 直接使用val()方法只能获取数组元素的第一个值，可以使用 each 遍历所有值.- 若匹配到的元素唯一时可以直接使用
val()获取它的value属性值，设置value值传入单一参数即可；若匹配到的元素为一个数组，则需要使用each()才能遍历获取每一元素的值，同样在设置value值时参数也需要传入一个数组。
- 为一组 radio 赋值,
8. jQuery中样式操作
-
获取和设置class：class是元素的一个属性，所以可以通过
attr()方法获取和设置class。 -
addClass()：追加样式——为每个匹配的元素添加指定的class。 -
removeClass()：移除样式——从匹配的元素中删除全部或指定的class。 -
toggleClass()：切换样式——控制样式上的重复切换，如果匹配的元素存在指定的class则删除它，如果不存在则添加它。 -
hasClass()：判断是否含有某个样式——判断匹配的元素中是否含有某个class，如果有则返回true，否则返回false。
9. jQuery中CSS—DOM操作
-
css()：获取和设置元素的样式属性。 -
opacity()：获取和设置元素透明度，值在[0,1]之间。 -
height()、width()：获取和设置元素的高度、宽度。在设置值时，若只传递数字，则默认单位是px。若使用其他单位则需传递一个字符串，如：$("p:first").height("2em"); -
offset()：获取元素在当前视窗中的相对位移，其返回值包含了两个属性：top，left。该方法只对可见元素有效。
10. jQuery中的事件
10.1 加载DOM：
在页面加载完成后，浏览器会通过JavaScript为DOM元素添加事件。
| 方法 | window.onload | $(document).ready |
|---|---|---|
| 执行时机 | 必须等待网页中的所有内容加载完毕后（包括图片）才能执行 | 网页中的所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完 |
| 编写个数 | 不能同时编写多个 | 能同时编写多个 |
| 简化写法 | 无 | $() |
10.2 事件绑定：
bind()：对匹配的元素进行特定事件的绑定。如：
$(".head").bind("click", function(){
//使用is()方法,来判断某个给定的 jQuery对象是否符合指定的选择器.
var flag = $(".content").is(":hidden");
if(flag){
//show() 方法: 使隐藏的变为显示
$(".content").show();
}else{
$(".content").hide();
}
});
10.3 合成事件：
-
hover()：模拟光标悬停事件。当光标移到元素上时，会触发指定的第一个函数，当光标移出这个元素时，会触发指定的第二个函数。注：
mouseover()：鼠标移上去触发；mouseout()：鼠标移出触发。 -
toggle()：用于模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数，当再次单击同一个元素时，则触发指定的第二个函数，如果有更多个的函数则依次触发直到最后一个。然后再单击则会循环执行。**注：**toggle()的另一个作用：切换元素的可见状态。
10.4 事件冒泡：
事件会按照DOM层次结构像水泡一样不断向上直至顶端。
**解决:**在事件处理函数中返回false，会对事件停止冒泡，还可以停止元素的默认行为。
10.5 事件对象的属性：
事件对象：当触发事件时，事件对象就被创建了。为事件响应函数添加一个参数，该参数就代表了事件对象，它只有事件响应函数中才能访问到，事件执行完毕后就被销毁。
**event.pageX , event.pageY：**事件对象的两个属性，获取到光标相对于页面的X，Y坐标。
10.6 移除事件：
-
unbind()：移除匹配元素上的所有指定事件，若无参数则移除所有事件。 -
one()：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数，即函数执行完毕后该元素的特定事件就会被移除。
11. jQuery中动画的隐藏和显示
11.1 既改变高度，又改变透明度：
hide()：在HTML文档中，为一个元素调用hide()方法会将该元素的display样式改为none，代码功能同css("display", "none")一样。show()：将元素的display样式改为先前的显示状态。
**注：**这两个方法若不带参数可使元素立即隐藏或者显示，参数为完全隐藏或者显示的时间，单位：ms。而且这两个方法也会同时减少（增大）内容的高度、宽度和不透明度。
11.2 只改变透明度：
-
fadeIn()：在指定的时间内降低元素的透明度，直至元素完全显示。 -
fadeOut()：在指定的时间内降低元素的不透明度，直至元素完全消失。
11.3 只改变高度：
-
slideDown()：如果某一元素隐藏时，调用此方法元素将在指定时间内由上至下延伸显示。 -
slideup()：如果某一元素显示时，调用此方法元素将在指定时间内由下至上缩短隐藏。
11.4 其他方法：
toggle()：切换匹配元素的可见状态。如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见。slideToggle()：通过高度变化来切换匹配元素的可见性。fadeToggle()：通过透明度变化来切换匹配元素的可见性。fadeTo()：把匹配元素的不透明度以渐进的方式调整到指定的值（0~1之间）。
270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
