jQuery 查找标签

Posted 2020-11-10 蜗牛也是妞

1 基本选择器

//id选择器：
$("#id")
//标签选择器：
$("tagName")
//class选择器：
$(".className")
//配合使用：
$("div.c1")  // 找到有c1 class类的div标签
//所有元素选择器：
$("*")
//组合选择器：
$("#id, .className, tagName")
//层级选择器：
 //x和y可以为任意选择器
   $("x y");// x的所有后代y（子子孙孙）
   $("x > y");// x的所有儿子y（儿子）
   $("x + y")// 找到所有紧挨在x后面的y
   $("x ~ y")// x之后所有的兄弟y

2、基本筛选器：

:first  // 第一个
:last  // 最后一个
:eq(index) // 索引等于index的那个元素
:even  // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd  // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找

// 例子：
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

3、属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type=‘checkbox‘]");// 取到checkbox类型的input标签
$("input[type!=‘text‘]");// 取到类型不是text的input标签

4、间接选择

//下一个元素
$("#id").next()// 找下一个兄弟标签
$("#id").nextAll()// 找下所有兄弟标签
$("#id").nextUntil("#i2")// 找下直到class=l4的兄弟标签

//上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

//父亲元素
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元//素为止。

//儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

//查找元素：
$("#id").find("p")// 搜索后代所有与指定表达式匹配的元素。
$(".c1").children("p")// 搜索儿子与指定表达式匹配的元素。

//补充：
.first()// 获取匹配的第一个元素
.last()// 获取匹配的最后一个元素
.not()// 从匹配元素的集合中删除与指定表达式匹配的元素
.has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素