目录
1. 获取
2. 筛选器
- 获取
id为myId的jQuery对象(id 应该是唯一的,即使有相同时只会选择第一个)
$("#myId")
所有class为myClass的jQuery对象,类似getElementsByClassName
$(".myClass")
所有元素的 jQuery对象
$("*")
所有元素类型为p的jQuery对象,类似getElementsByTagName
$("p")
当前元素的 jQuery对象
$(this)
class为myClass且myClass2
$(".myClass.myClass2")
id为myId的元素的子孙类class为myClass
$("#myId .myClass")
div元素的直接子元素为p
$('div > p')
div元素后的相邻兄弟元素为p
$("div + p")
div元素后的兄弟元素为p
$("div ~ p")
p元素中class为myClass
$("p.myClass")
p元素中id为myId
$("p#myId")
p元素中id为myId的元素的子孙类class为myClass
$("p#myId .myClass")
- 筛选器
基本筛选器
第一个p元素
$("p:first")
最后一个p元素
$("p:last")
所有偶数tr元素
$("tr:even")
所有奇数tr元素
$("tr:odd")
第四个li元素
$("ul li:eq(3)")
index大于3的所有li元素
$("ul li:gt(3)")
index小于3的所有li元素
$("ul li:lt(3)")
内容筛选器
包含指定字符串的所有p元素
$("p:contains('hello world')")
包含span元素的所有div元素
$("div:has(span)")
包含子元素或文本的所有a元素
$("a:parent")
不包含子元素和文本的所有a元素
$("a:empty")
可见性筛选选择器
所有隐藏的p元素
$("p:hidden")
// 以下条件下不可见
display="none"
宽度和高度都为0
type="hidden"的表单元素
祖先元素是隐藏的
// 注意:以下被认为是可见的,因为他们仍然占用空间布局。
visibility="hidden"
opacity="0"
所有可见的p元素
$("p:visible")
属性筛选器
所有带有属性href的元素
$("[href]")
所有带有属性href=#的元素
$("[href='#']")
所有带有属性href!=#的元素
$("[href!='#']")
所有带有属性name包含test字符串的元素
$('div[name*="test"]')
所有带有属性name以test字符串结尾的元素(区分大小写)
$('div[name$=test]')
所有带有属性name以test字符串开头的元素(区分大小写)
$('div[name^=test]')
所有带有属性name用空格分隔且有a字符串的元素
$('div[name~="a"]')
所有拥有所有指定属性的元素
$("[style][id]")
【浏览器兼容】
[att=val]、[att]、[att|=val]、[att~=val] 属于CSS 2.1规范
[ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范
[name!="value"] 属于jQuery 扩展的选择器
无论CSS2.1版本还是CSS3版本,IE7和IE8都支持,webkit、Gecko核心及Opera也都支持,只有IE6以下浏览器才不支持
子元素筛选器
所有p元素下的第一个a元素
$('p a:first-child')
所有p元素下的最后一个a元素
$('p a:last-child')
所有p元素下的只有一个子元素的a元素
$('p a:only-child')
所有p元素下的第一个a元素
$('p a:nth-child(1)')
所有p元素下的倒数第一个a元素
$('p a:nth-last-child(1)')
表单元素筛选器
所有 <input> 元素(所有 input, textarea, select 和 button 元素)
$(":input")
所有 type="text" 的 <input> 元素
$(":text")
所有 type="password" 的 <input> 元素
$(":password")
所有 type="radio" 的 <input> 元素
$(":radio")
所有 type="checkbox" 的 <input> 元素
$(":checkbox")
所有 type="submit" 的 <input> 元素
$(":submit")
所有 type="reset" 的 <input> 元素
$(":reset")
所有 type="button" 的 <input> 元素
$(":button")
所有 type="image" 的 <input> 元素
$(":image")
所有 type="file" 的 <input> 元素
$(":file")
所有不为空的 input 元素
$("input:not(:empty)")
未选中input元素
$("input:not(:checked)")
表单对象属性筛选选择器
所有激活的 input 元素
$(":enabled")
所有禁用的 input 元素
$(":disabled")
所有被选取的 input 元素
$(":selected")
所有被选中的 input 元素
$(":checked")
网友评论