元素中的最后一个div元素
//改变最后一个div元素的背景色
$("div:last").css("background","#bbffaa");
:not
$("input:not('.myclass')") :选取class不是myclass的input元素
//改变class不为one的div元素的背景色
$("div:not('.one')").css("background","#bbffaa");
:even
$("input:even"):选取索引是偶数的input元素,索引从0开始
//改变索引值为偶数的div元素的背景色
$("div:even").css("background","#bbffaa");
:odd
$("input:odd"):选取索引是奇数的input元素,索引从0开始
//改变索引值为奇数的div元素的背景色
$("div:odd").css("background","#bbffaa");
:eq
$("input:eq(1)"):选取索引为1的input元素
:gt
$("input:gt(1)"):选取索引大于1的input元素
//改变索引值大于3的div元素的背景色
$("div:gt(3)").css("background","#bbffaa");
:lt
$("input:lt(1)"):选取索引小于1的input元素
//改变索引值小于3的div元素的背景色
$("div:lt(3)").css("background","#bbffaa");
:header
$(":header"):选取网页中所有的标题元素
、
等
//改变标题元素的背景色
$(":header").css("background","#bbffaa");
:animated
$("div:animated"):选取正在执行动画的div元素
//改变正在执行动画的元素的背景色
$(":animated").css("background","#bbffaa");
2). 内容过滤选择器:
:contains(text)
$("div:contains('我')"): 选取含有文本‘我’的div元素
//改变含有文本'di'的div元素的背景色
$("div:contains('di')").css("background","#bbffaa");
:empty 选取不包含子元素或文本的空元素
//改变不含子元素(包括文本元素)的div元素的背景色
$("div:empty").css("background","#bbffaa");
:has(selector) 选取含有selector所匹配的元素的元素
//改变含有class为mini元素的div元素的背景色
$("div:has('.mini')").css("background","#bbffaa");
:parent 选取含有子元素或文本的元素
//改变含有子元素(包括文本元素)的div元素的背景色
$("div:parent").css("background","#bbffaa");
3). 可见性过滤选择器
:hidden 选取所有不可见性元素(像display:none,type="hidden",visible:hidden等)
//改变所有不可见的div元素的背景色,且3s后完全显示
$("div:hidden").css("background","#bbffaa").show(3000);
:visible 选取所有可见性元素
//改变所有可见的div元素的背景色
$("div:visible").css("background","#bbffaa");
4). 属性过滤选择器 (通过属性获取元素)
[attribute] 选取拥有此属性的元素
//改变有title属性的div元素的背景色
$("div[title]").css("background","#bbffaa");
[attribute=value] 选取属性值为value的元素
//改变title=test的div元素的背景色
$("div[title=test]").css("background","#bbffaa");
[attribute!=value] 选取属性值不等于value的元素
//改变title!=test的div元素的背景色,包含没有title属性的div元素
$("div[title!=test]").css("background","#bbffaa");
[attribute^=value] 选取属性值以value开头的元素
//改变title以te开头的div元素的背景色
$("div[title^=te]").css("background","#bbffaa");
[attribute$=value] 选取属性值以value结尾的元素
//改变title以sst结尾的div元素的背景色
$("div[title$=sst]").css("background","#bbffaa");
[attribute*=value] 选取属性值含有value的元素
//改变title属性值中含有ss的div元素的背景色
$("div[title*=ss]").css("background","#bbffaa");
[selector1][selector2][selector3]
//改变含有id属性,切title属性值中含有es的div元素的背景色
$("div[id][title*=es]").css("background","#bbffaa");
5). 子元素过滤选择器
:nth-child(index/even/odd/eq) 选取每个父元素下的第index子元素或奇偶元素,
index从1开始
//改变每个class为one的div中,第二个子元素的背景色
$("div.one :nth-child(2)").css("background","#bbffaa");
:first-child 选取每个父元素的第一个子元素
//改变每个class为one的div中,第一个子元素的背景色
$("div.one :first-child").css("background","#bbffaa");
//改变每个class为one的div中,第一个子元素的背景色
$("div.one :first-child").css("background","#bbffaa");
:last-child 选取每个父元素的最后一个子元素
:only-child 若某个元素是其父元素中的唯一子元素,则匹配
//改变每个class为one的div中,只有一个子元素的背景色
$("div.one :only-child").css("background","#bbffaa");
6). 表单对象属性过滤器
:enabled 选取所有可用的元素
:disenabled 选取所有不可用的元素
:checked 选取所有被选中的元素(单选、复选框)
$("input:checked").length;
:selected 选取下拉框中被选中的选项元素
$("select:selected").text();