jQuery(二)、核心
1、#id
根据给定的id匹配一个元素,如果选择器中包含特殊字符,可以用双斜杆(\\) 转义
如:
查找id 为 mydiv[bar] 的元素
html 代码:
<div id="notme"> <p>id="notme"</p> </div> <div id="mydiv[bar]"> id="mydiv[bar]" </div>
jquery 代码:
$("#mydiv\\[bar\\]");
结果:
[ <div id="mydiv[bar]">id="mydiv[bar]"</div> ]
2、element
根据给定元素名匹配所有元素
如:
查找一个 div 元素。
html 代码:
<div>div1</div> <div>div2</div> <span>span</span>
jquery 代码:
$("div");
结果:
[ <div>div1</div>, <div>div2</div> ]
3、 .class
根据类名进行匹配元素,一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到。(多个类 jquery代码为:$(".class1.class2.class3"),且顺序可以为乱序 )
如:
查找所有类是 "myclass" 的元素.
html 代码:
<div class="notme myclass1">div class="notme"</div> <div class="myclass a1 a3">div class="myclass"</div> <span class="myclass a2 a4">span class="myclass"</span>
jquery 代码:
$(".myclass");
结果:
[ <div class="myclass">div class="myclass"</div>, <span class="myclass">span class="myclass"</span> ]
4、*
匹配所有元素,多用于结合上下文来搜索
如:
找到每一个元素
html 代码:
<div>div</div> <span>span</span> <p>p</p>
jquery 代码:
$("*")
结果:
[ <div>div</div>, <span>span</span>, <p>p</p> ]
5、selector1,selector2,selectorn
将每一个选择器匹配到的元素合并后一起返回(你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内)
如:
找到匹配任意一个类的元素。
html 代码:
<div>div</div> <p class="myclass">p class="myclass"</p> <span>span</span> <p class="notmyclass">p class="notmyclass"</p>
jquery 代码:
$("div,span,p.myclass")
结果:
[ <div>div</div>, <p class="myclass">p class="myclass"</p>, <span>span</span> ]
6、ancestor descendant
在给定的祖先元素下匹配 所有(包括子元素的子元素) 的后代元素
参数:ancestor 任何有效选择器;descendant 用以匹配元素的选择器,并且它是第一个选择器的后代元素
如:
找到表单中所有的input 元素
html 代码:
<form> <label>name:</label> <input name="name" /> <fieldset> <label>newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input id="inp1" name="none" />
jquery 代码:
$("#inp1,form *")
结果:
[ <label>name:</label>,<input name="name" />, <fieldset>, <label>newsletter:</label>,<input name="newsletter" />,<input id="inp1" name="none" /> ]
7、parent > child
在给定的父元素下匹配所有的子元素(第一层级子元素,并且自身满足匹配结果,也会返回)
如:
匹配表单中所有当前表单的子元素
html 代码:
<form> <label>name:</label> <input name="name" /> <fieldset> <label>newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input id="inp1" name="none" />
jquery 代码:
$("#inp1,form > input")
结果:
[ <input name="name" />,<input id="inp1" name="none" /> ]
8、prev + next
匹配所有紧跟在 prev 之后的 next 元素
参数:prev 任何选择器;next 一个有效选择器并且紧接着第一个选择器
如:
匹配所有跟在lable后面的input和p元素
html 代码:
<form> <label>name:</label> <input name="name" /> <fieldset> <label>newsletter:</label> <input name="newsletter" /> </fieldset> <label>newsletter2:</label> <p>p:</p> <input name="newsletter2" /> </form> <input id="inp1" name="none" />
jquery 代码:
$("label + input,p")
结果:
[ <input name="name" />,<input name="newsletter" />,<p>p:</p> ]
9、prev ~ siblings
匹配prev元素之后的所有siblings 元素
参数:prev 任何有效选择器; siblings 一个选择器,并且它作为第一个选择器的同级
如:
找到所有与表单下所有label子集同辈的 input元素、p元素
html 代码:
<form> <label>name:</label> <input name="name" /> <fieldset> <label>newsletter:</label> <input name="newsletter" /> </fieldset> <label>newsletter2:</label> <p>p:</p> <input name="newsletter2" /> </form> <input id="inp1" name="none" />
jquery 代码:
$("form label ~ input,p")
结果:
[ <input name="name" />, <input name="newsletter" />, <p>p:</p>,<input name="newsletter2" />,<p>p:</p> ]
10、prev:first
获取prev选择器下的第一个元素
参数:prev 任何有效选择器
如:
获取form下所有label子元素后跟p的第一个p元素
$("form label + p:first")
11、prev:last
获取prev选择器下的最后一个元素
参数:prev 任何有效选择器
如:
获取form下所有label子元素后跟input的最后一个input元素
$("form label + input:last")
12、prev:not(selector1,selector2,selectorn)
去除所有prev选择器下的 给定选择器selector1,selector2,selectorn 的元素(在jquery1.3 之后才支持)
如:
查找所有form元素下所有子元素后跟input元素的input元素,并且input 元素class 属性不包含 .a1.a2
$("form label + input:not(.a2.a1)")
13、prev:even
匹配prev选择器下所有索引值为 偶数 的元素,从 0 开始计数
如:
查找表格的1/3/5...行(即索引值为0,2,4...)
$("table tr:even")
14、prev:odd
匹配prev选择器下所有索引值为 奇数 的元素,从 0 开始计数
如:查找表格的2/4/6...行(即索引值为1,3,5...)
$("table tr:odd")
15、prev:eq(index)
匹配prev选择器下给定index索引值的元素
如:
查找table的第三行
$("table tr:eq(2)")
16、prev:gt(index)
匹配prev选择器下 大于 给定 index 索引值的元素
如:
查找table下第二行以后的行
$("table tr:gt(1)");
17、prev:lt(index)
匹配prev选择器下 小于 给定 index 索引值的元素
如:
查找table下第1行、第二行
$("table tr:lt(2)")
18、prev:header
匹配prev选择器下所有如h1/h2/h3/h4...子类的标题元素
如:
匹配form下所有标题元素
$("form *:header")
19、prev:animated
匹配prev选择器下所有正在执行动画效果的元素
如:
只有对不在执行动画效果的元素执行一个动画特效
$("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20" }, 1000); });
20、:focus
触发每一个匹配元素的focus事件(这将触发所有绑定的focus函数,注意:某些对象不支持focus方法)
如:
当页面加载后将 id 为 'login' 的元素设置焦点:
$("#login:focus");
21、prev:contains(text)
匹配prev选择器下所有 包含 给定文本的元素
如:查找所有包含“a”文本的div元素
$("div:contains('a')")
22、prev:empty
匹配prev选择器下所有 不包含子元素或者文本 的空元素
23、prev:has(selector1,selector2,selectorn)
匹配prev选择器下所有含有selector1||selector||selectorn的元素的元素
如:
匹配所有子元素包含class为 .a1或.a3 的fieldset元素
html 代码:
<fieldset> <label>newsletter:</label> <input name="newsletter" class="a1 a2" /> <h3>h3:</h3> </fieldset> <fieldset> <label class="a3">newsletter:</label> </fieldset>
jquery 代码:
$("fieldset:has(.a1,.a3)")
结果:
[ <fieldset> <label>newsletter:</label> <input name="newsletter" class="a1 a2" /> <h3>h3:</h3> </fieldset>, <fieldset> <label class="a3">newsletter:</label> </fieldset> ]
24、prev:parent
匹配prev选择器下所有包含子元素或文本的元素(存在子元素或文本的元素)
25、prev:hidden
匹配prev选择器下所有不可见元素(display:none),或者type为hidden的元素(<input type='hidden' />)
26、prev:visible
匹配prev选择器下所有可见元素
27、prev[attribute]
匹配prev选择器下所有包含给定属性的元素。注意,在jquery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可。
28、prev[attribute = 'value']
匹配prev选择器下所有包含给定的属性是某个特定值的元素
29、prev[attribute! = 'value']
匹配prev选择器下所有不包含给定属性,或者属性不等于特定值的元素 ( 此选择器等价于:not([attr=value]);要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]) )
30、prev[attribute ^= 'value']
匹配prev选择器下给定的属性是以某些值开始的元素
如:
匹配所有id以mydiv 开头的div
$("div[id ^= 'mydiv']")
31、prev[attribute $= 'value']
匹配prev选择器下给定的属性是以某些值结束的元素
如:
匹配所有id以mydiv 结束的div
$("div[id $= 'mydiv']")
32、prev[attribute *= 'value']
匹配prev选择器下给定属性是包含某些值的元素
如:
匹配所有id包含div 的div
$("div[id *= 'div']")
33、[selector1][selector2][selectorn]
复核属性选择器,需要同时满足多个条件时使用。
如:
$("input[id][name$='man']")
34、prev:nth-child(index)
匹配prev选择器下所有元素的子元素的第n个子或奇偶元素
':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从 1 开始的,而:eq()是从0算起的!可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
参数:index 要匹配元素的序号,从1开始
如:
在每个 ul 查找第 2 个li
html 代码:
<ul> <li>john</li> <li>karl</li> <li>brandon</li> </ul> <ul> <li>glen</li> <li>tane</li> <li>ralph</li> </ul>
jquery 代码:
$("ul li:nth-child(2)")
结果:
[ <li>karl</li>, <li>tane</li> ]
35、prev:first-child
匹配prev选择器下的所有元素的第一个子元素
36、prev:last-child
匹配prev选择器下的所有元素的最后一个子元素
37、prev:only-child
匹配prev选择器下中某个只有唯一一个子元素的元素。如果含有其他元素,将不会被匹配
38、prev:input
匹配prev选择器下所有的input、textarea、select和button元素
39、prev:text
匹配prev选择器下所有 单行文本框<input type='text' />
40、prev:password
匹配prev选择器下所有 密码框<input type='password' />
41、prev:radio
匹配prev选择器下所有 单选按钮<input type='radio' />
42、prev:checkbox
匹配prev选择器下所有 复选按钮<input type='checkbox' />
43、prev:submit
匹配prev选择器下所有 提交按钮<input type='submit' />
44、prev:image
匹配prev选择器下所有 图片域<input type='image' />
45、prev:reset
匹配prev选择器下所有 重置按钮<input type='reset' />
46、prev:button
匹配prev选择器下所有 按钮<input type='buttton' />、<button></button>
47、prev:file
匹配prev选择器下所有 文件域<input type='file' />
48、prev:enabled
匹配prev选择器下所有 可用元素(disabled)
49、prev:disabled
匹配prev选择器下所有 不可用元素
50、prev:checked
匹配prev选择器下所有选择的被选中元素(复选框、单选框等,不包括 select中的option)
51、prev:selected
匹配prev选择器下所有选中的option元素