サマリー：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
/* 設置大div和里面嵌套的6個小div */
#div1{width: 900px;height: 600px;background-color: #D8E389;margin: 10px auto;}
.t{float: left;width: 280px;height: 280px;background-color:#FCFCFC; margin: 10px;}
</style>
<title>選擇器的練習</title>
</head>
<body>
<script type="text/javascript">
// 文檔就緒函數(shù)
$(document).ready(function(){
// Button按鈕的格式
$('input[type=button]').css({'width':'70px','margin':'5px'})
$("#bt1-1").click(function(){
$("#text1").css('background','red')
})
$('#bt1-2').click(function(){
$('.text2').css('background','red')
})
$('#bt1-3').click(function(){
$('input').css('background','red')
})
$('#bt1-4').click(function(){
$('*').css('background','#fff')
})
$('#bt1-5').click(function(){
$('#div1,input[type=button]').css('background','#D8E389')
})
$('#bt2-1').click(function(){
$('#pre1>input').css('margin','5px')
})
$('#bt2-2').click(function(){
$('#pre1 input').css('background','red')
})
$('#bt2-3').click(function(){
$('#pre1+input').css('background','red')
})
$('#bt2-4').click(function(){
$('#pre1~input').css('background','pink')
})
$('#bt3-1').click(function(){
$('#div3 li:first').css('background','red')
})
$('#bt3-2').click(function(){
$('#div3 li:last').css('background','red')
})
$('#bt3-3').click(function(){
$('#div3 li:gt(3)').css('background','blue')
})
$('#bt3-4').click(function(){
$('#div3 li:lt(5)').css('background','red')
})
$('#bt3-5').click(function(){
$('#div3 li:eq(3)').css('background','green')
})
$('#bt3-6').click(function(){
$('#div3 li:odd').css('background','#fff')
})
$('#bt3-7').click(function(){
$('#div3 li:even').css('background','#0E1112')
})
$('#bt3-8').click(function(){
$('#div3 li:not(.3)').css('background','red')
})
$('#bt4-1').click(function(){
$('#div4 li:contains(b)').css('background','blue')
})
$('#bt4-2').click(function(){
$('#div4-2:has(p)').css('color','green')
})
$('#bt4-3').click(function(){
$('#div4 li:empty').css('background','#ccc')
})
$('#bt4-4').click(function(){
$('#div4 li:parent').css('background','red')
})
$('#bt5-1').click(function(){
$('#div5 input[name]').css('background','pink')
})
$('#bt5-2').click(function(){
$('#div5 input[name=1]').css('background','green')
})
$('#bt5-3').click(function(){
$('#div5-1 input[name!=1]').css('background','blue')
})
$('#bt5-4').click(function(){
$('#div5-1 input[name^=1]').css('background','red')
})
$('#bt5-5').click(function(){
$('#div5-1 input[name$=1]').css('background','#ccc')
})
$('#bt5-6').click(function(){
$('#div5-1 input[name*=3]').css('background','#0E1112')
})
$('#bt5-7').click(function(){
$('#div5-1 input[name*=2][name*=3]').css('background','red')
})
$('#bt6-1').click(function(){
$('#div6-1 input:enabled').attr('disabled','disabled')
})
$('#bt6-2').click(function(){
$('#div6-1 input:disabled').attr('disabled',false)
})
$('#bt6-3').click(function(){
$('#div6-1 :selected').css('background','black')
})
$('#bt6-4').click(function(){
$('#div6-2 :checked').parent().css('background','red')
})
})
</script>
<div id="div1">
<div id="div2">
<pre>
基本選擇器<br>
<input type="text"id="text1"><br>
<input type="text"class="text2"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
</pre>
<input type="button" value="id"id="bt1-1">
<input type="button" value="class"id="bt1-2"><br>
<input type="button" value="標簽名"id="bt1-3">
<input type="button" value="匹配所有"id="bt1-4">
<input type="button" value="多選擇器"id="bt1-5">
</div>
<div>
<pre id="pre1">
層級選擇器 <br> <input type="text">
<input type="text">
<input type="text">
<input type="text">
</pre>
<input type="button" value="父>子"id="bt2-1">
<input type="button" value="祖先-后代"id="bt2-2"><br>
<input type="button" value="同級"id="bt2-3">
<input type="button" value="之后所有"id="bt2-4">
</div>
<div id="div3">
順序選擇器
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<input type="button" value="第一個"id="bt3-1">
<input type="button" value="最后"id="bt3-2">
<input type="button" value="大于3的"id="bt3-3">
<input type="button" value="小于5的"id="bt3-4">
<input type="button" value="等于3的"id="bt3-5">
<input type="button" value="奇數(shù)"id="bt3-6">
<input type="button" value="偶數(shù)"id="bt3-7">
<input type="button" value="非"id="bt3-8">
</div>
<divid="div4">
內容選擇器<br>
<div id="div4-1">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li></li>
<li>e</li>
</div>
<div id="div4-2">
<p>111111111111</p>
<p>222222222222</p>
</div>
<input type="button" value="包含b的"id="bt4-1">
<input type="button" value="包含p標簽"id="bt4-2">
<input type="button" value="沒有內容"id="bt4-3">
<input type="button" value="有內容的"id="bt4-4">
</div>
<divid="div5">
屬性選擇器<br>
<div id="div5-1">
<input type="text"name="1">
<input type="text"name="11">
<input type="text"name="111">
<input type="text"name="1123">
<input type="text"name="113331"value="">
<input type="text">
<input type="text"name="1">
</div>
<input type="button" value="包含name"id="bt5-1">
<input type="button" value="name=1"id="bt5-2">
<input type="button" value="不等于1的"id="bt5-3">
<input type="button" value="1開始的"id="bt5-4">
<input type="button" value="1結尾的"id="bt5-5">
<input type="button" value="含有3的"id="bt5-6">
<input type="button" value="有3有2的"id="bt5-7">
</div>
<div>
表單選擇器
<div id="div6-1">
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" ><br>
<select class="" name="">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option selected>8</option>
</select>
</div>
<div id="div6-2">
<lable><input type="checkbox" checked>1</lable>
<lable><input type="checkbox" checked>2</lable>
<lable><input type="checkbox">3</lable>
</div>
<input type="button" value="禁用"id="bt6-1">
<input type="button" value="激活"id="bt6-2">
<input type="button" value="select元素"id="bt6-3">
<input type="button" value="checkbox"id="bt6-4">
</div>
</div>
</body>
</html>
添削の先生：韋小寶添削時間：2019-03-06 15:39:18
先生のまとめ：寫的很不錯 表單選擇器在表單中使用的還是比較多的 基本上用來獲取一些單選框或者復選框以及下拉框的值