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元素 |