jq基本选择器

最新推荐文章于 2021-11-28 14:34:43 发布

weixin_41544553小彩虹

最新推荐文章于 2021-11-28 14:34:43 发布

阅读量1.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jq选择器

本文链接：https://blog.youkuaiyun.com/weixin_41544553/article/details/88251459

jquery 专栏收录该内容

3 篇文章

订阅专栏

jQuery 选择器大致分为四种：基本选择器、层次选择器、过滤选择器、表单选择器

一、jq基本选择器

选择器的用法跟css的用法一致，只是需要增加选择函数。$('');

如下面那道题：

id选择器为 $('#two')；

类选择器 $('.one');

标签选择器，元素选择器为 $('button');

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.one{
			}
			#two{ 
			}
		</style>
	</head>
	<body>
		<button id="two">按钮</button>
		<button class="one" >按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>				
		<script src="js/jquery-3.2.1.js"></script>
		<script>
			/*选择器的用法跟css的用法一致，只是需要增加选择函数。$('');*/
			/*可以直接操作数组*/
			/*控制css样式， 选择标签.css('样式','样式的值');*/
			$('button').css('background','red');
			$('.one').css('background','pink');
			$('#two').css('color','white');
		</script>
	</body>
</html>

运行结果：

二、层次选择器

1、 派生选择器：在s1内部获得全部的s2节点(不考虑层次)

　　$("div span")// 派生选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			span 
		</style>
	</head>
	<body>
		<div>
			<span>我是1</span>
			<p>
			<span>我是2</span>
			</p>
			<span>我是3</span>
		</div>
		<span>我是4</span>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
			$("div span").css('background','red')// 派生选择器
//			$("div>span").css('background','pink')// 子代选择器
//			$("div+span").css('background','lime')// 兄弟选择器
//			$("div+span").css('background','lime')// 兄弟选择器
		</script>
	</body>
</html>

运行结果：

2、$(s1 > s2) [父子]：直接子元素选择器:在s1内部获得s2的子元素节点

$("div>span")// 子代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			span 
		</style>
	</head>
	<body>
		<div>
			<span>我是1</span>
			<p>
			<span>我是2</span>
			</p>
			<span>我是3</span>
		</div>
		<span>我是4</span>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
//			$("div span").css('background','red')// 派生选择器
			$("div>span").css('background','pink')// 子代选择器
//			$("div+span").css('background','lime')// 兄弟选择器
//			$("div+span").css('background','lime')// 兄弟选择器
		</script>
	</body>
</html>

运行结果：

3 、$(s1 + s2) [兄弟]：直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			span 
		</style>
	</head>
	<body>
		<div>
			<span>我是1</span>
			<p>
			<span>我是2</span>
			</p>
			<span>我是3</span>
		</div>
		<span>我是4</span>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
//			$("div span").css('background','red')// 派生选择器
//			$("div>span").css('background','pink')// 子代选择器
			$("div+span").css('background','lime')// 兄弟选择器
//			$("div+span").css('background','lime')// 兄弟选择器
		</script>
	</body>
</html>

运行结果：

4、 $(s1 ~ s2) [兄弟]：后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			span 
		</style>
	</head>
	<body>
		<div>
			<span>我是1</span>
			<p>
			<span>我是2</span>
			</p>
			<span>我是3</span>
		</div>
		<span>我是4</span>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
//			$("div span").css('background','red')// 派生选择器
//			$("div>span").css('background','pink')// 子代选择器
//			$("div+span").css('background','lime')// 兄弟选择器
			$("div+span").css('background','lime')// 兄弟选择器
		</script>
	</body>
</html>

三、(过滤)选择器

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
			}
		</style>
	</head>

	<body>
		<h1>并且选择器</h1>
		<h2>并且选择器</h2>
		<h3>并且选择器</h3>
		<h4>并且选择器</h4>
		<ul>
			<li>我是1</li>
			<li id="two">我是2</li>
			<li>我是3</li>
			<li id="four">我是4</li>
			<li>我是5</li>
			<li>我是6</li>
			<li>我是7</li>
			<li>我是8</li>
		</ul>

		<input type="button" value="触发" onclick="f1()" />
		<script src="js/jquery-3.2.1.js"></script>
		<script type="text/javascript">
			function f1() {
				$("li").css('font-weight','bold');
				// :first 找到第一个
				//li元素同时，还需要是第一个
				$("li:first").css('background-color', 'blue');
				// :last 找到最后一个
				$("li:last").css('background-color', 'green');
				// :eq(下标) 下标从0计算, equal()
				$("li:eq(4)").css('color', 'pink');
				// :gt(索引值) 下标大于条件索引值, great than
				$("li:gt(4)").css('color', 'red');
				// :lt(索引值) 下标小于条件索引值, less than
				$("li:lt(3)").css('color', 'orange');
				// :even 下标索引值等于偶数的
				$("li:even").css('font-size', '20px');
				// :odd 下标索引值等于奇数的
				$("li:odd").css('font-size', '30px');
				// :not(选择器) 去除与“选择器”匹配的元素
				$("li:not(#two,#four)").css('text-decoration', 'overline');
				// :header 获得h1/h2/h3...的标题元素
				$(":header").css('color', 'blue');
			}
		</script>
	</body>

</html>

6 内容过滤选择器

:contains(内容)

包含内容选择器，获得节点内部必须通过标签包含指定的内容

$(“div:contains(beijing)”)

<div>linken love beijing</div>

<div>jack love shanghai</div>

:empty

获得空元素(内部没有任何元素/文本(空) )节点对象

$(“div:empty”)

<div>linken love beijing</div>

<div>jack love shanghai</div>

<div><img /></div>含有<img>节点

<div> </div>//含有空格实心节点

:has(选择器)

内部包含指定元素的选择器
$(“div:has(#apple)”)

<div>hello</div>

<div><span id=”apple”></span></div>//id选择器

:parent

寻找的节点必须作为父元素节点存在

$(“div:parent”)

<div>linken love beijing</div>

<div>jack love shanghai</div>

/********************************************/

function f1(){
//① $(":contains(text)")
$("div:contains(beijing)").css('background-color','red');
//② $(":empty")
$("div:empty").css('width','200px');
$("div:empty").css('height','100px');
$("div:empty").css('background-color','pink');
//③ $(":has(selector)")
console.log($("div:has(.orange)"));
//④ $(":parent")
console.log($("div:parent"));
}

<h1>内容过滤选择器</h1>
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div> </div>
<div><p class="orange"></p></div>
<div><span class="orange"></span></div>