摘要：總結(jié)：總結(jié)基本都在代碼的注釋里。感覺這個東西得多練，要不容易忘。代碼：<!DOCTYPE html><html><head> <title>jQuery選擇器</title> <script type="text/javascript" src="jq_3.3.1_mi.js"><
總結(jié)：
總結(jié)基本都在代碼的注釋里。感覺這個東西得多練，要不容易忘。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>jQuery選擇器</title>
<script type="text/javascript" src="jq_3.3.1_mi.js"></script>
<style type="text/css">
div{
width:100px;
height: 100px;
margin-bottom: 20px;
background-color:grey;
}
</style>
</head>
<body>
<script type="text/javascript">
//基本選擇器
//語法
// $('#id') id選擇器
// $('.class') class選擇器
// $(''element) 標(biāo)簽選擇器
// $('*') 匹配所有元素
// $('#id, .class, element')匹配到頁面中多個選擇器
// $(document).ready(function(){
// $("#box").css('background-color','red');
// $('.box').css('background-color', 'blue');
// $('span').css('color', 'red');
// $('#box, .box, span').css('font-size', '30px');
// })
// 層級選擇器（相當(dāng)于父類和子類的關(guān)系）
// 子元素選擇器：給定的父級元素下匹配所有的子元素： $('父級元素 > 子級元素')
// 后代選擇器：給定的祖先元素下匹配所有的后代元素： $('祖先元素 后代元素')
// 相鄰選擇器：匹配緊跟在prev元素后面的next元素： $('prev + next')（同級的元素）
// 兄弟選擇器：匹配prev元素所有的siblings元素： $('prev ~ siblings')
// 順序選擇器
// 1.順序
// $(':first')
// $(':last')
// 2.比較(x的順序從0開始)
// $(':gt(x)') 表示大于x的元素
// $(':lt(x)') 表示小于x的元素
// $(':eq(x)') 表示等于x的元素
// 3.奇偶數(shù)
// $(':odd') 奇數(shù)排序
// $(':even') 偶數(shù)排序
// 4.非
// $(':not(selector)') 匹配不是selector的所有元素
// $(document).ready(function(){
// // $('p:first').css('background-color', 'red');
// // $('p:last').css('background-color', 'blue');
// // $('p:gt(1)').css('color', 'pink');
// // $('p:lt(2)').css('background-color', 'blue');
// // $('p:eq(2)').css('color', 'red');
// $('p:odd').css('background-color', 'lightgreen');
// $('p:even').css('background-color', 'lightblue');
// $('p:not(#box)').css('color', 'red');
// })
// 內(nèi)容選擇器
// 語法：
// $(':contains(text)') 匹配包含給定文本（text） 的元素
// $(':has(selector)') 匹配包含特定選擇器的元素
// $(':empty') 匹配不含有內(nèi)容的元素 （即 不包含子元素或者文本的空元素）
// $(':parent') 匹配含有子元素或者文本的元素
// $(document).ready(function(){
// $('div:contains(wjh)').css('background-color', 'blue');
// $('div:has(b)').css('background-color', 'red');
// $('div:empty').css('background-color', 'yellow')
// $('div:parent').css('background-color', 'green');
// })
// 屬性選擇器
// 語法：
// $('[attribute]') 匹配包含給定屬性的元素
// $('[attribute=value]') 匹配給定屬性是某個特定值的元素
// $('[attribute!=value]') 匹配所有不含有給定值的屬性，或者說屬性不等于特定值的元素
// $('[attribute ^= value]') 匹配給定元素是以某些值開始的元素
// $('[attribute $= value]') 以某些值結(jié)束的元素
// $('[attribute *= value]') 包含某些值的元素
// $('attrSel[1] attrSel[1] attrSel[1]') 復(fù)合選擇器，需要同時滿足多個條件時使用
// $(document).ready(function(){
// $('input[type]').css('background-color', 'lightyellow');
// $('input[type=text]').css('background-color', 'red');
// $('input[type!=password]').css('background-color', 'blue');
// $('input[type^=b]').css('background-color', 'green');
// $('input[type$=l]').css('background-color', 'yellow');
// $('input[type*=t]').css('background-color', 'red');
// $('input[type][name=new1][id]').css('background-color', 'green');
// // $('[name]').css('background-color', 'red');
// })
// 表單選擇器
// 語法：
// $(':enabled') 所有激活的 input 元素
// $(':disabled') 所有禁用的 input 元素
// $(':selected') 所有被選取的元素，針對于select元素
// $(':checked') 素有被選中的 input 元素
$(document).ready(function(){
$('input:enabled').css('background-color', 'yellow');
$('input:disabled').css('background-color', 'red');
$(':selected').css('background-color', 'red');
$('input:checked').parent().css('background-color', 'blue');
})
</script>
<!-- <div id="box"> i </div>
<div class="box"> love </div>
<span>wjh小別墅</span> -->
<!-- <p id="box">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p> -->
<!-- <div class="wjh">jack</div>
<div>wjh</div>
<div>jack cheng</div>
<div>join</div>
<div><b>php中文網(wǎng)</b></div>
<div></div>
<div><span></span></div> -->
<!-- <label>1</label><input type="text" name="new1" id="box"><br>
<label>2</label><input type="password" name="new" id="12"><br>
<label>3</label><input name=""><br>
<label>4</label><input type="email" name=""><br>
<label>5</label><input type="button" value="按鈕" ><br>
</body>
-->
<form>
輸入框1 <input type="" name=""><br>
輸入框2 <input type="" name=""><br>
輸入框3 <input type="" name="" disabled=""><br>
輸入框4 <input type="" 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>
</html>
批改老師：滅絕師太批改時間：2019-02-13 16:35:16
老師總結(jié)：確實需要多多練習(xí),用特定的時候用特定的選擇器會方便很多