摘要：<!DOCTYPE html> <html> <head> <meta charset="uft-8"> <title>jQuery选择器</title> <script type="text/javascri
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<title>jQuery选择器</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style>
div{width:100px; height:100px; background: pink; margin:25px;}
</style>
</head>
<body>
1. 基本选择器
语法
$（"#ID名"）根据ID匹配到元素
$（".class名"）根据class匹配到元素
$（"element"）根据标签名匹配到元素
$（"*"）匹配所有元素
$（"#id,.class,element"）匹配到页面中多个元素<br>
<!-- <script type="text/javascript">
$(document).ready(function(){
$("#box_1").css("background","yellow")
$(".box_2").css("background","red")
$("b").css("background","red")
$("*").css("font-size","30px")
$("#box_1,.box_2,b").css("float","left")
})
</script>
<div id="box_1">ID选择器</div>
<div class="box_2">class选择器</div>
<b>标签选择器</b> -->
<!-- <br> 怕麻烦，偷个懒，就不清除浮动了
<br>
<br>
<br> -->
2. 层级选择器（相当于父类和子类的元素关系）
给定的父级元素下匹配所有的子元素:$("父级元素>子级元素")
给定的祖先元素下匹配所有的后代元素：$("祖先元素 后代元素")
匹配紧跟在prev元素后面的next元素：$（"prev+next"）(同级的元素)
匹配prev元素后面所有的siblings元素：$("prev~siblings")<br>
<!-- <script type="text/javascript">
$(document).ready(function(){
$("ul>li").css("list-style","none")
$("ul li").css("color","red")
$("label+input").css("height","50px")
$("label~input").css("background","red")
})
</script>
<ul>
<li>1</li>
<li>2</li>
<div>
<li>6</li>
</div>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<from>
<label>姓名</label>
<input type="" name="">
<input type="" name="">
<input type="" name="">
</from><br> -->
3. 顺序选择器
3.1 顺序
$（":first"）第一个元素
$（":last"）最后一个元素
3.2 比较 （x代表顺序）
$（":gt(x)"）表示大于值x的元素
$（":lt(x)"）表示小于值x的元素
$（":eq(x)"）表示等于值x的元素
3.3 奇偶数
$（":odd"）奇数顺序
$（":even"）偶数顺序
3.4 非
$（":not(selector)"）匹配不是selector的所有元素<br>
<!-- <script type="text/javascript">
$(document).ready(function(){
$("p:first").css("color","red")
$("p:last").css("color","blue")
$("p:gt(4)").css("font-size","50px")
$("p:lt(1)").css("font-size","50px")
$("p:eq(3)").css("font-size","60px")
$("p:odd").css("background","yellow")
$("p:even").css("background","pink")
// $("p:not(#box_3)").css("color","blue")
})
</script>
<p id="box_3">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p> -->
4. 内容选择器
$（":contains(text)"）匹配包含给定文本（text）的元素
$（":has(selector)"）匹配包含特定选择器元素的元素
$（":empty"）匹配不含有内容的元素（即 不包含子元素或文本的空元素）
$（":parent"）匹配含有子元素或文本的元素<br>
<!-- <script type="text/javascript">
$(document).ready(function(){
$("div:contains(zhao)").css("background","red")
$("div:has(span)").css("background","blue")
$("div:empty").css("background","yellow")
// $("div:parent").css("background","black")
})
</script>
<div>zhao</div>
<div><span>qian</span></div>
<div></div>
<div>li</div> -->
5. 属性选择器
$（"[attribute]"）匹配包含给定属性的元素
$（"[attribute=vable]"）匹配给定属性是某个特定值的元素
$（"[attribute!=vable]"）匹配所有不含有指定值的属性，或者说是属性不等于特定值的元素
$（"[attribute^=vable]"）匹配给定属性是以某些值开始的元素
$（"[attribute$=vable]"）匹配给定属性是以某些值结尾的元素
$（"[attribute*=vable]"）匹配给定属性包含某些值的元素
$（"attrSel[1]bttriSel[1] attrSel[1]"）复合选择器，需要同时满足多个条件时使用<br>
<!-- <script type="text/javascript">
$(document).ready(function(){
$("input[type]").css("background","black")
$("input[type=text]").css("background","blue")
$("input[type!=password]").css("background","red")
$("input[type^=t]").css("background","yellow")
$("input[type$=d]").css("background","#ccc")
$("input[type*=o]").css("background","yellow")
$("input[id][type*=o]").css("background","black")
})
</script>
<from>
<label>1</label><input name="" id="">
<label>2</label><input type="text" name="zhanghao" id="">
<label>3</label><input type="password" name="mima" id="">
<label>4</label><input type="button" value="按钮" id="">
</from> -->
6. 表单选择器
$（":enabled"）所有激活的input元素（可以使用的input元素） enabled：启用
$（":disabled"）所有禁用的input元素（不可以使用的input元素） disabled:残废的
$（":selected"）所有被选取的元素，针对于select元素 select:选择（表单选择框） option：选项 selected：选中
$（":checked"）所有被选中的input元素<br>
<script type="text/javascript">
$(document).ready(function(){
// $(":enabled").css("background","pink")
// $("input:disabled").css("background","blue")
// $(":selected").css("color","red")
$(":checked").parent().css("color","red") 你不懂的//匹配每个:checked 元素的父元素
})
</script>
<from>
输入框1<input type="" name=""><br>
输入框2<input type="" name=""><br>
输入框3<input type="" name="" disabled="disabled"><br>
<select>
<option>鼠</option>
<option selected>牛</option>
<option>虎</option>
</select>
<br>
学科：
<label><input type="checkbox" name="">语文</label>
<label><input type="checkbox" name="">数学</label>
<label><input type="checkbox" name="" checked>英语</label>
</from>
</body>
<html>
批改老师：灭绝师太批改时间：2019-01-11 14:32:56
老师总结：$(":checked").parent()//匹配每个:checked 元素的父元素
