jQuery选择器总结

最新推荐文章于 2024-10-31 15:39:18 发布

My_____Dream

最新推荐文章于 2024-10-31 15:39:18 发布

阅读量166

点赞数

分类专栏： JQ

本文链接：https://blog.csdn.net/My_____Dream/article/details/79209427

版权

JQ 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery选择器总结

一、基本选择器

$("#id值") $(".class值") $("标签名")

了解:$("*")
理解:获取多个选择器用逗号隔开
$("#id值,.class值")

二、层次选择器

a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟(大弟弟)
a~b:a的所有弟弟

三、基本过滤选择器

:frist 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <

四、内容过滤

:has("选择器"):包含指定选择器的元素

五、可见过滤

:hidden 在页面不展示元素一般指 input type="hidden" 和样式中display:none
:visible

六、属性过滤器

[属性名]
[属性名="值"]

七、表单过滤

:input 所有的表单子标签 input select textarea button

八、代码练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
</head>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
//给全选标签派发事件
$("#all").click(function(){
$("*").css("background-color","red");
});
//body所有的后代
$("#a").click(function(){
$("body div").css("background-color","yellow");
});

$("#b").click(function(){
$("body div").css("background-color","yellow");
});

$("#c").click(function(){
$("body>div").css("background-color","yellow");
});

$("#d").click(function(){
$("body+div").css("background-color","yellow");
});

$("#e").click(function(){
$(":gt").css("background-color","yellow");
});

$("#f").click(function(){
$(":first").css("background-color","yellow");
});

$("#g").click(function(){
$(":last").css("background-color","yellow");
});

$("#h").click(function(){
$(":odd").css("background-color","yellow");
});

$("#i").click(function(){
$(":even").css("background-color","yellow");
});

$("#j").click(function(){
$(":eq").css("background-color","yellow");
});

$(":gt").click(function(){
$(":lt").css("background-color","yellow");
});
})

</script>
<body>
<div id="dv1" style="border: solid;">我是第一个iddiv
<div style="border: solid;" class="cl1" >
我是第一个classdiv
</div>
</div>
<div id="dv2" style="border: solid;">我是第二个iddiv
<div style="border: solid;" class="cl2">
我是第二个classdiv
</div>
</div>
<div id="dv3" style="border: solid;" >我是第三个iddiv
<div style="border: solid;" class="cl3" >
我是第三个classdiv
</div>
</div>
<div id="dv4" style="border: solid;">我是第四个iddiv
<div style="border: solid;" class="cl4">
我是第四个classdiv
</div>
</div>
<input type="button" value="选择所有标签元素" id="all" />
<input type="button" value="a b:a的所有b后代" id="a" />
<input type="button" value="a>b:a的所有b孩子" id="b" />
<input type="button" value="a+b:a的下一个兄弟(大弟弟)" id="c" />
<input type="button" value="a~b:a的所有弟弟" id="d" />
<input type="button" value=":frist 第一个" id="e" />
<input type="button" value=":last 最后一个" id="f" />
<input type="button" value=":odd 索引奇数" id="g" />
<input type="button" value="even 索引偶数" id="h" />
<input type="button" value=":eq(index) 指定索引" id="i" />
<input type="button" value=":gt(index) >" id="j" />
<input type="button" value=":lt(index) <" id="k" />

</body>
</html>