摘要：jquery的选择器有基本选择器，顺序选择器，内容选择器，层级选择器，属性选择器，表单选择器等基本选择器通过元素标签名，元素Id，Class来查找DOM元素，例如$('li').css('list-style','none') $('#box').css('list-style','none') $(&
jquery的选择器有基本选择器，顺序选择器，内容选择器，层级选择器，属性选择器，表单选择器等
基本选择器通过元素标签名，元素Id，Class来查找DOM元素，例如
$('li').css('list-style','none')
$('#box').css('list-style','none')
$('.box').css('list-style','none')顺序选择器有：
$('div:first').css('background','red') 第一个
$('div:last').css('background','red') 最后一个
$('div:gt(1)').css('background','red') 大于1
$('div:lt(1)').css('background','red') 小与1
$('div:eq(1)').css('background','red') 等于1
$('div:odd').css('background','red') 偶数
$('div:even').css('background','red')奇数
$('div:not（1）').css('background','red') 不等于1
等级层级选择器
<script type="text/javascript">
$(document).ready(function(){
$('ul>li').css('list-style','none')//只能匹配一级的子元素 父子关系
$('ul li').css('list-style','none')//可以匹配所有元素只要是后代就行
$('label+input').css('height','50px')//只能匹配紧跟在label底下的input元素，中间不能有元素
$('label~input').css('background','red')
//匹配label后面的input元素
})内容选择器
<script type="text/javascript">
$(document).ready(function(){
$('div:contains(jion)').css('background','red')// 匹配含特定内容的元素
$('div:has(span)').css('color','red')//包含特定选择器的元素$('span'）
$('div:empty').css('background','pink')
// 配不含内容的元素
$('div:parent').css('background','blue')
// 匹配含内容的元素
})属性选择器
<script type="text/javascript">
$(document).ready(function(){
$('input[type]').css('background','pink')
// 匹配含有特定属性的元素
$('input[type=button]').css('background','blue')
//匹配属性值为特定些值的元素
$('input[type!=button]').css('background','red')//匹配属性不含指定值或不是某些值的元素
$('input[type^=t]').css('background','red')//匹配以某些值开始的元素
$('input[type$=n]').css('background','red')//匹配以某些值结尾的元素o
$('input[type*=n]').css('background','red')//匹配属性值以包含某些值的元素
$('input[id] [name*=n]').css('background','red')
//符合选择器 需要同时满足多个元素匹配属性值以包含某些值的元素
})
</script>表单选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<script type="text/javascript" src="jquery-3.3.1.min.js">
</script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$(':enabled').css('background','pink')// 匹配激活的元素
$(':disabled').css('background','red')// 匹配未激活的元素
$(':selected').css('color','red')// 匹配被默认选择的元素
$(':checked').parent().css('color','red')// 匹配被默认选择的元素
})
</script>
<form >
输入框1<input type="text" name=""><br>
输入框2<input type="text" name=""><br>
输入框3<input type="text" name="" disabled><br>
输入框4<input type="text" name=""><br>
<!-- <select >
<option >双鱼</option>
<option >射手</option>
<option selected>天蝎</option>
<option >狮子</option>
</select> -->
爱好：
<label><input type="checkbox" >看书</label>
<label><input type="checkbox" checked>游戏</label>
<label><input type="checkbox" >游泳</label>
</form>
</body>
</html>
