jQuery选择器分类,总结

最新推荐文章于 2024-09-05 16:56:18 发布

绮羅

最新推荐文章于 2024-09-05 16:56:18 发布

阅读量661

点赞数

分类专栏：感受

本文链接：https://blog.csdn.net/ruoyuanyi/article/details/8723667

版权

感受专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基本选择器：

1 ， id 选择器通过 id 找到 #p ｛ color ：“ red ”｝；

2 ，根据类名 $(“.span”)

3 ，指定的元素 $(“div”);

4 集合元素匹配所有元素 $(“p,div,.span”);

5 匹配所有元素｛ padding ： 0 ； margin ： 0 ｝

层次选择器

1, 后代元素选择器通过当前元素的后代元素（儿子，孙子） ul li(background:”blue”);

2 ，子元素选择器（只包括儿子）

$(“#div > p”).css(“color”,”red”);

3, 相邻元素选择器（紧接在前一个后面）

$(“#div ul + li”).css(“color”,”red”);

4, 兄弟元素选择器

<span></span>

<div>

$(“span~.div3”).css({“fontSize”:”30px”,”color”:”red”});

过滤选择器

索引大于小于 gt() lt()

//1, 匹配所有 div 元素中 , 第一个 div

$(“div:first”).css(“color”,”red”);

//2, 匹配所有 div 元素中 , 最后一个 div

$(“div:last”).css(“color”,”red”);

//3, 匹配索引是偶数的 div, 索引是从 0 开始

$(“div:even”).css(“color”,”red”);

//4, 匹配索引是奇数的 div, 索引是从 0 开始

$(“div:odd”).css(“color”,”red”);

//5, 匹配索引等于 xx 的 div

$(“div:eq(0)”).css(“color”,”red”);

//6, 匹配索引小于 xx 的 div 小于 lt()

$(“div:lt(2)”).css(“color”,”red”);

//6, 匹配索引大于 xx 的 div 大于 gt()

$(“div:gt(1)”).css(“color”,”red”);

//7, 匹配网页中所有的 h 标签

$(“:header”).css(“color”,”red”);

//8, 匹配网页中正在执行动画效果的元素

//$(":animated")

});

</script>

</head>

<body>

<h1> 这是 h1 标签 </h1>

<h2> 这是 h2 标签 </h2>

<div> 这是第一个 div</div>

<div> 这是第二个 div</div>

<div> 这是第三个 div</div>

</body>

内容过滤选择器

<style>

.show{

display:block;

}

.hide{

Display:none;

}

</style>

//1, 选取含有文本内容为标签的元素

$(“div:contains(‘ 显示 ’)”).css(“color”,”red”);

//2, 匹配含有 p 元素的元素

$(“div:has(p)”).css(“color”,”red”)

* 可见性过滤选择器 *

//1, 选取所有可见的元素 visible 可见

$(“div:visible”).css(“color”,”red”);

//2, 让隐藏的元素显示出来 show()

$(“div:hidden”).show(3000).css({"color":"blue","font-size":"25px"};

</script>

</head>

<body>

<div> 这是显示的 div</div>

<div> 这是隐藏的 div</div>

<div><p> 你好 </p></div>

</body>

属性过滤选择器

$(document).ready(function(){

//1, 选取拥有此属性的元素

$(“div[class]”).css(“color”,”red”);

//2, 选取属性值为 value 的元素

$(“div[class =hide]”).css(“color”,”red”).show(3000);

绮羅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录