第一种:基本选择器
<!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>