abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery 選擇器</title> <script src=&qu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 選擇器</title>
<script src="./0520/static/js/jquery-3.4.1.js"></script>
</head>
<body>
<div id="list">hello jQuery</div>
<div class="list1">hello javascript</div>
<div>
<p>hello world</p>
</div>
<div>
<div id="box">多個元素1</div>
<div class="box">多個元素2</div>
<span>多個元素3</span>
</div>
<!--給父級元素下匹配所以的子元素-->
<div class="list2">
<p>給父級元素下匹配所以的子元素</p>
<p>給父級元素下匹配所以的子元素</p>
<p>給父級元素下匹配所以的子元素</p>
</div>
<hr>
<ul class="list3" style="list-style: none">
<li>給定的祖先元素下匹配所有的后代元素</li>
<li>給定的祖先元素下匹配所有的后代元素</li>
<li>給定的祖先元素下匹配所有的后代元素</li>
</ul>
<hr>
<div class="list4">
<h4 class="h4">匹配緊跟在prev元素后面的next元素</h4>
<p>匹配緊跟在prev元素后面的next元素</p>
<p>匹配緊跟在prev元素后面的next元素</p>
<p>匹配緊跟在prev元素后面的next元素</p>
</div>
<hr>
<div class="list5">
<ul>
<li>順序選擇器1</li>
<li>順序選擇器2</li>
<li>順序選擇器3</li>
<li>順序選擇器4</li>
<li>順序選擇器5</li>
</ul>
</div>
<hr>
<div class="list6">
<ul>
<li>順序選擇器1</li>
<li>順序選擇器2</li>
<li>順序選擇器3</li>
<li>順序選擇器4</li>
<li>順序選擇器5</li>
</ul>
</div>
<hr>
<div class="list7">
<ul>
<li id="sy">順序選擇器1</li>
<li>順序選擇器2</li>
<li>順序選擇器3</li>
<li>順序選擇器4</li>
<li>順序選擇器5</li>
</ul>
</div>
<hr>
<div class="list8">
<ul>
<li id="sy1">順序選擇器1</li>
<li>順序選擇器制定文本2</li>
<li>順序選擇器制定文本3</li>
<li><h5>順序選擇器順序選擇器4</h5></li>
<li></li>
<li>順序選擇器5</li>
<li>順序選擇器5</li>
</ul>
</div>
<script>
$(function () {
//基本選擇器
// 語法
// $('#id名')根據(jù)給定的id來匹配到元素
var div = $('#list').css('color','red');
console.log(div);
// $('.class名')根據(jù)給定的class來匹配到元素
$('.list1').css('color','blue');
// $('element')根據(jù)給定的標(biāo)簽名來匹配到元素
$('p').css('color','green');
// $('*')匹配所有元素
$('*').css('font-family','宋體');
//$('#id,.class名,element')匹配到頁面中多個選擇器
$('#box,.box,span').css('color','pink');
//*************************************************
//層級選擇器 （相當(dāng)于父類和子類的元素關(guān)系）
// 給定的父級元素下匹配所有的子元素：$('父級元素 > 子級元素')
$('.list2 > p').css('color','red');
// 給定的祖先元素下匹配所有的后代元素：$('祖先元素 后代元素')
$('.list3 li').css('background','yellow',);
// 匹配緊跟在prev元素后面的next元素：$('prev + next')(同級的元素)
$('.h4+p').css('color','red');
// 匹配prev元素后面所有的siblings元素：$('prev ~ siblings')
$('.h4~p').css('background','blue');
//****************************************
//順序選擇器
// 1、順序
// $(':first') 第一個元素
$('.list5 ul > li:first').css('color','red');
// $(':last') 最后一個元素
$('.list5 ul > li:last').css('color','pink');
// 2、比較(x的順序是從0開始)
// $(':gt(x)')表示大于值x的元素
$('.list5 ul > li:gt(1)').css('color','blue');
// $(':lt(x)')表示小于值x的元素
$('.list5 ul > li:lt(2)').css('color','yellow');
// $(':eq(x)')表示等于值x的元素
$('.list5 ul > li:eq(3)').css('color','Violet');
// 3、奇偶數(shù)
// $(':odd')奇數(shù)順序
$('.list6 ul > li:odd').css('color','yellow');
// $(':even')偶數(shù)順序
$('.list6 ul > li:even').css('color','red');
// 4、非
// $(':not(selector)')匹配不是selector的所有元素
$('.list7 ul > li:not(#sy)').css('color','red');
//*************************************************
// 內(nèi)容選擇器
// 語法：
// $(':contains(text)') 匹配包含給定文本（text）的元素
$('.list8 ul > li:contains(制定文本)').css('color','red');
// $(':has(selector)')匹配包含特定選擇器元素的元素
$('.list8 ul > li:has(h5)').css('color','blue');
// $(':empty')匹配不含有內(nèi)容的元素（即 不包含子元素或者文本的空元素）
$('.list8 ul > li:empty').css('backgroundColor','red');
// $(':parent')匹配含有子元素或者文本的元素
$('.list8 ul > li:parent').css('fontSize','22px');
//===============================================================
// 屬性選擇器
// 語法：
// $('[屬性名]')匹配包含給定屬性的元素
// $('[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','pink')
// $('input[type=button]').css('background','blue')
// $('input[type!=text]').css('background','red')
// $('input[type ^=t ]').css('background','red')
// $('input[type $=n ]').css('background','red')
// $('input[type *=o ]').css('background','blue')
// $('input[id][name*=n]').css('background','red')
//})
// 表單選擇器
// 語法：
// $(':enabled')所有激活的input元素（可以使用的input元素）
// $(':disabled')所有禁用的input元素（不可以使用的input元素）
// $(':selected')所有被選取的元素，針對于select元素
// $(':checked')所有被選中的input元素
//===============================================================
})
</script>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2019-05-28 17:02:40
Teacher's summary：總結(jié)的不錯, 其實在實際開發(fā)過程 , 用不到這么多的, 但是要想看懂別人的代碼, 是要多了解一些