摘要：<!DOCTYPE html> <html> <head> <title>选择器基础巩固</title> <meta charset="utf-8"> <script type="text/javascript" src="j
<!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">
.a{width:100px;height:100px;background:#000;}
.b{width:100px;height:100px;background:#000;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//基本选择器
// $('#a').css('height','200px')
// $('.b').css('width','200px')
// $('p').css({'fontSize':'20px','color':'red'})
// $('*').css('background','blue')
// $('#a,.b,p').css('background','blue')
// 层级选择器
// $('ul>li').css('list-style','none')
// $('ul li').css('list-style','none')
// $('div+li').css('list-style','none')
// $('li~li').css('list-style','none')
//
//
// 顺序选择器
// $('input:first').css('background','red')
// $('input:last').css('background','red')
// $('input:gt(1)').css('background','red')
// $('input:lt(1)').css('background','red')
// $('input:eq(1)').css('background','red')
// $('input:odd').css('background','red')
// $('input:even').css('background','red')
// $('input:not(.a)').css('background','red')
//内容选择器
// $('p:contains(2)').css('fontSize','20px')
// $('p:has(i)').css('background','blue')
// $('p:empty').css('background','blue')
// $('p:parent').css('background','blue')
// 属性选择器
// $('input[value]').css('background','#000')
// $('input[value=7]').css('background','#000')
// $('input[value!=7]').css('background','#000')
// $('input[value^=1]').css('background','#000')
// $('input[value $=1]').css('background','#000')
// $('input[value *=1]').css('background','#000')
// $('input[value*=1][type][name] ').css('background','#000')
//表单选择器
// $('input:enabled').css('background','#000')
// $('input:disabled').css('background','#000')
// $(':selected').css('color','red')
// $(':checked').parent().css('color','red')
})
</script>
<!-- //基本选择器
<div id="a"></div>
<br>
<div class="b"></div>
<p>123456</p> -->
<!-- 层级选择器 -->
<!-- <ul>
<li>111</li>
<li>000</li>
<li>222</li>
<div>
<li>456</li>
</div>
<li>333</li>
<li>444</li>
<li>555</li>
</ul> -->
<!-- 顺序选择器 -->
<!-- <input type="" name="" class="a"><br>
<input type="" name=""><br>
<input type="" name=""><br>
<input type="" name=""><br>
<input type="" name=""><br>
<input type="" name=""><br>
-->
<!-- 内容选择器 -->
<!-- <p>1</p>
<p>2</p>
<p><i>3</i></p>
<p>4</p>
<p>5</p>
<p class="a"></p>
<p class="b"></p>
<p><span>1</span></p>
-->
<!-- 属性选择器 -->
<!-- <input type="" value="11"><br>
<input type="" name="" value="21"><br>
<input name="" value="13"><br>
<input name="" value="27"><br>
<input type="" name="" value="81"><br>
<input name="" value="93"><br>
<input type="" name="" ><br>
<input type="" name="" ><br>
<input type="" name="" > -->
<!-- 表单选择器 -->
<!-- <input type="" name=""><br>
<input type="" name=""><br>
<input type="" name="" disabled><br>
<input type="" name=""><br>
<input type="" name=""><br>
<select>
<option>1</option>
<option selected>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
<label><input type="checkbox" name="">123</label>
<label><input type="checkbox" name="">456</label>
<label><input type="checkbox" name="" checked>789</label>
<label><input type="checkbox" name="">159</label>
-->
</body>
</html>
批改老师：韦小宝批改时间：2018-11-16 16:41:10
老师总结：选择器是最基础的东西！课后还要多多练习！继续加油吧！
