[JavaScript知识库] JS Jquery选择器-2021-10-05

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JS Jquery选择器-2021-10-05 -> 正文阅读

[JavaScript知识库]JS Jquery选择器-2021-10-05

学如逆水行舟，不进则退

ID选择器、类选择器、标签选择器、通配符选择器、多项选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
		<div class="four"></div>
		<div id="five"></div>
		<div class="six"></div>
		<script type="text/javascript">
			// 标签选择器得到的是一个数组,通过 this可以选中当前
			$('div').text("标签选择器"); 
			// console.log($('div'));
			// ID选择器
			$('#one').text("one")
			//class选择器
			$('.four').text("four");
			// * 通配符选择器
			var all=$('*');
			console.log(all);
			// 多项选选择器，将每一个选择器匹配到的元素合并后一起返回。可以指定任意多个选择器
			$('#five,.six').text("多项选择器");
		</script>
	</body>
</html>

后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
		<p>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<nav>
				<span></span>
				<span></span>
			</nav>
		</p>
		<script type="text/javascript">
			//后代选择器
			$('div span').text("div下面的span");
			//子选择器，只选中父元素下面的子元素
			$('p>span').text("P下面的子元素");
		</script>
	</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="one">1
			<span class="one_span">2</span>
		</div>
		<div class="two">3
			<span class="two_span" id="two_span_id">4</span>
		</div>
		<div class="three">5
			<span class="three_span">6</span>
		</div>
		<script type="text/javascript">
			// 属性选择器，匹配有class属性的元素
			$('[class]').css('color','red');
			//匹配属性名为class，属性为one的属性
			$('[class=one]').css('color','blue');
			//匹配属性名为class，属性不是two的属性
			$('[class!=two]').css('color','blue');
			//匹配属性名为class，属性two开头的属性
			$('[class^=two]').css('color','yellow');
			//匹配属性名为class，属性span结尾的属性
			$('[class$=span]').css('color','green');
			//匹配属性名为class，里面包含e的属性
			$('[class*=e]').css('color','pink');
			//匹配属性名里面有class和id的属性
			$('[class][id]').css('color','gray');
		</script>
	</body>
</html>

child选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div>1
			<a href="">3</a>
			<span>2</span>
			<span>4</span>
			<ul>
				<li>5</li>
				<li>6</li>
				<li>7</li>
			</ul>
		</div>
		<div>
			<span>8</span>
			<span>9</span>
			<span>10</span>
		</div>
		<script type="text/javascript">
			//匹配div下面 第一个span元素，第一个元素要是span才能匹配到
			var first=$('div span:first-child');
			console.log(first);
			//匹配div下面 最后一个span元素，最后一个元素要是span才能匹配到
			var last=$('div span:last-child');
			console.log(last);
			//匹配div下面 第2个span元素，第2个元素要是span才能匹配到
			var nth=$('div span:nth-child(2)');
			nth.css('color','red');
			console.log(nth);
		</script>
	</body>
</html>

表单相关选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="text" name="" id="" value="" />
		<input type="password" name="" />
		<input type="button" name="" id="" value="" disabled=""/>
		<button type="button"></button>
		<select name="">
			<option value=""></option>
		</select>
		<textarea rows="" cols=""></textarea>
		<script type="text/javascript">
			//可以选择 <input>、<textarea>、<select>、<button>
			var input=$(':input');
			console.log(input);
			// 可以选择单行文本框，:password/:radio等都可以用这种方式
			var text=$(':text');
			console.log(text);
			// 匹配所有disabled元素 $(':disabled')
			// 匹配所有enabled元素  $(':enabled')
			// 匹配所有选中的被选中的元素  $(':checked')
			// 匹配所有选中的option元素   $(':selected')
			var disabled=$(':disabled');
			console.log(disabled);
		</script>
	</body>
</html>