[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>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-10-06 12:08:26 更:2021-10-06 12:09:47

360图书馆购物三丰科技阅读网日历万年历 2024年5日历

-2024/5/18 22:07:25-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码