jQuery知识总结
1. jQuery对象和DOM对象区别：
-
DOM对象：
包括Document对象(整个文档)、Element对象（元素）、Attribute对象（属性）、Event对象（事件），平时最常用到的就是Element对象。
-
jQuery对象：
通过jQuery包装DOM对象后产生的对象（应该是封装了一个DOM对象数组，并且添加了很多jQuery方法可以使用），jQuery对象是jQuery独有的，其可以使用jQuery里的方法；
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同时DOM对象也不能使用jQuery里的方法。</br>如，正确写法：DOM：document.getElementById("test").innerHTML、jQuery：$("#test").html()，错误写法：$("#test").innerHTML、document.getElementById("test").html()，因为document.getElementById("id")得到的是DOM对象，这里是test元素，而$("#test")得到的是jQuery对象。
-
DOM对象与jQuery对象互相转换：
jQuery对象转成DOM对象：
由于jQuery对象本身包含一个特殊的DOM对象数组。所以如果jQuery对象要转换为DOM对象则必须取出其中的某一项：使用[index]或.get(index); （后边有写到）
如$("#test")得到包含一个test元素的jQuery对象，$("#test")[0]或$("#test").get(0)得到该DOM对象test元素。
如$(".test")得到包含多个DOM元素的jQuery对象，$(".test").eq(1)得到只包含第二个DOM元素的jQuery对象，$(".test")[1]或$(".test").get(1)得到第二个DOM对象。
2. 核心语法：
-
jQuery([selector,[context]])：
这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素，其中selector选择器字符串，context为待查找的 DOM 元素集、文档或 jQuery 对象。默认情况下, 如果没有指定context参数，将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。
-
jQuery(html,[ownerDocument])：
根据提供的原始 HTML 标记字符串（参数html），动态创建由 jQuery 对象包装的 DOM 元素，参数ownerDocument为创建DOM元素所在的文档。
-
jQuery(callback)：
$(document).ready(callback)的简写，即绑定一个在DOM文档载入完成后执行的函数callback。例：$(function(){...})。
-
.each(callback):
遍历每一个匹配的元素，以每一个匹配的元素作为上下文来执行一个函数callback。每次执行传递进来的函数时，函数中的this关键字都指向当前遍历到的元素，而且，在每次执行函数时，都会给函数传递一个该元素在匹配的元素集合中索引作为参数（从零开始）。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。</br>例，$("img").each(function(i){ this.src = "test" + i + ".jpg";//其中this指向当次被遍历到的img，i为该元素在所有匹配到的元素中的索引 });。
-
size()：
jQuery 对象中元素的个数。即当前匹配的元素个数。与 length 将返回相同的值。例$("img").size();返回img元素的个数。
-
selector属性:
返回传给jQuery()的原始选择器。例，$("div#foo ul:not([class])").selector返回值为"div#foo ul:not([class])"。
-
get([index])：
取得第index个匹配的元素，返回的是DOM对象，类似的有eq(index),不过eq(index)返回的是jQuery对象。
-
data([key],[value])：
在元素上存放或读取数据,返回该jQuery对象。当参数只有一个key的时候，读取该jQuery对象对应DOM中存储的key对应的值，当参数为两个时，向该jQuery对象对应的DOM中存储key-value键值对的数据.例：<div data-test="this is test" ></div>，$("div").data("test")获取data-test的值"this is test"。
-
jQuery.fn.extend(obj):
扩展 jQuery 元素集来提供新的方法，即所有jQuery对象可扩展得到obj属性或方法，如jQuery.fn.extend({cry:function(){...}}),调用：$("input[type=checkbox]").cry()。
-
jQuery.extend(obj)：
扩展jQuery对象本身，如jQuery.extend({cry:function(){...},smile:function(){...}})可为jQuery对象本身扩展cry和smile方法，调用：jQuery.cry();jQuery.smile()。
-
jQuery.noConflict([extreme])：
将变量$的控制权让渡给第一个实现它的那个库。
3.选择器：
多个选择器之间不加空格,只有在后代选择器中有空格，如$(":radio.important:checked")获取所有类名为important的选中的radio
选择器分为如下种类：
-
基本选择器：
CSS选择器：
| 选择器 | 语法 | 说明 |
|---|---|---|
| 元素选择器element | $("tagName") | 根据给定的元素标签名匹配所有元素，例如：$("p")，选取所有 <p> 元素； |
| id选择器#id | $("#id") | 根据给定的ID匹配一个元素， 例如：$("#lastname") 选取id="lastname" 的元素 |
| 类名选择器.class | $(".className") | 根据给定的css类名匹配元素， 例如：$(".intro") 选取所有 class="intro" 的元素 |
| 通用选择器* | $("*") | 匹配所有元素，多用于结合上下文来搜索 |
| 群组选择器, | $("selector1,selector2,selectorN") | 适配满足任意一个选择器的元素，或者说是将各个选择器匹配的元素合并，如$("h1,h2,h3")适配所有h1、h2、h3标签的元素 |
层级选择器：
| 选择器 | 语法 | 说明 |
|---|---|---|
| 后代选择器 | $("selector1 selector2") | 从selector1选择器所适配元素（祖先）的所有后代元素中适配selector2选择器，可以理解为从$("selector1")的后代元素中查找适配$("selector2")的元素 |
| 子元素选择器 | $("selector1>selector2") | 从selector1选择器所适配元素（父元素）的所有子元素中适配selector2选择器，可以理解为从$("selector1")的子元素中查找适配$("selector2")的元素 |
| 紧邻兄弟选择器 | $("prev+next") | 匹配紧接在 prev 元素后的 第一个兄弟元素 ，例：$("#test+div") 匹配紧随test后的第一个div |
| 相邻兄弟选择器 | $("prev~sibling") | 匹配所有 prev 元素后的所有兄弟元素，例：$("#test~div")匹配test后的所有test的兄弟元素 |
表单域选择器：
| 选择器 | 语法 | 说明 |
|---|---|---|
| :input | $(":input") | 匹配所有 input, textarea, select 和 button 元素 |
| :text | $(":text") | 匹配所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 匹配所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 匹配所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 匹配所有 type="checkbox" 的 <input> 元素 |
| :button | $(":button") | 匹配所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 匹配所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 匹配所有 type="file" 的 <input> 元素 |
| :hidden | $(":hidden") | 匹配所有 type="hidden" 的 <input> 元素 |
| :submit | $(":submit") | 匹配所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 匹配所有 type="reset" 的 <input> 元素 |
-
过滤选择器：
简单过滤选择器：
| 选择器 | 语法 | 说明 |
|---|---|---|
| :first | $("selector:first") | 获取第一个匹配元素 |
| :last | $("selector:last") | 获取最后一个匹配元素 |
| :even | $("selector:even") | 获取所有匹配元素中索引为偶数(从0开始计数)的元素 |
| :odd | $("selector:even") | 获取所有匹配元素中索引为奇数(从0开始计数)的元素 |
| :eq(index) | $("selector:eq(i)") | 获取匹配的第i个(从0开始计数)元素，例：$("ul li:eq(3)")列表中的第四个元素（index 从 0 开始）(注：eq是equal的缩写) |
| :gt(index) | $("selector:gt(i)") | 获取匹配元素中所有大于给定索引i(从0开始计数)的元素，例：$("ul li:gt(3)")列表中的从第四个元素开始的所有元素（index 从 0 开始）(注：gt是greater than的缩写) |
| :lt(index) | $("selector:lt(i)") | 获取匹配元素中所有小于给定索引i(从0开始计数)的元素，例：$("ul li:gt(3)")列表中的所有索引小于3的元素，即前三个元素（index 从 0 开始）(注：lt是less than的缩写) |
| :not(selector) | $("selector1:not(selector2) ") | 从匹配selector1的元素中过滤并去除所有匹配selector2的元素，例：$(":radio:not(checked)") 所有未被选中的radio元素 |
| :header | $(":header") | 匹配所有标题元素(h1、h2、h3、h4...) |
内容过滤选择器：
| 选择器 | 语法 | 说明 |
|---|---|---|
| :contains(text) | $(":contains('text')") | 匹配含有指定文本text的元素 |
| :has(selector) | $(":has(selector)") | 匹配后代元素中含有选择器selector所匹配的元素的元素，例$("div:has(p)")匹配后代元素包含p的所有div |
| :empty | $(":empty") | 匹配所有不包含子元素且不包含文本的所有空元素 |
| :parent | $(":parent") | 匹配所有包含子元素或者文本的所有元素，与:empty相反 |
属性过滤选择器:
| 选择器 | 语法 | 说明 |
|---|---|---|
| [attribute] | $("[attribute]") |
$("[href]")选取所有带有 href 属性的元素 |
| [attribute=value] | $("[attribute=value]") |
$("[href='#']")选取所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[attribute!=value]") |
$("[href!='#']")选取所有 href 属性的值不等于 "#" 的元素 |
| [attribute*=value] | $("[attribute*=value]") |
$("[href*='#']")选取所有 href 属性的值包含 "#" 的元素 |
| [attribute^=value] | $("[attribute^=value]") |
$("[href$='hi']")选取所有 href 属性的值包含以 "hi" 开头的元素 |
| [attribute$=value] | $("[attribute$=value]") |
$("[href$='.jpg']")选取所有 href 属性的值包含以 ".jpg" 结尾的元素 |
子元素过滤选择器：
| 选择器 | 语法 | 说明 |
|---|---|---|
| :first-child | $("selector:first-child") | 匹配（选择器selector匹配的每一个元素）的第一个子元素。注意和:first的区别，:first获取的是selector选中的元素中第一个，而:first-child获取的是selector选中的元素中的每一个的第一个子元素，是多个 |
| :last-child | $("selector:first-child") | 匹配（选择器selector匹配的每一个元素）的最后一个子元素。注意和:last的区别 |
| :nth-child(index) | $("selector:nth-child(i)") | 匹配（选择器selector匹配的每一个元素）的第i个子元素。注意和:eq(index)的区别 |
| :only-child | $("selector:only-child") | 如果某个元素是父元素中唯一的子元素，那将会被匹配（即匹配所有作为唯一子元素的元素） |
表单域属性过滤选择器：
| 选择器 | 语法 | 说明 |
|---|---|---|
| :enabled | $(":enabled") | 匹配所有可用元素 |
| :disabled | $(":disabled") | 匹配所有不可用元素 |
| :checked | $(":checked") | 匹配所有被选中的元素（单选框、复选框中使用） |
| :selected | $(":selected") | 匹配所有被选中的option元素（下拉框中使用） |
可见性过滤选择器：
| 选择器 | 语法 | 说明 |
|---|---|---|
| :hidden | $(":hidden") | 匹配所有可见元素 |
| :visible | $(":visible") | 匹配所有不可见元素 |
4.属性操作：
| 操作 | 说明 |
|---|---|
| attr(attrName) | 返回被选元素属性attrName的值.例，$("#img1").attr("src");返回img1的src属性: |
| attr(key,value/obj) | 设置被选元素属性值 例，$("#img1").attr("src","www.baidu.com");或$("#img1").attr({src:"www.baicu.com",style:"color:red"});
|
| removeAttr(attrName) | 删除被选元素属性的attrName属性.例，$("#img1").removeAttr("src");删除img1的src属性 |
| addClass(className) | 为每个匹配的元素添加指定的类名。 |
| removeClass(className) | 为每个匹配的元素删除指定的类名。 |
| toggleClass(className) | 为每个匹配的元素切换指定的类名，如果存在就删除，如果不存在就添加 |
| html([val/fn]) | 获取或设置匹配元素的html内容，即innerHTML的值，参数为空即为获取，不为空即为设置 |
| text([val/fn]) | 获取或设置匹配元素的文本内容，参数为空即为获取，不为空即为设置 |
| val([val/fn]) | 获取或设置匹配元素的值，参数为空即为获取，不为空即为设置 |
5.文档处理：
| 操作 | 说明 |
|---|---|
| append(content/fn) | 向每个匹配的元素 【内部】 结尾追加内容content，其中content可以是字符串/DOM对象/jQuery对象和DOM对象区别；例$("#testdiv").append("<p>Hello</p>");在testdiv内部结尾追加<p>Hello</p>.例$("#testdiv").append(document.createElement(p));在testdiv内部追加p节点 |
| appendTo(content) | 把所有匹配的元素追加到另一个指定的元素元素集合content 【内部】 中，与append的操作相反.例：$("<p>Hello</p>").appendTo($("#testdiv"))，把<p>Hello</p>追加到testdiv内部 |
| prepend(content) | 向每个匹配的元素 【内部】 开头前置内容 |
| prependTo(content) | 把所有匹配的元素前置到另一个、指定的元素元素集合 【内部】 中，与prepend相反 |
| after(content/fn) | 在每个匹配的元素 【之后】 插入内容 |
| before(content/fn) | 在每个匹配的元素 【之前】 插入内容。 |
| insertAfter(content) | 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。与after相反 |
| insertBefore(content) | 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。与before相反 |
| replaceWith(content/fn) | 将所有匹配的元素替换成指定的HTML/DOM元素对象/jQuery对象content。例，$("p").replaceWith("<b>Paragraph. </b>");把所有p替换为b |
| replaceAll(selector) | 用匹配的元素替换掉所有selector匹配到的元素，与replaceWith相反。例，$("<b>Paragraph. </b>").replaceAll("p");用b替换所有p |
| empty() | 删除匹配的元素集合中所有的子节点。 |
| remove([expr]) | 从DOM中删除所有与expr匹配的元素。 |
| clone([Even[,deepEven]]) | 克隆匹配的元素并且返回这些克隆的副本 |
6.筛选：
-
简单筛选：
| 操作 | 说明 |
|---|---|
| eq(index/-index) | 获取当前链式操作中第N个jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个。类似:eq(index)选择器 |
| first() | 获取第一个元素。类似:first选择器 |
| last() | 获取最后一个元素。类似:last选择器 |
| filter(expr/obj/ele/fn) | 筛选出与指定表达式匹配的元素集合 |
| has() | 筛选出包含特定【后代】的元素。类似:has(selector)选择器 |
| not() | 从匹配元素的集合排除与指定表达式匹配的元素。类似:not(selector)选择器 |
| slice(start, [end]) | 选取一个匹配的子集，即从匹配元素中筛选出第start个到第end个元素 |
| hasClass(class) | 检查当前的元素是否含有某个特定的类，如果有，则返回true。 |
| is(expr/obj/ele/fn) | 检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。 |
-
层级筛选：
| 操作 | 说明 |
|---|---|
| children([expr]) | 取得元素的元素集合中每一个元素的所有 【子元素】 的元素集合。可以通过可选的表达式expr来过滤所匹配的子元素 |
| find(expr\obj\ele) | 从所选元素后代元素中筛选满足特定表达式的 【后代元素】 ，find是筛选后代元素，children只是筛选子元素 |
| parent([expr]) | 取得包含所有匹配元素的每一个元素的 【父元素】 的元素集合。并且可以通过可选的表达式expr来过滤 |
| parents([expr]) | 取得包含所有匹配元素的每一个元素的 【祖先元素】 的元素集合。并且可以通过可选的表达式expr来过滤 |
| parentsUntil([expr]) | 查找当前元素的所有的 【祖先元素】 ，直到遇到匹配的那个元素为止，返回这之前的 【所有祖先元素】 |
| closest(expr\object) | 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。与parentsUntil的区别在于从元素本身开始，包括自己，只返回该 【匹配的元素】 |
| next([expr]) | 取得匹配的元素集合中每一个元素 【紧邻的后面同辈元素】 的元素集合 |
| nextAll([expr]) | 查找当前元素之后所有的 【同辈元素】 。不需紧邻 |
| nextUntil([expr]) | 查找当前元素之后所有的 【同辈元素】 ，直到遇到匹配的那个元素为止。 |
| prev([expr]) | 取得匹配的元素集合中每一个元素 【紧邻的前面同辈元素】 的元素集合。 |
| prevAll([expr]) | 查找当前元素之前所有的 【同辈元素】 。不需紧邻 |
| prevUntil([expr]) | 查找当前元素之前所有的 【同辈元素】 ，直到遇到匹配的那个元素为止。 |
| siblings([expr]) | 查找当前元素所有的 【同辈元素】 。包括前边和后边的 |
7.事件：
分为触发事件和绑定事件，如触发：$("button#demo").click()，绑定：$("button#demo").click(function(){$("img").hide()})
-
常用事件：
| 操作 | 说明 |
|---|---|
| click([[data],fn]) | 触发每一个匹配元素的click事件。 |
| ready(fn) | 文档加载完成时执行。$(function($){...})或$(document).ready(function(){...})
|
| on(events,[data],fn) | 在选择元素上绑定一个或多个事件 |
| off(events,[fn]) | 移除用.on()绑定的事件处理程序 |
| one(type,[data],fn) | 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。 |
| 为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。jQuery3.0中已弃用，使用on()代替 | |
| bind()的反向操作，从每一个匹配的元素中删除绑定的事件。已弃用，用off()代替 | |
| trigger(type,[data]) | 触发匹配元素的某事件 |
| triggerHandler(type, [data]) | 触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。 |
| 给所有匹配的元素附加一个事件处理函数，即使这个元素是未来添加进来的也有效。已弃用，使用on()代替 | |
| 从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)已弃用，用off()代替 | |
| focus([[data],fn]) | 当元素获得焦点时，触发 focus 事件。 |
| blur([[data],fn]) | 当元素失去焦点时触发 blur 事件。 |
| change([[data],fn]) | 当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素 |
| keydown/keyup([[data],fn]) | 当键盘或按钮被按下/抬起时发生 |
| select([[data],fn]) | 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。 |
| submit([[data],fn]) | 当提交表单时，会发生 submit 事件。只适用于表单元素 |
8.效果：
- show([speed,[easing],[fn]])： 显示隐藏的匹配元素。
- hide([speed,[easing],[fn]])： 隐藏显示的匹配元素
9.工具：
- jQuery.each(obj,[callback])：通用例遍方法，可用于例遍对象和数组obj。不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
- jQuery.extend(target,obj1,[objN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象。如果不指定target，则给jQuery命名空间本身进行扩展
10.事件对象：
| 属性/方法 | 说明 |
|---|---|
| event.data | 事件执行时绑定的数据 |
| event.preventDefault() | 阻止默认事件行为的触发 |
| event.result | 包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined 。 |
| event.target | 最初触发事件的DOM元素 |
