jQuery之选择器

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

guheSs

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

阅读量129

点赞数

分类专栏： jQuery笔记

本文链接：https://blog.csdn.net/u011514024/article/details/97289983

版权

jQuery笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基本选择器

ID选择器
$(’#ID’)
Element选择器
$(‘element’)
Class选择器
$(’.className’)
通配符选择器
$(’*’)–选中所有元素，不建议使用

多项选择器

$(“selector1,selector2,selectorN”); 将每一个选择器匹配到的元素合并后一起返回。可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。顺序会遵循html的顺序

层级选择器

$(‘ancestor descendant’) 祖先后代选择器 在给定的祖先元素下面匹配所有的后代元素;
代码举例省略
$(‘parent>child’) 子选择器 在给定的父元素下匹配所有的子元素

<body>
	<h3>必备基础</h3>
	<ul>
		<b>分类</b>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
		<li>jQuery</li>
	</ul>
	<h3>热门技术</h3>
	<ul>
		<b>分类</b>
		<li>vue.js</li>
		<li>es6</li>
		<li>less/sass</li>
	</ul>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
      $(function(){
        $('ul>li').css('color','red');
      });
    </script>
</body>

ul(父)下所有的li(子)

$(‘prev~siblings’) 兄弟选择器 匹配pre后面所有siblings()元素;

<body>
	<h3>必备基础</h3>
	<ul>
		<b>分类</b>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
		<li>jQuery</li>
	</ul>
	<h3>热门技术</h3>
	<ul>
		<b>分类</b>
		<li>vue.js</li>
		<li>es6</li>
		<li>less/sass</li>
	</ul>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
      $(function(){
        $('b~li').css('background','green');
      });
    </script>
</body>

b后面所有的兄弟元素li

$(‘prev+next’) 同级选择器 匹配所有紧跟在prev元素后的next元素 prev和next同级

<body>
	<h3>必备基础</h3>
	<ul>
		<b>分类</b>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
		<li>jQuery</li>
	</ul>
	<h3>热门技术</h3>
	<ul>
		<b>分类</b>
		<li>vue.js</li>
		<li>es6</li>
		<li>less/sass</li>
	</ul>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
      $(function(){
        $('ul+h3').css('color','red'); //prev和next同级
      });
    </script>
</body>

prev和next必须是同级

属性选择器

$( ‘[attribute]’) 属性名
$( ‘[attribute=value]’) 属性值
$( ‘[attribute=!value]’) 非属性值
$( ‘[attribute^=value]’) 匹配属性值以value开头（含有value）的所有元素。
$( ‘[attribute$=value]’) 匹配属性值以value结尾（含有value）的所有元素。
$( ‘[attribute*=value]’) 匹配属性值包含value（含有value）的所有元素。
$( ‘[selector1] [selector2]… [selectorN]’) 匹配1~N的交集

过滤器

child
：first-child:子元素的某一个标签第一个
：last-child:子元素的某一个标签最后一个
：nth-child:子元素标签第几个
：nth-last-child:子元素倒数第几个
：only-child:父元素后面仅有一个标签

		$('x > p:first-child')	 //X下第一个标签是P标签的节点
        $('x > p:last-child') 	 //X下倒数第一个标签是P标签的节点
        $('x > p:nth-child(n)') 	 //x下第n个标签是P标签的节点
        $('x > p:nth-last-child(n)')	 //x下倒数第n个是P标签的节点
        $('x > p:only-child') 		 //x下只有一个标签是P标签的节点

type
和child类似，child侧重找子节点，找某个元素必需满足该元素在在父节点下处于相同位置
type侧重节点类型，type不强调所有标签的排序，只要有该元素就可以。
：first-of-type:子元素的某一个标签第一个
：last-of-type:子元素的某一个标签最后一个
：nth-of-type:子元素标签第几个
：nth-last-of-type:子元素倒数第几个
：only-of-type:父元素后面仅有一个标签

		$('x > p:first-of-type')	 //X下第一个P标签节点
        $('x > p:last-of-type') 	 //X下倒数第一个P标签节点
        $('x > p:nth-of-type(n)') 	 //x下第n个P标签节点
        $('x > p:nth-last-of-type(n)')	 //x下倒数第n个P标签节点
        $('x > p:only-of-type') 		 //x下只有一个P标签的节点

过滤器参数