JQuery中的九大选择器及其应用（上）

禾南大木呈

已于 2022-05-17 10:58:05 修改

阅读量283

点赞数 1

分类专栏： JQuery 文章标签： jquery javascript 前端

于 2022-05-13 20:53:55 首次发布

本文链接：https://blog.csdn.net/m0_46160024/article/details/124759524

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第一种：基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基本选择器</title>
	<script type="text/javascript" src="jquery-3.6.0/jquery-3.6.0.js"></script>
</head>
<body>
	<div id="div1ID">div1</div>
	<div id="div2ID">div2</div>
	<span class="myClass">span</span>
	<p>p</p>
	<script type="text/javascript">
		/*
			JQuery中的九大选择器
				第一种：基本选择器
		*/
		// 基本选择器
		// (1) 输出所有id属性值为div1ID的元素个数
		// 语法：$('#id属性值')
		// 注意这里数组的length属性，与Java类似
		console.log($('#div1ID').length) // 1
		// (2) 输出所有div元素的个数
		// 语法：$('标签名称')
		console.log($('div').length) // 2
		// (3) 输出所有class属性值为myClass的元素个数
		// 语法：$('.类名')
		console.log($('.myClass').length) // 1
		// (4) 输出所有div、span、p元素的个数
		// 语法：$('标签名称1, 标签名称2, ...')
		console.log($('div, span, p').length) // 4
		// (5) 输出所有id属性值为div1ID、class属性值为myClass、p元素的个数
		console.log($('#div1ID, .myClass, p').length) // 3
	</script>
</body>
</html>

第二种：层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>层次选择器</title>
	<script type="text/javascript" src="jquery-3.6.0/jquery-3.6.0.js"></script>
</head>
<body>
	<form>
		<input type="text" value="a">		
		<table>
			<tr>
				<td>
					<input type="checkbox" value="b">
				</td>
			</tr>			
		</table>
	</form>
	<input type="radio" value="c">
	<input type="radio" value="d">
	<input type="radio" value="e">
	<script type="text/javascript">
		/*
			JQuery中的九大选择器
				第二种：层次选择器
		*/
		// 层次选择器
		// (1) 输出表单form里所有input元素的个数
		// 后代选择器，语法：$('父标签名称 子标签名称 ...')
		console.log($('form input').length) // 2
		// (1.1) 输出表单form里table元素中的所有input元素的个数
		console.log($('form table input').length) // 1
		// (2) 输出表单form里所有直接子级input元素的个数
		// 子元素选择器，语法：$('父标签名称 > 字标签名称 ...')
		console.log($('form > input').length) // 1
		// (3) 输出与表单form同级的第一个input元素的value属性值
		// 兄弟元素选择器，语法：$('前面兄弟标签名称 + 后面兄弟标签名称 + ...')
		console.log($('form + input').val()) // c
		// (3.1) 输出与表单form同级的第二个input元素的value属性值
		console.log($('form + input + input').val()) // d
		// (4) 输出所有与表单form同级的input元素个数
		console.log($('form ~ input').length) // 3
	</script>
</body>
</html>

第三种：增强型基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>增强型基本选择器</title>
	<script type="text/javascript" src="jquery-3.6.0/jquery-3.6.0.js"></script>
</head>
<body>
	<ul>
	    <li>list item 1</li>
	    <li>list item 2</li>
	    <li>list item 3</li>
	    <li>list item 4</li>
	    <li>list item 5</li>
	</ul>
	<input type="checkbox" checked="checked">
	<input type="checkbox" checked="checked">
	<input type="checkbox">
	<table border="1">
	  <tr><td>line1[0]</td></tr>
	  <tr><td>line2[1]</td></tr>
	  <tr><td>line3[2]</td></tr>
	  <tr><td>line4[3]</td></tr>
	  <tr><td>line5[4]</td></tr>
	  <tr><td>line6[5]</td></tr>
	</table>	
	<h1>h1</h1>
	<h2>h2</h2> 
	<h3>h3</h3>
	<p>p</p>
	<script type="text/javascript">
		/*
			JQuery中的九大选择器
				第三种：增强型基本选择器
		*/
		// 增强型基本选择器
		// (1) 输出ul中第一个li元素的内容
		// :first 查询符合条件的第一个元素
		// first()方法等效于:first
		// val()方法等效于JS对象中的value属性
		// html()方法等效于JS对象中的innerHTML属性
		// text()方法等效于JS对象中的innerText属性
		// 注意：
		// 		val()方法、html()方法、text()方法，这3个方法
		// 		如果没有传参，表示取值
		//      如果传参，表示赋值
		console.log($('ul li:first').html()) // list item 1
		console.log($("ul li:first").text()) // list item 1
		console.log($("ul li").first().html()) // list item 1
		// 如果传参，表示赋值
		// 在浏览器中可以看到list item 1变成了Hello
		$('ul li:first').html('Hello')
		// (2) 输出ul中最后一个li元素的内容
		// :last 查询符合条件的最后一个元素
		// last()方法等效于:last
		console.log($('ul li:last').html()) // list item 5
		console.log($('ul li').last().html()) // list item 5
		// (3) 输出表格的索引为1、3、5、...奇数行的个数
		// :odd 获取奇数索引的元素，索引从0开始
		console.log($('table tr:odd').length) // 3
		// (4) 输出表格的索引为2、4、6、...偶数行的个数
		// :even 获取偶数索引的元素，索引从0开始
		// 总共就1、2、3、4、5五个索引，因为1、3、5被认为是奇数索引
		// 所以0、2、4就被认为是偶数索引
		// 注意这里0被认为是偶数索引
		console.log($('table tr:even').length) // 3
		// (5) 输出表格中第二行的内容
		// :eq(索引) 根据索引查找元素
		console.log($('table tr:eq(1)').text()) // line2[1]
		// (6) 输出表格中索引比0大的行数
		// :gt(索引) 查找比指定索引大的元素
		console.log($('table tr:gt(0)').length) // 5
		// (7) 输出表格中索引比2小的行数
		// :lt(索引) 查找比指定索引小的元素
		console.log($('table tr:lt(2)').length) // 2
		// (8) 设置页面内所有标题<h1>、<h2>、<h3>的背景色为红色，文字为蓝色
		// :header 匹配所有标题元素
		// :css('属性名', '属性值') 通过属性名与相应的属性值来设置样式
		// 注意:css('属性名', '属性值')支持链式调用
		// $(':header').css('background-color', 'red').css('color', 'blue')
		// :css(properties)
		// properties 要设置为样式属性的名/值对（即键值对）
		$(':header').css({
			background: 'red',
			color: 'blue'
		})
		// 如果属性名中包含“-”的话，必须使用引号（单引号或者双引号）
		$(':header').css({
			'background-color': 'red',
			color: 'blue'
		})
		// css函数还可以通过属性名来获取相应的属性值
		console.log($(':header').css('color')) // rgb(0, 0, 255)
		// (9) 输出所有选中的复选框的个数
		// :checkbox 匹配所有的复选框
		console.log($(':checkbox:checked').length) // 2
		// (10) 输出所有未选中的复选框的个数
		// :not 去除所有与指定选择器匹配的元素
		console.log($(':checkbox:not(:checked)').length) // 1
	</script>
</body>
</html>