炫意html5
最早CSS3和HTML5移动技术网站之一

jquery常用选择器总结

jquery常用选择器

基本选择器
$(‘*’)匹配页面所有元素
$(‘#id’)id选择器
$(‘.class’)类选择器
$(‘element’)标签选择器
组合/层次选择器
$(‘E,F’)多元素选择器,用”,分隔,同时匹配元素E或元素F
$(‘E F’)后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F
$(E>F)子元素选择器,用”>”分隔,匹配E元素的所有直接子元素
$(‘E+F’)直接相邻选择器,匹配E元素之后相邻同级元素F
$(‘E~F’)普通相邻选择器(弟弟选择器),匹配E元素之后同级元素F(无论直接相邻与否)
$(‘.class1.class2’)匹配类名中既包含class1又包含class2的元素
基本过滤选择器
$(“E:first”)所有E中的第一个
$(“E:last”)所有E中的最后一个
$(“E:not(selector)”)按照selector过滤E
$(“E:even”)所有E中index是偶数
$(“E:odd”)所有E中index是奇数
$(“E:eq(n)”)所有E中index为n的元素
$(“E:gt(n)”)所有E中index大于n的元素
$(“E:ll(n)”)所有E中index小于n的元素
$(“:header”)选择h1~h7 元素
$(“div:animated”)选择正在执行动画效果的元素
内容过滤器
$(‘E:contains(value)’)内容中包含value值的元素
$(‘E:empty’)内容为空的元素
$(‘E:has(F)’)子元素中有F的元素,$(‘div:has(a)’):包含a标签的div
$(‘E: parent’)父元素是E的元素,$(‘td: parent’):父元素是td的元素
可视化选择器
$(‘E:hidden’)所有被隐藏的E
$(‘E:visible’)所有可见的E
属性过滤选择器
$(‘E[attr]’)含有属性attr的E
$(‘E[attr=value]’)属性attr=value的E
$(‘E[attr !=value]’)属性attr!=value的E
$(‘E[attr ^=value]’)属性attr以value开头的E
$(‘E[attr $=value]’)属性attr以value结尾的E
$(‘E[attr =value]’)属性attr包含value的E
$(‘E[attr][attr =value]’)可以连用
子元素过滤器
$(‘E:nth-child(n)’)E的第n个子节点
$(‘E:nth-child(3n+1)’)E的index符合3n+1表达式的子节点
$(‘E:nth-child(even)’)E的index为偶数的子节点
$(‘E:nth-child(odd)’)E的index为奇数的子节点
$(‘E:first-clild’)所有E的第一个子节点
$(‘E:last-clild’)所有E的最后一个子节点
$(‘E:only-clild’)只有唯一子节点的E的子节点
表单元素选择器
$(‘E:type’)特定类型的input
$(‘:checked’)被选中的checkbox或radio
$(‘option: selected’)被选中的option

筛选方法

除了上面的选择器,我们还要了解一点点筛选的方法:

.find(selector) 查找集合每个元素的子节点

Get the descendants(子节点) of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

$('li.item-ii').find('li').css('background-color', 'red');

.filter(selector) 过滤当前集合内元素

Reduce(减少) the set of matched elements to those that match the selector or pass the function’s test.

$('li').filter(':even').css('background-color', 'red');

炫意HTML5 » jquery常用选择器总结

Java基础教程Android基础教程