前端：jQurey的选择器

最新推荐文章于 2022-08-11 19:27:02 发布

w_viola

最新推荐文章于 2022-08-11 19:27:02 发布

阅读量170

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/wanngxue/article/details/82875005

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1、基本选择器

通过元素id、.class和标签名等来查找DOM元素。

2、层次选择器

通过DOM之间的层次关系，如后代元素、子元素、相邻元素和同辈元素等来获取特定元素。

	1）改变<body>中所有<div>的背景色:$("body div").css("background","#bbffaa");
	2）改变<body>内子<div>的背景色:$("body>div").css("background","#bbffaa");
	3）改变class为one的下一个<div>同辈元素背景色：$(“.one+div").css("background","#bbffaa");或$(“.one”).next("div").css("background","#bbffaa");
	4）改变id为two的元素后面的所有<div>同辈元素背景色：$(“#two~div").css("background","#bbffaa");或$(“#two”).nextAll("div").css("background","#bbffaa");

3、过滤选择器

通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同。即选择器都以一个冒号开头。
(1)基本过滤选择器

	1）改变第一个<div>元素的背景色：$("div：first").css("background","#bbffaa");
	2）改变最后一个<div>元素的背景色：$("div：last").css("background","#bbffaa");
	3）改变class不为one的<div>元素的背景色：$("div：not(.one)").css("background","#bbffaa");
	4）改变索引值为偶数的<div>元素的背景色：$("div：even").css("background","#bbffaa");
	5）改变索引值为奇数的<div>元素的背景色：$("div：odd").css("background","#bbffaa");
	6）改变索引值等于3的<div>元素的背景色：$("div：eq(3)").css("background","#bbffaa");
	7）改变索引值大于3的<div>元素的背景色：$("div：gt(3)").css("background","#bbffaa");
	8）改变索引值小于3的<div>元素的背景色：$("div：lt(3)").css("background","#bbffaa");
	9）改变所有的标题元素，如<h1>,<h2>等这些元素的背景色：$(":header").css("background","#bbffaa");
	10）改变当前正在执行动画的元素的背景色：$(":animated").css("background","#bbffaa");
	11）改变当前获取焦点的元素的背景色：$(":focus").css("background","#bbffaa");

(2)内容过滤选择器

	1）改变含有文本“di”的<div>元素的背景色：$("div:contains(di)").css("background","#bbffaa");
	2）改变不包含子元素（包括文本元素）的<div>空元素的背景色：$("div:empty").css("background","#bbffaa");
	3）改变含有class为mini元素的背景色：$("div:has('.mini')").css("background","#bbffaa");
	4）改变含有子元素（包括文本元素）的<div>元素的背景色：$("div:parent").css("background","#bbffaa");

(3)可见性过滤选择器

	1）改变所有可见的<div>元素的背景色：$("div:visible").css("background","#bbffaa");
	2）改变隐藏的<div>元素：$("div:hidden").css("background","#bbffaa");

(4)属性过滤选择器

	1）改变含有属性title的<div>元素的背景色：$("div[title]").css("background","#bbffaa");
	2）改变属性title值等于“test”的<div>元素的背景色：$("div[title=test]").css("background","#bbffaa");
	3）改变属性title值不等于“test”的<div>元素的背景色：$("div[title!=test]").css("background","#bbffaa");
	4）改变属性title值以“te"开始的<div>元素的背景色：$("div[title^=te]").css("background","#bbffaa");
	5）改变属性title值以“est"结束的<div>元素的背景色：$("div[title$=est]").css("background","#bbffaa");
	6）改变属性title值含有“es"的<div>元素的背景色：$("div[title*=es]").css("background","#bbffaa");
	7）改变含有属性id，并且属性title值含有“es"的<div>元素的背景色：$("div[id][title*=es]").css("background","#bbffaa");

(5)子元素过滤选择器

(6)表单对象属性过滤选择器

4、表单选择器

w_viola

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端：jQurey的选择器

1、基本选择器通过元素id、.class和标签名等来查找DOM元素。2、层次选择器通过DOM之间的层次关系，如后代元素、子元素、相邻元素和同辈元素等来获取特定元素。 1）改变&amp;lt;body&amp;gt;中所有&amp;lt;div&amp;gt;的背景色:$(&quot;body div&quot;).css(&quot;background&quot;,&quot;#bbffaa&quot;);
复制链接

扫一扫

专栏目录