jQuery中常用的选择器,有
$('标签名') 标签选择器
$('#id名') id选择器
$('.class名') 类选择器
层次选择器;
$('A B') 获得A元素内部的所有子元素B
$('A > B') 获得A元素内部的第一层所有子元素B
$('A + B') 获得A元素同级下一个B元素
$('A ~ B') 获得A元素后面的所有同级B元素
属性选择器;
$('A[属性名]') 获得有属性名的A元素‘;
$('A[属性名=值]') 获得属性名 等于 值的A元素;
$('A[属性名!=值]') 获得属性名 不等于 值的A元素;
过滤选择器;
$('A:first') 过滤出第一个;
$('A:last') 过滤出最后一个;
$('A:not(选择器)') 排除指定的元素;
第一排使用 层级选择器,第二排按钮 使用过滤选择器,来实现需求;
(1)创建视图;
(2)使用选择器完成需求;
(1)head部分;
<head>
<meta charset="UTF-8">
<title>选择器</title>
<script src="../../../config/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("div").css("background", "red");
});
$("#b2").click(function () {//
$("body>div").css("background", "red");
});
var inputs = $("input");
inputs.eq(2).click(function () {
$("#one+div").css("background", "red")
});
inputs.eq(3).click(function () {
$("#two~div").css("background", "red")
});
});
</script>
<!--属性选择器-->
<script type="text/javascript">
</script>
<!--过滤选择器 "A:first" ,"A:not(选择器)"-->
<script type="text/javascript">
$(function () {
var inputs=$("input");
inputs.eq(4).click(function () {//这是下标为4的input标签
$("div:first").css("background","blue");
});
inputs.eq(5).click(function () {//这是下标为5的input标签
$("div:last").css("background","blue");
});
inputs.eq(6).click(function () {//这是下标为6的input标签
$("div:not(.one)").css("background","blue");
});
});
</script>
<style type="text/css">
span, div {
width: 150px;
height: 150px;
float: left;
border: black solid 1px;
margin: 10px;
background-color: lightskyblue;
}
.mini {
width: 50px;
height: 50px;
float: left;
border: black solid 1px;
background-color: pink;
}
</style>
</head>
(2)body部分;
<body>
<input type="button" value="改变所有 <div>bgcolor红色" id="b1">
<input type="button" value="改变第一个子 <div>bgcolor红色" id="b2">
<input type="button" value="改变 id=one 的下一个 <div>bgcolor红色" id="b3">
<input type="button" value="改变 id=two后面的所有兄弟<div>bgcolor红色" id="b4">
<hr/>
<input type="button" value=" 改变第一个 div 元素的背景色为 蓝色" id="bt1">
<input type="button" value=" 改变最后一个 div 元素的背景色为 蓝色" id="bt2">
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 蓝色" id="bt3">
<hr/>
<div id="one">
<div class="mini">1-1</div>
</div>
<div id="two">
<div class="mini">2-1</div>
<div class="mini">2-2</div>
</div>
<div class="one">
<div class="mini">3-1</div>
<div class="mini">3-2</div>
</div>
<div class="one">
<div class="mini">4-1</div>
<div class="mini">4-2</div>
<div class="mini">4-3</div>
</div>
<span class="spanone">span</span>
</body>
筛选选择器;
jq对象.parent() 当前元素的亲生父级元素
jq对象.parents() 当前元素的所有父级元素
jq对象.siblings() 选出除了自己以外的所有同级元素,兄弟姐妹选择器
jq对象.children() 当前元素的第一层子元素
jq对象.find() 当前元素的指定子级元素
表单属性选择器;
$(':enabled') 选择可用的input标签
$(':disabled') 选择不可用的input标签
$(':checked') 选择选中的radio或者checkbox
$(':selected') 选择选中的<select>
案例,全选全不选;
使用 prop() 的形式来获取,比如表单元素的checked属性。
使用隔行换色 ,$(" tr:gt(1):even ")来跳过前两行;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../config/jquery-3.3.1.js" type="text/javascript"></script>
<!--全选,全不选-->
<script type="text/javascript">
$(function () {
$("#selectAll").click(function () {
$(".itemSelect").prop("checked",this.checked);
});
$("tr:gt(1):even").css("background","yellow");
$("tr:gt(1):odd").css("background","skyblue");
});
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td>
</tr>
<tr>
<th>全选<input type="checkbox" id="selectAll" ></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
</table>
</body>
</html>