サマリー：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選擇器</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
div{width: 500px; height:200px; margin: 15px 0; padding: 15px;}
p input{ width: 120px; height: 30px; line-height: 30px; text-align: center; background: #FFA200; border: none; color: #fff;}
li{width: 200px; height:35px;}
</style>
</head>
<body>
<!-- <pre>
基本選擇器
$('#id名')根據(jù)給定的id來(lái)匹配到元素
$('.class名')根據(jù)給定的class來(lái)匹配到元素
$('element')根據(jù)給定的標(biāo)簽名來(lái)匹配到元素
$('*')匹配所有元素
$('#id名,.class名,element')匹配到頁(yè)面中多個(gè)選擇器
</pre> -->
<h1>基本選擇器</h1>
<br>
<div class="className">className</div>
<div id="idName">idName</div>
<p>
<input type="text" id="classBtn" value="class選擇器">
<input type="text" id="idBtn" value="id選擇器">
<input type="text" id="elementBtn" value="element選擇器">
<input type="text" id="allBtn" value="*選擇器">
<input type="text" id="btn" value="混合選擇器">
</p>
<!--
<pre>
層級(jí)選擇器（相當(dāng)于父類和子類的元素關(guān)系）
$('父級(jí)元素>子級(jí)元素')給定的父級(jí)元素下匹配所有的子元素
$('祖先元素 后代元素')給定的祖先元素下匹配所有的后代元素
$('prev+next')---同級(jí)的元素，匹配緊跟在prev元素后面的next元素
$('prev~siblings')匹配prev元素后面所有的siblings元素
</pre>
<h1>層級(jí)選擇器</h1>
<b>div同級(jí)的B標(biāo)簽</b>
<div>
<ul>
<li>div下ul里的li</li>
<li><b>div下ul里的li里的b元素</b></li>
<li>div下ul里的li</li>
<li>div下ul里的li</li>
<li>div下ul里的li</li>
<b>div下ul里的b元素</b>
</ul>
</div>
<b>div同級(jí)的B標(biāo)簽</b>
<ul>
<li>ul里的li</li>
<li><b>ul里的li下的b元素</b></li>
<li>ul里的li</li>
<li>ul里的li</li>
<li>ul里的li</li>
</ul>
<b>div同級(jí)的B標(biāo)簽</b>
<p>
<input type="text" id="btn" value="子級(jí)">
<input type="text" id="btn1" value="后代">
<input type="text" id="btn2" value="緊跟同級(jí)">
<input type="text" id="btn3" value="所有后面同級(jí)元素">
</p>
-->
<!--
<pre>
順序選擇器
一、順序
$(':first')第一個(gè)元素
$(':last')最后一個(gè)元素
二、比較（X的順序是從0開(kāi)始）
$(':gt(x)')表示大于值X的元素
$(':lt(x)')表示小于值X的元素
$(':eq(x)')表示等于值X的元素
三、奇偶數(shù)
$(':odd')奇數(shù)順序
$(':even')偶數(shù)順序
四、非
$(':ont(selector)')匹配不是selector的所有元素
</pre>
<h1>順序選擇器</h1>
<ul>
<li>第1個(gè)li元素</li>
<li>第2個(gè)li元素</li>
<li>第3個(gè)li元素</li>
<li>第4個(gè)li元素</li>
<li>第5個(gè)li元素</li>
<li>第6個(gè)li元素</li>
<li>第7個(gè)li元素</li>
<li>第8個(gè)li元素</li>
</ul>
<p>
<input type="text" id="btn" value="first">
<input type="text" id="btn1" value="last">
<input type="text" id="btn2" value="大于3">
<input type="text" id="btn3" value="小于3">
<input type="text" id="btn4" value="等于3">
<input type="text" id="btn5" value="奇數(shù)">
<input type="text" id="btn6" value="偶數(shù)">
<input type="text" id="btn7" value="非第三個(gè)">
</p>
-->
<!--
<pre>
內(nèi)容選擇器
$(':contains(text)')匹配包含給定文本（text）的元素
$(':has(selector)')匹配包含特定選擇器元素的元素
$(':empty')匹配不含有內(nèi)容的元素（即 不包含子元素或者文本的空元素）
$(':parent')匹配含有子元素或者文本的元素
$(':hasClass()')匹配含有指定類的元素
</pre>
<h1>內(nèi)容選擇器</h1>
<ul>
<li>第1個(gè)li元素</li>
<li class="aa">第2個(gè)li元素</li>
<li><b>第3個(gè)li元素</b></li>
<li></li>
<li>第5個(gè)li元素</li>
</ul>
<p>
<input type="text" id="btn" value="含指定文本">
<input type="text" id="btn1" value="含指定元素">
<input type="text" id="btn2" value="無(wú)內(nèi)容">
<input type="text" id="btn3" value="含內(nèi)容">
</p>
-->
<!--
<pre>
屬性選擇器
$('[屬性名]')匹配包含給定屬性的元素
$('[attribute=value]')匹配給定屬性是某個(gè)特定值的元素
$('[attribute != value]')匹配所有不含有指定值的屬性，或者說(shuō)是屬性不等于特定值的元素
$('[attribute ^= value]')匹配給定屬性是以某些值開(kāi)始的元素
$('[attribute $=value]')匹配給定屬性是以某些值結(jié)尾的元素
$('[attribule *= value]')匹配給定屬性包含某些值的元素
$('attrSel[1] , attrSel[2] , attrSel[3]')復(fù)合選擇器，以逗號(hào)隔開(kāi)，需要同時(shí)滿足多個(gè)條件時(shí)使用
</pre>
<h1>屬性選擇器</h1>
<ul>
<li title="第1個(gè)li元素">第1個(gè)li元素</li>
<li title="第2個(gè)li元素">第2個(gè)li元素</li>
<li title="第3個(gè)li元素">第3個(gè)li元素</li>
<li class="aa">第4個(gè)li元素</li>
<li>第5個(gè)li元素</li>
<li title="第6個(gè)li元素">第6個(gè)li元素</li>
<li title="第7個(gè)li元素">第7個(gè)li元素</li>
<li title="第8個(gè)li元素">第8個(gè)li元素</li>
</ul>
<p>
<input type="text" id="btn" value="含指定屬性">
<input type="text" id="btn1" value="屬性有特定的值">
<input type="text" id="btn2" value="屬性無(wú)特定的值">
<input type="text" id="btn3" value="屬性以某值開(kāi)始">
<input type="text" id="btn4" value="屬性以某值結(jié)束">
<input type="text" id="btn5" value="屬性含某值">
<input type="text" id="btn6" value="復(fù)合選擇器">
</p>
-->
<!--
<pre>
表單選擇器
$(':enabled')所有激活的input元素（可以使用的input元素）
$(':disabled')所有禁用的input元素（不可以使用的input元素）
$(':selected')所有被選取的元素，針對(duì)于select元素
$(':checked')所有被選中的input元素
</pre>
<h1>表單選擇器</h1>
<section>
<input type="text">
<input type="text" disabled>
<select>
<option value ="b" >請(qǐng)選擇</option>
<option value ="a" selected >合肥</option>
<option value ="b">上海</option>
<option value ="b">北京</option>
</select>
<label><input type="radio">男</label>
<label><input type="radio" checked>女</label>
</section>
<p>
<input type="text" id="btn" value="激活">
<input type="text" id="btn1" value="禁用">
<input type="text" id="btn2" value="選中的selected">
<input type="text" id="btn3" value="選中的input">
</p> -->
<script type="text/javascript">
$(document).ready(function(){
//基本選擇器
$('#classBtn').click(function(){ //根據(jù).className找到元素并更改背景色及字體顏色
$('.className').css({background:'red' , color:'#fff'});
$('h1').text('基本選擇器----class選擇器');
});
$('#idBtn').click(function(){ //根據(jù)#idName找到元素并更改背景色及字體顏色
$('#idName').css({background:'blue' , color:'#fff'});
$('h1').text('基本選擇器----id選擇器');
});
$('#elementBtn').click(function(){ //根據(jù)element找到元素并更改背景色及字體顏色
$('div').css({background:'green' , color:'#fff'});
$('h1').text('基本選擇器----標(biāo)簽選擇器');
});
$('#allBtn').click(function(){ //找到所有元素并更改背景色及字體顏色
$('*').css({background:'yellow' , color:'#333'});
$('h1').text('基本選擇器----所有選擇');
});
$('#btn').click(function(){ //找到所選元素并更改背景色及字體顏色
$('#idName , .className , body , html, p , h1').css({background:'#fff' , color:'#333'});
$('input').css({background:'#ffa200' , color:'#fff'});
$('h1').text('基本選擇器----混合選擇器');
});
/*
//層級(jí)選擇器
$('#btn').click(function(){
$('ul > b').css('color','red');//ul下的子級(jí)B元素
});
$('#btn1').click(function(){
$('ul b').css('color','red');//ul下的后代B元素
});
$('#btn2').click(function(){
$('div+b').css('color','red');//div同級(jí)的B元素---緊跟div后面的那個(gè)b元素
});
$('#btn3').click(function(){
$('div~b').css('color','red');//div后面同級(jí)的B元素
});
*/
/*
//順序選擇器
$('#btn').click(function(){
$('li:first').css('color','red');//第一個(gè)li元素
});
$('#btn1').click(function(){
$('li:last').css('color','red');//最后一個(gè)li元素
});
$('#btn2').click(function(){
$('li:gt(3)').css('color','red');//大于3的li元素,不含第三個(gè)，第一個(gè)為0,所以選中的是5-8
});
$('#btn3').click(function(){
$('li:lt(3)').css('color','red');//小于3的li元素
});
$('#btn4').click(function(){
$('li:eq(3)').css('color','red');//等于3的li元素
});
$('#btn5').click(function(){
$('li:odd').css('color','red');//奇數(shù)的li元素,以0開(kāi)始
});
$('#btn6').click(function(){
$('li:even').css('color','red');//偶數(shù)的li元素
});
$('#btn7').click(function(){
$('li:not(:eq(3))').css('color','red');//不是第3個(gè)的所有l(wèi)i元素
});
*/
/*
//內(nèi)容選擇器
$('#btn').click(function(){
$('li:contains(1)').css('color','red');//包含指定文本1的li元素
});
$('#btn1').click(function(){
$('li:has(b)').css('color','red');//包含指定B標(biāo)簽的li元素
});
$('#btn2').click(function(){
$('li:empty').css('color','red');//不包含內(nèi)容的li元素
});
$('#btn3').click(function(){
$('li:parent').css('color','red');//包含內(nèi)容的li元素
});
*/
/*
//屬性選擇器
$('#btn').click(function(){
$('[title]').css('color','red');//包含title屬性的li元素
});
$('#btn1').click(function(){
$('[title=第1個(gè)li元素]').css('color','red');//包含‘第1個(gè)li元素’的title屬性的li元素
});
$('#btn2').click(function(){
$('li[title!=第1個(gè)li元素]').css('color','red');//不包含title屬性的li元素
});
$('#btn3').click(function(){
$('li[title^=第]').css('color','red');//title屬性值以第開(kāi)始的li元素
});
$('#btn4').click(function(){
$('li[title$=元素]').css('color','red');//title屬性值以元素結(jié)束的li元素
});
$('#btn5&am
添削の先生：查無(wú)此人添削時(shí)間：2019-04-24 15:43:26
先生のまとめ：完成的不錯(cuò)，jq比js簡(jiǎn)單很多，可以代替js的常規(guī)操作，多練習(xí)。繼續(xù)加油。