摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery选择器-练习作业</title><script type="text/javascript" src="jquery-3.3.1.min.js&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery选择器-练习作业</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
#box1-1,.box1-2{width: 100px;height: 50px;background-color: pink;margin:5px;}
</style>
</head>
<body>
<script type="text/javascript">
// 文档就绪函数，当页面完全加载完成后才启用js代码
// $(selector).action() 解析：申明变量关键字(选择器).操作方法()
$(document).ready(function(){
//1.基本选择器
// $("#id") 匹配id值
// $(".class") 匹配class值
// $("element") 匹配标签名
// $("*") 匹配所有元素
// $("#id,.class,element") 匹配多个选择器
$('#box1-1').css('background','red')
$('.box1-2').css('background','blue')
$('span').css('background','red')
$('*').css('font-family','宋体')
$('#box1,.box2,span').css('color','pink')
//2.层级选择器
$('ul>li').css('color','pink')//匹配ul下的一级所有li，祖先元素>子级元素
$('ul li').css('color','red')//匹配ul下的所有级的li，祖先元素 后代元素
$('label+input').css('height','50px')//匹配紧跟着前一个元素的后一个元素
$('label~input').css('background','pink')//匹配前一个标签后的所有符合条件的标签
//3.顺序选择器
$('p:first').css('color','pink')//选择第一个p标签
$('p:last').css('color','pink')//选择最后一个p标签
//2.比较选择器,gt大于，lt小于，eq等于，从0开始
$('p:gt(1)').css('color','red')//从第1+1=2个元素开始改变css样式
//3.奇偶数选择器 odd奇数，even偶数 从0开始
$('p:odd').css('font-size','24px')
$('p:even').css('font-size','14px')
//4.非，匹配不是selector的所有元素
$('p:not(#box)').css('color','blue')
//4.内容选择器
$('div:contains(jack)').css('background','red') //匹配包含特定文本的
$('div:has(span)').css('background','blue') //匹配包含特定选择器元素的元素
$('div:empty').css('background','grey') //匹配不含有内容的元素
$('div:parent').css('background','green') //匹配含有元素或文本的元素
//5.属性选择器
$('input[type]').css('background','pink')//匹配包含给定属性的元素
$('input[type=password]').css('background','red')//匹配属性是特定值
$('input[type!=password]').css('background','blue')//匹配属性不是特定值
$('input[type ^=te ]').css('background','green')//匹配属性以特定字符开始的
$('input[type $=xt]').css('background','grey')//匹配属性以特定字符结尾的
$('input[type *=xt]').css('background','yellow')//匹配属性包含特定字符
$('input[id][name *=n]').css('background','black')//符合选择器
//6.表单选择器
// $(':enabled').css('background','pink')//所有激活的input元素
// $(':disabled').css('background','red')//所有禁用的input元素
// $(':selected').css('background','pink')//所有被选取的元素，针对select元素
$(':checked').parent().css('color','blue')//所有被选中的input元素，加入parent()表示找到上一层元素加入css效果
})
$(document).ready()
</script>
<h1>1.jQuery基本选择器</h1>
<div id="box1-1">1.这是box1-1</div>
<div>1.这是box1-2</div>
<span>1.大家好，这是一个span</span>
<hr>
<h1>2.jQuery层级选择器</h1>
<ul>
<li>1</li>
<li>1</li>
<div>
<li>2</li>
</div>
<li>1</li>
</ul>
<form action="">
<label for="">Name</label>
<input type="text">
<button>Button</button>
<input type="" name="">
</form>
<hr>
<h1>3.jQuery顺序选择器</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p id="box">6</p>
<hr>
<h1>4.jQuery内容选择器</h1>
<div>jack</div>
<div><span>wang</span></div>
<div>zheng</div>
<div>hu</div>
<div></div>
<div><b></b></div>
<hr>
<h1>5.jQuery属性选择器</h1>
<input type="text" value="1" id='1' name='n'>
<input value="2">
<input type="text" value="3">
<input type="password" value="ppppp">
<hr>
<h1>6.jQuery表单选择器</h1>
<form>
<input type="text" value="111">
<input type="text" value="111">
<input type="text" disabled="disabled" value="111">
<input type="text" value="111">
<select>
<option value="1">1</option>
<option selected>22222</option>
</select>
<hr>
<label><input type="checkbox" checked>看</label>
<label><input type="checkbox">听</label>
<label><input type="checkbox">说</label>
</form>
<hr>
<h1>以上任意选择器的效果展示需要注释掉其它选择器的jQuery代码即可</h1>
</body>
</html>
批改老师：韦小宝批改时间：2019-02-23 13:49:54
老师总结：选择器的重要性相信我不讲你也很清楚 选择器也是很基础很重要的一个知识点
