abstract：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>jquery中的選擇器</title> <script type="text/javascript" src="jquery-3.4.1.js"&
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery中的選擇器</title>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<style type="text/css">
#id0{width: 100px;height: 100px;background-color: #ccc;margin: 20px;}
.cont0{width: 100px;height: 100px;margin: 20px;background-color: #ccc;}
</style>
</head>
<body>
<script type="text/javascript">
//基本選擇器
//語法
//$('#id名')ID選擇器
//$('.class')class選擇器
//$('elemen')標簽選擇器
//$('*')匹配所有元素
//$('#ID,class名,element')多項選擇器
$(document).ready(function(){
$('.class0').click(function(){
$('#id0').css('background-color','red')
});
//層級選擇器
//$('父級元素 > 子級元素') 給定的父級元素下匹配所有的子級元素
//$('祖先元素 后代元素') 給定的祖先元素下匹配所有的后代元素
//$('prev + next') 匹配緊跟在prev元素后面的next元素
//$('prev ~ siblings') 匹配prev元素后面所有的siblings元素
$('ul>li').css('list-style','none');
$('ul li').css('color','red');
//順序選擇器
//1、順序
// $(':first')第一個元素
// $(':last')最后一個元素
// 2、比較
// $(':gt(x)')表示大于x的元素
// $(':lt(x)')表示小于x的元素
// $(':eq(x)')表示等于x的元素
// 3、奇偶數(shù)
// $(':odd')奇數(shù)順序
// $(':exen')偶數(shù)順序
// 4、非
// $(':ont(selector)')匹配不是selector的所有元素
$('p:first').css('color','blue');
$('p:gt(3)').css('font-size','40px');
$('p:odd').css('font-weight','bold');
// 內容選擇器
// 語法
// $(':contains(text)')匹配包含給定文本的元素
// $(':has(selector)')匹配包含特殊選擇器元素的元素
// $(':empty')匹配不含有內容的元素（ 即 不包含子元素或者文本的空元素）
// $(':parent')匹配含有子元素或者文本的元素
$('div:contains(jion)').css('background-color','red');
$('div:empty').css('background-color','#203456');
// 屬性選擇器
// 語法
// $('[attribute]')匹配包含給定屬性的元素
// $('[attribute=value]')匹配給定屬性是某個特定值的元素
// $('[attribute!=value]')匹配所有不含有指定值的屬性，或者說是屬性不等于特定值的元素
// $('[attribute^=value]')匹配給定屬性是以某些值開始的元素
// $('[attribute$=value]')匹配給定屬性是以某些值結尾的元素
// $('[attribute*=value]')匹配給定屬性包含某些值的元素
// $('attribute[1] attribute[2] attribute[3]')復合選擇器，需要同時滿足多個條件時使用
$('#form input[type]').css('background-color','red');
$('#form input[type=button]').css('background-color','blue');
// 表單選擇器
// 語法
// $(':enabled')所有激活的input元素（可以使用的input元素）
// $(':disabled')所有禁用的input元素（不可以使用的input元素）
// $(':selected')所有被選取的元素，針對于select元素
// $(':checked')所有被選中的input元素
$('#form1 input:enabled').css('background-color','red');
$('#form1 input:checked').parent().css('color','blue')
})
</script>
<!-- 基本選擇器 -->
<div id="id0"></div>
<button class="class0">點擊</button>
<!-- 層級選擇器 -->
<ul>
<li>1</li>
<li>1</li>
<div>
<li>2</li>
</div>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<!-- 順序選擇器 -->
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<!-- 內容選擇器 -->
<div class="cont0">jack</div>
<div class="cont0">mark</div>
<div class="cont0">jion</div>
<div class="cont0">blus</div>
<div class="cont0"></div>
<!-- 屬性選擇器 -->
<form id="form">
<label>1</label><input type="text" name=""><br>
<label>2</label><input type="password" name=""><br>
<label>3</label><input name=""><br>
<label>4</label><input type="button" value="點擊"><br>
</form>
<!-- 表單選擇器 -->
<form id="form1">
輸入框1<input type="" name=""><br>
輸入框2<input type="" name=""><br>
輸入框3<input type="" name="" disabled=""><br>
輸入框4<input type="" name=""><br>
<label><input type="checkbox" name="">足球</label>
<label><input type="checkbox" name="" checked>籃球</label>
<label><input type="checkbox" name="">跑步</label>
</form>
</body>
</html>
Correcting teacher：查無此人Correction time：2019-06-14 14:21:05
Teacher's summary：完成的不錯。js的動畫很難掌握，要堅持。繼續(xù)加油。