jQuery选择器和常用的api

mac2024-12-03  3

一、常见的选择器:

基本选择器 $('*')匹配页面所有元素$('#id')id选择器$('.class')类选择器$('element')标签选择器 组合层次选择器 $('E,F')多元素选择器,用','分割,同时匹配元素E或元素F$('E F')后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素$(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:lt(n)")所有E中index小于n的元素$(":header")选择h1~h6 元素$("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=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-child')所有E的第一个子节点$('E:last-child')所有E的最后一个子节点$('E:only-child')只有唯一子节点的E的子节点 表单元素选择器 $('E:type')特定类型的input$(':checked')被选中的checkbox或radio$('option: selected')被选中的option

看个图:

 

image.png


二、常用的api

兄弟元素的获取:

.eq(index) 对于一个特定的结果集,我们想获取到指定index的jQuery对象。

.next([selecotr]) 获取匹配的元素集合中,每一个元素紧邻的后面同辈元素的元素集合,如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素

.prev([selector]) 正好相反,获取元素之前的同辈元素

.nextAll([selector]) 获得每个匹配元素集合中每个元素所有后面的同辈元素

.prevAll([selector]) prevAll与之相反,获取元素前面的同辈元素

.siblings([selectors]) 获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器

父子元素的获取:

.parent([selector]) 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器

.parents([selector]) 获得集合中每个匹配元素的祖先元素,可以提供一个可选的选择器作为参数

.children([selector]) 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

.find([selector]) 查找符合选择器的后代元素

筛选当前结果集:

.first() 获取当前结果集中的第一个对象

.last() 获取当前结果集的最后一个对象

.filter(selector) .filter(function(index)) 筛选当前结果集中符合条件的对象,参数可以是一个选择器或者一个函数

.not(selector) .not(function(index)) 从匹配的元素集合中移除指定的元素,和filter相反

.is(selector), is(function(index)), is(dom/jqObj) 判断当前匹配的元素集合中的元素,是否为一个选择器,DOM元素,或者jQuery对象,如果这些元素至少一个匹配给定的参数,那么返回true

.has(selector), .has(dom) 筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

看下边范例:

<div id="header"> <div class="child">1</div> <div class="child">2 ok</div> <div class="child">3 ok</div> <div class="child">4</div> <div class="child">5</div> <p class="text">hello</p> </div>

image.png

 

image.png

 

最新回复(0)