abstrak：<!doctype html><html><head> <meta charset="UTF-8"> <title>jQuery選擇器</title> <script src="js/jquery-3.3.1.mi
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery選擇器</title>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
#box{width: 100px; height: 100px; background-color: coral}
.box{width: 100px; height: 100px; background-color: lightgreen}
</style>
</head>
<body>
<script>
$(document).ready(function () {
/**
* 基本選擇器
* $('#id名')根據(jù)給定的id來匹配到元素
* $('.class名')根據(jù)給定的class來匹配到元素
* $('element')根據(jù)給定的標簽名來匹配到元素
* $('*')匹配所有元素
* $('#id,.class名,element')匹配到頁面中多個選擇器
*/
$('#box').css('background-color', 'red');
$('.box').css('background-color', 'lightyellow');
$('span').css('font-size', '20px');
$('*').css('font-family', '楷體');
$('#box,.box,span').css('color', 'lightgreen');
//-----------------------------------------------------
/**
* 層級選擇器 （相當于父類和子類的元素關系）
* 給定的父級元素下匹配所有的子元素： $('父級元素 > 子級元素')
* 給定的祖先元素下匹配所有的后代元素： $('祖先元素 后代元素')
* 匹配緊跟在prev元素后面的next元素： $('prev + next')(同級的元素)
* 匹配prev元素后面所有的siblings元素：$('prev ~ siblings')
*/
$('ul > li').css('list-style', 'none');
$('ul li').css('list-style', 'none');
$('span + input').css('height', '60px');
$('span ~ input').css('border', '2px');
//-----------------------------------------------------
/**
* 順序選擇器
* 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的所有元素
*/
$('p:first').css('color', '#ee9e00');
$('p:last').css('color', '#ee5bd7');
$('p:gt(1)').css('font-size', '22px');
$('p:lt(4)').css('background-color', '#1a84ff');
$('p:eq(5)').css('background-color', '#ff09b6');
$('p:odd').css('color', '#ffffff');
$('p:even').css('font-size', '35px');
$('p:not(#five)').css('height', '60px');
//-----------------------------------------------------
/**
* 內容選擇器
* $(':contains(text)') 匹配包含給定文本（text）的元素
* $(':has(selector)')匹配包含特定選擇器元素的元素
* $(':empty')匹配不含有內容的元素（即 不包含子元素或者文本的空元素）
* $(':parent')匹配含有子元素或者文本的元素
*/
$('div:contains(時人不識凌云木，直待凌云始道高。)').css('background-color', '#dbffc2');
$('div:has(p)').css('height', '60px');
$('div:empty').css('background-color', '#856b88');
$('div:parent').css('background-color', '#05dfff');
//-----------------------------------------------------
/**
* 屬性選擇器
* $('[屬性名]')匹配包含給定屬性的元素
* $('[attribute=value]')匹配給定屬性是某個特定值的元素
* $('[attribute！=value]')匹配所有不含有指定值的屬性，或者說是屬性不等于特定值的元素
* $('[attribute ^= value]')匹配給定屬性是以某些值開始的元素
* $('[attribute $= value]')匹配給定屬性是以某些值結尾的元素
* $('[attribute *= value]')匹配給定屬性包含某些值的元素
* $('attrSel[1] attrSel[1] attrSel[1]')
*/
$('input[type]').css('background', 'pink');
$('input[type=button]').css('background', '#ee9e00');
$('input[type!=text]').css('background', '#c728ff');
$('input[type ^=t ]').css('background', 'red');
$('input[type $=n ]').css('background', '#d1f5b9');
$('input[type *=o ]').css('background', 'blue');
$('input[id][name*=n]').css('background', '#78ff50');
//-----------------------------------------------------
/**
* 表單選擇器
* $(':enabled')所有激活的input元素（可以使用的input元素）
* $(':disabled')所有禁用的input元素（不可以使用的input元素）
* $(':selected')所有被選取的元素，針對于select元素
* $(':checked')所有被選中的input元素
*/
$(':enabled').css('background','#ff2c57');
$(':disabled').css('background','#d1f5b9');
$(':selected').css('color','blue');
$(':checked').parent().css('color','#ee9e00');
})
</script>
<div id="box">江月何年初照人</div>
<div>孤帆遠影碧空盡</div>
<span>江畔何人初見月</span>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<div><li>4</li></div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<form action="">
<span>評論</span>
<input type="text" placeholder="說點什么吧~">
<input type="button" value="發(fā)表">
</form>
<hr>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p id="five">5</p>
<p>6</p>
<hr>
<div>君不見，黃河之水天上來，奔流到海不復回。</div>
<div>時人不識凌云木，直待凌云始道高。</div>
<div>君不見，高堂明鏡悲白發(fā)，朝如青絲暮成雪。</div>
<div>壯心未與年俱老，死去猶能作鬼雄。</div>
<div><p>壯志饑餐胡虜肉，笑談渴飲匈奴血。</p></div>
<div style="width: 100%; height: 30px"></div>
<hr>
<form action="">
<label for="">1</label>
<input type="text" id="a"> <br>
<label for="">2</label>
<input type="email" id="b"> <br>
<label for="">3</label>
<input type="password"> <br>
<label for="">4</label>
<input type="button" value="按鈕"> <br>
<label for="">5</label>
<input type="radio"> <br>
</form>
<hr>
<form>
輸入框1<input type="text" name=""><br>
輸入框2<input type="text" name=""><br>
輸入框3<input type="text" name="" disabled><br>
輸入框4<input type="text" 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>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/3/
Guru membetulkan：韋小寶Masa pembetulan：2019-01-21 09:13:05
Rumusan guru：寫的很不錯 選擇器是非常重要的知識點 最常用的也就是基礎選擇器 一定要好好掌握