jquery选择器用法

最新推荐文章于 2020-04-28 15:07:07 发布

张贺_

最新推荐文章于 2020-04-28 15:07:07 发布

阅读量295

点赞数

分类专栏：学习笔记文章标签： javascript jquery 选择器

本文链接：https://blog.csdn.net/weixin_41849462/article/details/80619869

版权

学习笔记专栏收录该内容

68 篇文章 1 订阅

订阅专栏

jquery基本选择器（重点）：

#id：id选择器；

Element：元素选择器；

Class：类选择器；

jquery层级选择器：

ancestor descendant：表示选取ancestor 里面所有的descendant元素；

parent>child：选择parent元素的子元素；

注意：ancestor descendant和parent>child的区别：选择所有/选择自己的孩子

select+：获取后面的兄弟元素（只取下一个）；

select~：获取后面的兄弟元素（取后面所有个）；

：first/last：第一/最后一个元素；

实例

<body>
	<ul>
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
		<li>f</li>
	</ul>
    <input type="button" name="" value="点击">
    <script type="text/javascript">
    	$("input").click(function(){
    		$("li:first").css({background:"red"});
    	});
    </script>
</body>

：even/odd：偶数/奇数元素；（下标从0开始）

：eq（index）：指定索引位置元素；

：gt（index）/lt（index）：大于/小于index下标的所有元素；

：header：找h标签元素（不用找父元素，可以直接：header）；

：not（“select”）：选择时除去select元素；

jquery内容选择器：

：contains（“text”）：匹配含有text内容的元素；

实例：选择内容包含333的div ，背景变红色：

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="div1">
    	111
    </div>    
    <div id="div2">
    	222
    </div>    
    <div id="div3">333</div>    
    <div id="div4">
    	444
    </div>
    <input type="button" value="点击" name="">
    <script type="text/javascript">
    	$("input").click(function(){
    		$("div:contains('333')").css({background:"red"});
    	});
    </script>
</body>

：empty：匹配内容为空的内容；

：parent：选择作为父元素的元素；

：has（selecter）：选择包含有selecter的选择器；

实例：选择包含p的div把背景色换成红色：

<body>
    <div id="div1">
    	111
    </div>    
    <div id="div2">
    	222
    </div>    
    <div id="div3">333</div>    
    <div id="div4">
    	444
    	<p>1</p>
    </div>
    <input type="button" value="点击" name="">
    <script type="text/javascript">
    	$("input").click(function(){
    		//$("div:contains('333')").css({background:"red"});
    		$("div:has(p)").css({background:"red"});
    	});
    </script>
</body>

jquery属性选择器：

[attribute]：属性选择为attribute；

[attribute = “value”]：查找属性为value的元素；

    	$("input").click(function(){
    		$("img[src]").css({background:"red"});
    		$("img[src='a.jpg']").css({background:"pink"});
    	});

[attribute ！= “value”]：查找属性不为value的元素；

[attribute ^= “value”]：查找属性以value开头的元素；

$("img[src^='a']").css({background:"pink"});

[attribute $= “value”]：查找属性以value结尾的元素；（必须是最后如.jpg 的g）

$("img[src $='g']").css({background:"pink"});

[attribute *= “value”]：查找属性中包含value的元素；

$("img[src *='a']").css({background:"pink"});

jquery子选择器（伪类选择器）：

分为Type阵营，child阵营：

：first-child/last-child：找第一个/最后一个子元素；

：first-of-type/last-of-type：找第一个/最后一个子元素；（一模一样的功能）；

   	$("input").click(function(){
    		$("li:first-child").css({background:"red"});
    		$("li:last-of-type").css({background:"pink"});
    	});

：nth-child(n) / :nth-of-type(n)：找到第n个子元素；

$("li:nth-child(2)").css({background:"red"});

:nth-last-child(n) / :nth-last-of-type(n)：找到倒数第n个子元素；

    		$("li:nth-last-child(2)").css({background:"red"});
    		$("li:nth-last-of-type(3)").css({background:"pink"});

张贺_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选择器用法

jquery基本选择器（重点）：#id：id选择器；Element：元素选择器；Class：类选择器；jquery层级选择器：ancestor descendant：表示选取ancestor 里面所有的descendant元素；parent&gt;child：选择parent元素的子元素；注意：ancestor descendant和parent&gt;child的区别：选择所有/选择自己的孩子s...
复制链接

扫一扫

专栏目录