jQuery标签查找

目录

• 查找标签
  • 基本选择器
  • 属性选择器
  • 基本筛选器
  • 筛选器方法

查找标签

jQuery中的选择器都是基于CSS选择器的。

基本选择器

基本选择器	描述
$('#id')	id选择器
$('.class')	class选择器
$('tagName')	标签选择器

例子	描述
$('div#d1')	选择div标签中id值为d1的
$('div,#d1')	同时选择div标签、id值为d1的
$("div p")	div标签后代中的p标签
$("div > p")	div标签为儿子的p标签

属性选择器

属性选择器	描述
$("[属性]")	选中有这项属性的标签
$("[属性=值]")	选中有这项属性的标签，并且值也要等于
$("[属性!=值]")	选中有这项属性的标签，并且值不等于

例子	描述
$('input[type="text"]')	选中input中type值为text的标签

属性筛选器

属性选择器中有着专门针对form表单内的标签的简化选择方法。

原写法	简化
input标签中的type属性
$('input[type="text"]')	$(':text')
$('input[type="password"]')	$(':password')
...
其他属性
$('[checked="checked"]')	$(':checked')
$('[selected="selected"]')	$(':selected')
...

注意：$(':checked')会同时找到option标签中的属性，而$(':selected')只会找到option标签中的属性。

基本筛选器

基本筛选器	描述
:first	第一个
:last	最后一个
:eq(index)	索引index位置的那个元素
:even	匹配所有索引值为偶数的元素，从 0 开始计数
:odd	匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)	匹配所有大于给定索引值的元素
lt(index)	匹配所有小于给定索引值的元素
:not(元素选择器)	移除所有满足not条件的标签
:has(元素选择器)	选取(含有元素选择器选中的标签)的标签

例子	描述
$('p:first')	选取第一个p标签
$('p:eq(2)')	选取第三个p标签(索引从0开始的)
$('div:not(.d1)')	选中div中class值不等于d1的标签
$('ul:has(#d1)')	选取内部含有id是d1的ul标签

筛选器方法

方法	描述
$().next()	同级别往下查找一个
$().nextAll()	同级别往下查找所有
$().nextUntil("选择器")	同级别往下查找所有，直到满足选择器条件
$().prev()	同级别往上查找一个
$().prevAll()	同级别往上查找所有
$().prevUntil("选择器")	同级别往上查找所有，直到满足选择器条件
$().parent()	查找一个父标签
$().parents()	查找所有父标签(一直向上一个级别查找)
$().parentsUntil("选择器")	查找所有父标签，直到满足选择器条件
$().children()	查找儿子标签
$().siblings()	同级别上下所有标签(兄弟标签)