jQuery选择器的优化选择

jQuery选择器的优化选择

1.1 属性选择器

var $div=$("[id]"); 选中拥有该属性的元素

 

var $div=$("[id=div]");  选中该属性值为div的元素

 

var $div=$("[id!=div]"); 选中该属性值不为div的元素  （html body 等节点也会被选中）

 

var $div=$("[id^=div]"); 选中该属性值以div开头的元素

 

var $div=$("[id$=div]"); 选中该属性值以div结尾的元素

 

var $div=$("[id*=div]");选中该属性值中含有div的元素

 

2.1 过滤选择器

:first 选取第一个元素

var $div=$("#div:first")     / $("#div div:first")

:last 选取最后一个元素

var $div=$("#div":last)     /$("#div div:last")

:not(selector)除去所有与给定选择器匹配的元素

var $div=$("#div div:not(div)")

:even选取索引是从偶数的所有元素（从0开始）

var $div=$("#div div:even")

:odd选取索引是从奇数的所有元素（从0开始）

var $div=$("#div div:odd")

:eq(index)选取索引是从index的元素（从0开始）

var $div=$("#div div:eq(6)") 如果标签中有嵌套其他div标签，则这些标签也会被计算

:gt(index)选取索引大于index的元素（从0开始）

var $div=$("#div div:gt(6)") 如上

:lt(index)选取索引小雨index的元素（从0开始）
var $div=$("#div div:lt(6)")如上

:header选取所有的标题元素  (h1~h6)

var $div=$("#div *:header")

:focus选取当前获取焦点的元素

var $div=$("input:focus")

 

2.2子元素选择器

:nth-child(index)选取每个父级元素下的下标为index的元素（index从1计算）

:nth-child(even)选取每个父级元素下的索引是偶数的元素

:nth-child(odd)选取每个父级元素下的索引是奇数的元素

:nth-child(xn)选取每隔父级元素下的索引是x的n倍数的元素 

如:nth-child(3n)   n从1开始计算

:nth-child(3n+1)  n从0开始计算

 

2.3 内容选择器

:contents(text)选取文本中包含text的元素

 

:empty选取不包含子元素或文本的空元素

 

:has(selector)选取包含有选择器匹配的元素

 

:parent选取包含子元素或文本的元素

 

2.4 可见性选择器

:hidden 选取所有不可见的元素。

<input type="hidden">\<div style="display:hidden">\<div style="visibility:hidden">  

("input:hidden")表示所有隐藏的input元素

:visible选取所有可见的元素

 

2.5 表单选择器

:input 选取表单中所有的<input> <textarea> <button>元素

:text 选取表单中所有的单行文本框

:password 选取表单中所有的密码框

:radio 选取表单中所有的单选框

:checkbox 选取表单中所有的复选框

:submit 选取表单中所有的提交按钮

:image 选取表单中所有的图片按钮

:reset 选取表单中所有的重置按钮

:button 选取表单中所有的按钮

:file 选取表单中所有的上传域

:hidden 选取表单中的不可见元素

(type值为hidden的元素)