摘要： jQuery共含有6类选择器，分别是基本选择器、层级选择器、顺序选择器、内容选择器、属性选择器和表单选择器这六类。由这些选择器，可以更方便的对html中的各类元素进行相关的操作。1.基本选择器语法及代码示例：//$('#id名')根据id名来匹配元素 $('#box1').css('background-col
jQuery共含有6类选择器，分别是基本选择器、层级选择器、顺序选择器、内容选择器、属性选择器和表单选择器这六类。由这些选择器，可以更方便的对html中的各类元素进行相关的操作。
1.基本选择器
语法及代码示例：
//$('#id名')根据id名来匹配元素
$('#box1').css('background-color','pink')
//$('.class名')根据class名来匹配元素
$('.box2').css('background-color','yellow')
//$('element')根据给定的标签来匹配元素
$('span').css('color','green')
//$('*')匹配所有元素
$('*').css('font-family','宋体')
//$('#id名,.class名,element')匹配到页面多个选择器
$('#box1,.box2,span').css('color','pink')完整HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;background-color: #ccc;margin-top: 20px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('#box1').css('background-color','pink')
$('.box2').css('background-color','yellow')
$('span').css('color','green')
$('*').css('font-family','黑体')
$('#box1,.box2,span').css('color','blue')
})
</script>
<div id="box1">大家好</div>
<div class="box2">我是渣渣辉</div>
<span>php中文网</span>
</body>
</html>2.层级选择器
语法及代码示例：
//给定父级元素下匹配所有的子元素:$('父级元素>子级元素')
$('ul>li').css('list-style','none')
//给定的祖先元素下匹配所有的后代元素:$(祖先元素 后代元素)
$('ul li').css('list-style','none')
//匹配紧跟在prev元素后面的next元素:$('prev+next')(同级的元素)
$('input + button').css('background-color','#8CC2FD')
//匹配prev元素后面所有的siblings元素:$('prev~siblings')
$('label ~ input').css('background-color','#A3F2C1')完整HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>层级选择器</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('ul li').css('list-style','none')
$('input + button').css('background-color','#8CC2FD')
$('label ~ input').css('background-color','#A3F2C1')
})
</script>
<ul>
<li>17岁那年不要脸参加了挑战</li>
<li>明星也有训练班</li>
<li>短短一年太新鲜</li>
<div>
<li>记得四哥发哥都已见过面</li>
</div>
<li>后来荣升主角太突然</li>
<li>廿十九岁颁奖的晚宴</li>
<li>fans太疯癫</li>
<li>来听我唱一段情歌一曲</li>
</ul>
<form>
<label>姓名</label>
<input type="" name="" value="千">
<button style="margin-top:10px;">按钮</button>
<input type="" name="">
<input type="" name="">
<input type="" name="">
</form>
</body>
</html>3.顺序选择器
语法及代码示例：
//1.顺序:
//第一个元素:$(':first')
$('p:first').css('color','red')
//最后一个元素:$(':last')
$('p:last').css('color','blue')
//2.比较
//表示大于值x的元素:$('p:gt(x)') (x的顺序从0开始)
$('p:gt(2)').css('font-size','20px')
//表示小于值x的元素:$('p:lt(x)')
$('p:lt(1)').css('font-weight','bold')
//表示等于值x的元素:$('p:eq(x)')
$('p:eq(2)').css('color','orange')
//3.奇偶数
//奇数顺序:$('p:odd')
$('p:odd').css('background',"#ccc")
//偶数顺序:$('p:even')
$('p:even').css('background',"#F9EFCC")
//4.非
//匹配不是selector的所有元素:$(':not(selector)')
$('p:not(#box)').css('background','pink')完整HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>顺序选择器</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('p:first').css('color','red')
$('p:last').css('color','blue')
$('p:gt(2)').css('font-size','20px')
$('p:lt(1)').css('font-weight','bold')
$('p:eq(2)').css('color','orange')
$('p:odd').css('background',"#ccc")
$('p:even').css('background',"#F9EFCC")
$('p:not(#box)').css('background','pink')
})
</script>
<p id="box">advisory</p>
<p>explicit</p>
<p>content</p>
<p>America</p>
<p>captain</p>
<p>iron man</p>
</body>
</html>4.内容选择器
语法及代码示例：
//匹配含给定文本(text)的元素:$(':contains(text)')
$('div:contains(邓二)').css('background','orange')
//匹配包含特定选择器的元素:$(':has(selector)')
$('div:has(span)').css('background','blue')
//匹配不含有内容的元素:$(':empty')(即不含子元素或者文本的空元素)
$('div:empty').css('background','pink')
//匹配含有子元素或者文本的元素:$(':parent')
$('div:parent').css('background','red')完整HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>内容选择器</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;background: #ccc;margin-top:5px }
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('div:contains(邓二)').css('background','orange')
$('div:has(span)').css('background','blue')
$('div:empty').css('background','pink')
$('div:parent').css('background','red')
})
</script>
<div>王一</div>
<div>邓二</div>
<div></div>
<div>陶三</div>
<div>雷四</div>
<div><span>宋五</span></div>
<div><b></b></div>
</body>
</html>5.属性选择器
语法及代码示例：
//匹配包含给定属性的元素:$('[属性名]')
$('input[type]').css('background','pink')
//匹配给定属性是某个特定值的元素:$('[attribute = value]')
$('input[type = button]').css('background','greenyellow')
//匹配所有不含有特定值的属性,或者说是不等于特定值的属性:
//$('[attribute!=value]')
$('input[type != text]').css('color','red')
//匹配给定属性是以某些值开始的元素:$('[attribute^= value]')
$('input[type ^= t]').css('background','green')
//匹配给定属性是以某些值结尾的元素:$('[attribute $= value]')
$('input[type $= d]').css('background','blue')
//匹配给定属性包含某些值的元素:$('[attribute *= value]')
$('input[type *= o]').css('background','yellow')
//符合选择器,需要同时满足多个条件时使用:
//$('attrSel[1] attrSel[1] attrSel[1]')其中用的最多的是复合选择器,需熟练掌握
完整HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>属性选择器</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
// $('input[type]').css('background','pink')
// $('input[type = button]').css('background','greenyellow')
// $('input[type != text]').css('color','red')
// $('input[type ^= t]').css('background','green')
// $('input[type $= d]').css('background','blue')
// $('input[type *= o]').css('background','yellow')
$('input[id][name *= n]').css('background','red')
})
</script>
<form>
<label>1 </label><input type="text" name="new" value="aaa" id="woman"><br>
<label>2 </label><input type="password" name="new1" value="bbb" id="man"><br>
<label>3 </label><input type="button" name="" value="ccc" id="boy"><br>
<label>4 </label><input name="" value="zzz" id="girl"><br>
</form>
</body>
</html>6.表单选择器
语法及代码示例：
//所有激活的input元素(可以使用input元素):$(':enabled')
$(':enabled').css('background','pink')
//所有禁用的input元素(不可以使用input元素):$(':disabled')
$(':disabled').css('background','red')
//所有被选取的元素,针对于select元素:$(':selected')
$(':selected').css('color','red')
//所有被选中的input元素:$(':checked')
$(':checked').parent().css('color','blue')完整HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>表单选择器</title>
<script type="text/javascript" src="jquery-3.3.1.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','blue')
})
</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 selected>双子座</option>
<option>双鱼座</option>
<option>射手座</option>
</select> -->
<br>
爱好 :
<label><input type="checkbox" name="">看书</label>
<label><input type="checkbox" name="" checked>打球</label>
<label><input type="checkbox" name="">游戏</label>
</form>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-26 16:20:14
老师总结：对于这些选择器, 想过如何用原生来实现过吗? 对于一些特殊选择器,nth-of-type等,这些用jQuery怎么做?
