1. 基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 1)、id选择器：将id为sa的span标签的背景设为黄色。
$("#sa").css({"background":"yellow"});
// 2)、类选择器：将div标签里面class的值为sb的文本框标签的背景设为黄色。
$(".sb").css({"background":"yellow"});
// 3)、标签选择器：将div里面input标签的背景设为黄色。
$("input").css({"background":"yellow"});
// 4)、*选择器：将整个页面所有标签的背景设为绿色。
$("*").css({"background":"green"});
// 5)、,选择器：将id为sa的div里面所有input、span标签的背景设为黄色。
$("input,span").css({"background":"yellow"});
})
</script>
</head>
<body>
<div id="mysa">
<span id="sa">这是span1</span><br />
<span id="sb">这是span2</span><br />
<span id="sc">这是span3</span><br />
<input type="button" value="按钮" /><br />
<input type="text" class="sa" value="文本框1"/><br />
<input type="text" class="sb" value="文本框2"/><br />
</div>
<div>
<span id="sa">这是span4</span><br />
<span id="sb">这是span5</span><br />
<span id="sc">这是span6</span><br />
<input type="text" class="sb" value="文本框3"/><br />
</div>
</body>
</html>2.层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 1)、空格选择器：将div标签里面的所有input元素背景设为绿色。
$("div input").css({"background":"green"});
// 2)、>选择器：将div里面的input子元素背景设为绿色。
$("div>input").css({"background":"green"});
// 3)、+选择器：将紧跟在div元素后面的第一个input元素背景设为绿色。
$("div+input").css({"background":"green"});
// 4)、~选择器：将div元素之后的所有与div元素同辈的input元素背景设为绿色。
$("div~input").css({"background":"green"});
})
</script>
</head>
<body>
<div id="da">
<input type="ta" value="div里文本框1"/><br />
<input type="ta" value="div里文本框2"/><br />
<input type="ta" value="div里文本框3"/><br />
<span id="sa">
<input type="text" value="span文本框1"/><br />
<input type="text" value="span文本框2"/><br />
<input type="text" value="span文本框3"/><br />
</span>
</div>
<input type="text" value="div后文本框1"/><br />
<input type="text" value="div后文本框2"/><br />
<input type="text" value="div后文本框3"/><br />
<span id="sb">
<input type="text" value="span文本框4"/><br />
</span>
</body>
</html>3.表单选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/new_file.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form id="form1">
性别：
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女" />女<br />
爱好：
<input type="checkbox" name="hobby" value="eat" checked="checked"/>吃饭
<input type="checkbox" name="hobby" value="sleep" />睡觉
<input type="checkbox" name="hobby" value="play" />玩耍<br />
地址：
<select>
<option value ="1">长沙</option>
<option value ="2">邵阳</option>
<option value ="3">怀化</option>
<option value ="4">株洲</option>
<option value ="5">湘潭</option>
</select><br />
<input type="button" id="ok" value="提交" />
</form>
</body>
<script type="text/javascript">
$(function(){
// 获取单选按钮
// 获取所有单选按钮
var da = $("#form1 :radio");
// 获取选中的单选按钮
var da = $("#form1 :radio:checked");
console.info(da.val());
// 获取复选框
// 获取所有复选框
var da = $("#form1 :checkbox");
// 获取选中的复选框
$("#ok").click(function(){
var da = $("#form1 :checkbox:checked");
// // 循环遍历da
$.each(da,function(i,v){// i表示数组da的下标；v表示数组da 的值
console.info(v.value);
});
// 获取选择的下拉框的值
var da = $("#form1 option:selected");
console.info(da.text())
})
})
</script>
</html>4.表格隔行换色案例
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 给偶数行按钮添加事件
$("#odd").click(function(){
$("table tr:odd").css({"background":"green"})
});
// 给奇数行按钮添加事件
$("#even").click(function(){
$("table tr:even").css({"background":"yellow"})
})
})
</script>
</head>
<body>
<table border="1px" align="center" width="300px">
<tr>
<th>名字</th>
<th>性别</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>12</td>
<td>湖南</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>12</td>
<td>湖南</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>12</td>
<td>湖南</td>
</tr>
<tr>
<td>麻子</td>
<td>男</td>
<td>12</td>
<td>湖南</td>
</tr>
</table>
<div align="center">
<input type="button" value="奇数行(绿色)" id="odd" />
<input type="button" value="偶数行(黄色)" id="even" />
</div>
</body>
</html>5.过滤选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 1)、:first选择器：将ul里面的第一个li背景设为绿色。
// $("ul li:first").css({"background":"green"})
// 2)、:last选择器：将ul里面的最后一个li背景设为蓝色。
// $("ul li:last").css({"background":"blue"})
// 3)、:even选择器：将ul里面下标为偶数的li背景设为绿色。
// $("ul li:even").css({"background":"green"})
// 4)、:odd选择器：将ul里面下标为奇数的li背景设为红色。
// $("ul li:odd").css({"background":"pink"})
// 5)、:lt选择器：将ul里面下标小于3的li元素的背景设为绿色。
// $("ul li:lt(3)").css({"background":"green"})
// 6)、:gt选择器：将ul里面下标大于3的li元素背景设为绿色。
// $("ul li:gt(3)").css({"background":"green"})
// 下标大于1 小于4
// $("ul li:lt(4):gt(1)").css({"background":"pink"})
// 7)、:eq选择器：将table表格里面的第二行的背景设为黄色。
// $("#mytable tr").eq(1).css({"background":"yellow"})
})
</script>
</head>
<body>
<ul id="ua">
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
<li>第五个li</li>
<li>第六个li</li>
<li>第7个li</li>
<li>第8个li</li>
<li>第9个li</li>
</ul>
<table id="mytable" border="1px" width="300" style="text-align: center;" height="200px">
<tr>
<td>一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
<tr>
<td>三行一列</td>
<td>三行二列</td>
<td>三行三列</td>
</tr>
</table>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
