jQuery特有选择器
1、基本选择器
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $(“#id”); | 获取指定ID的元素 |
类选择器 | $(“.class”); | 获取同一类class的元素 |
标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”); | 使用逗号分隔,只要符合条件之一就可。 |
交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
2、层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $(“ul>li”); | 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
兄弟元素选择器 | $(‘prevSibling + nextSibling’) | 相邻下一个兄弟元素选择器,匹配所有紧接在prevSibling元素后的nextSibling元素。 |
后排兄弟元素选择器 | $(‘prev ~ sibling’) | 匹配所有紧接在prev元素后所有的siblings元素。 |
3、基本过滤选择器
名称 | 用法 | 描述 |
---|---|---|
:first | #(“div:first”) | 选取所有div中的第一个div元素 |
:last | $(“div:last”) | 选取所有div中的最后一个div元素 |
:not(selector) | $(“input:not(.myClass)”) | 选取class不是myClass的input元素(返回集合元素) |
:even | $(“input:even”) | 选取索引是偶数的所有元素,索引从0开始,选取索引是偶数的input元素 |
:odd | $(“input:odd”) | 选取索引是奇数的input元素 |
:eq(index) | $(“input:eq(1)”) | 选取索引等于1的input元素 |
:gt(index) | $(“input:gt(1)”) | 选取索引大于1的input元素(注:大于1 而不包括1) |
:lt(index) | $(“input:lt(1)”) | 选取索引小于1的input元素(注:小于1 而不包括1) |
:header | $(":header") | 选取网页中所有的所有的标题元素如,,…… |
:animated | $(“div:animated”) | 选取当前正在执行动画的所有元素 |
:focus | $(":focus") | 选取当前获取焦点的元素 |
选取的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.table div{
height: 40px;
border-bottom: 1px solid #ccc;
line-height: 40px;
}
</style>
</head>
<body>
<h1>内容1</h1>
<h1>内容2</h1>
<h1>内容3</h1>
<h1>内容4</h1>
<h1>内容5</h1>
<h1>内容6</h1>
<h1>内容7</h1>
<h1>内容8</h1>
<h1>内容9</h1>
<h1>内容10</h1>
<br><br>
<div class="table">
<h2>一个表格</h2>
<div>行1</div>
<div>行2</div>
<div>行3</div>
<div>行4</div>
<div>行5</div>
<div>行6</div>
<div>行7</div>
<div>行8</div>
<div>行9</div>
<div>行10</div>
</div>
<script type="text/javascript">
//索引值大于5,不包括5
$("h1:gt(5)").css({
background:"skyblue",
})
//索引值小于5,不包括5
$("h1:lt(5)").css({
background:"green",
})
//等于5,两种方式
$("h1:eq(5)").css({
background:"pink",
})
$("h1").eq(5).css({
color:"white",
})
//选择奇数行元素
$(".table div:odd").css({
background:"#efefef",
})
//选择偶数行元素
$(".table div:even").css({
background:"antiquewhite",
})
</script>
</body>
</html>
结果:
4属性选择器
名称 | 描述 | 格式 |
---|---|---|
属性过滤器 | 用于筛选给定属性等于某特定值的所有元素 | 格式:$(“selector[attribute=value]”); |
开始过滤器 | 用于选择给定属性是以某特定值开始的所有元素 | 格式:$(“selector[attribute^=value]”) |
结尾过滤器 | 用于选择给定属性是以某特定值结尾的所有元素 | 格式: ( " s e l e c t o r [ a t t r i b u t e ("selector[attribute ("selector[attribute=value]") |
任意匹配过滤器 | 用于选择指定属性值包含给定字符串的所有元素 | 格式:$(“selector[attribute*=value]”) |
包含过滤器 | 用于选择包含给定属性的所有元素 | 格式:$(“selector[attribute]”) |
复合过滤器 | 用于选择同时满足多个条件的所有元素 | 格式:$(“selector[selector1][selector2]…[selector[N]”) |
筛选选择器
名称 | 描述 |
---|---|
$(“.dd”).children(“ul”) | 找到.dd下的带Ul的所有子元素 |
.eq(index) | 匹配index下标的元素 |
.first() | 获取第一元素 |
.last() | 获取最后一个元素 |
.find() | 后代查找 |
.parent() | 查找父标签 |
.siblings() | 兄弟元素 |
.next() | 下一个兄弟元素 |
.prev() | 前一个兄弟元素 |
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="d1">
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
<li>内容7</li>
<li>内容8</li>
<li>内容9</li>
<ol>
<li>子列表</li>
<li>子列表</li>
<li>子列表</li>
<li>子列表</li>
<li>子列表</li>
</ol>
</ol>
</div>
<script type="text/javascript">
var d1=$('.d1');
//查找d1下的子孙元素
var li=d1.find("li")
console.log(li)
//获取直接子元素
var childol=d1.children("ol")
console.log(childol)
//获取兄弟元素
var brother=d1.find("li:eq(3)").siblings()
console.log(brother)
</script>
</body>
</html>
结果:
一个切换内容的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.btnList{
width: 900px;
margin: 0 auto;
height: 100px;
display: flex;
}
.btn{
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
border: 1px solid #CCCCCC;
}
.btn.active{
background-color: #CCCCCC;
}
.contentList{
width: 900px;
height: 600px;
position: relative;
margin: 0 auto;
}
.content{
width: 900px;
width: 900px;
height: 600px;
position: absolute;
left: 0;
top:0;
background: #efefef;
padding: 50px;
box-sizing: border-box;
opacity: 0;
/* transition: all 0.2s; */
}
.content.active{
opacity: 1;
}
</style>
</head>
<body>
<div class="btnList">
<div class="btn active">内容1</div>
<div class="btn">内容2</div>
<div class="btn">内容3</div>
</div>
<div class="contentList">
<div class="content active">
这是内容1,这是内容1,这是内容1,这是内容1,这是内容1
</div>
<div class="content">
这是内容2,这是内容2,这是内容2,这是内容2,这是内容2
</div>
<div class="content">
这是内容3,这是内容3,这是内容3,这是内容3,这是内容3
</div>
</div>
<script type="text/javascript">
$(".btn").click(function(){
//获取当前索引值
var index=$(this).index()
$(".btn").eq(index).addClass("active").siblings().removeClass("active")
$(".content").eq(index).addClass("active").siblings().removeClass("active")
})
</script>
</body>
</html>
结果:可以实现点击切换