一、符合CSS規(guī)范的選擇器
問(wèn)題一：以下是一段HTML結(jié)構(gòu)，通過(guò)jQuery的基本選擇器绎秒，我們有多少方法可以獲取尼摹？<div id="left" class="may"></div>
$('.may') //類(lèi)選擇器—— document.getElementsByClassName('may');
$('#left')//ID選擇器——document.getElementById('left');
$("div")// 元素選擇器——document.getElementsByTagName('div');
$("*") //全選擇器 ——document.getElementsByTagName(*);
層級(jí)選擇器
問(wèn)題二：通過(guò)選擇器方法见芹，判斷選擇器名稱(chēng)
$( "parent > child" )//子選擇器：選擇所有指定“parent”元素中指定的"child"的直接子元素。
$("prev + next")//后代選擇器：選擇給定的祖先元素的所有后代元素, 一個(gè)元素的后代可能是該元素的一個(gè)孩子窘问，孫子辆童，曾孫等
$("ancestor descendant")//相鄰兄弟選擇器：選擇所有緊接在“prev”元素后的“next”元素
$("prev ~ siblings")//一般兄弟選擇器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素惠赫，并匹配過(guò)濾“siblings”選擇器
上面這幾種選擇器和css中的選擇器非常相似把鉴，除此之外，jQuery提供了一系列的篩選選擇器用來(lái)更快捷的找到所需的DOM元素儿咱。篩選選擇器很多都不是CSS的規(guī)范庭砍，而是jQuery自己為了開(kāi)發(fā)者的便利延展出來(lái)的選擇器
二、篩選選擇器
篩選選擇器的用法與CSS中的偽元素相似混埠，選擇器用冒號(hào)“：”開(kāi)頭
2.1基本篩選選擇器
基本篩選選擇器針對(duì)的都是元素DOM節(jié)點(diǎn)
2.2內(nèi)容篩選選擇器
內(nèi)容篩選選擇器怠缸，體現(xiàn)在篩選它所包含的子元素或者文本內(nèi)容上
- :contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素钳宪，has查找包含“指定元素”的元素
- 如果:contains匹配的文本包含在元素的子元素中揭北，同樣認(rèn)為是符合條件的。
- :parent與:empty是相反的吏颖，兩者所涉及的子元素搔体，包括文本節(jié)點(diǎn)
2.3可見(jiàn)性篩選選擇器
元素隱藏：
- CSS display的值是none。
- type="hidden"的表單元素半醉。
- 寬度和高度都顯式設(shè)置為0疚俱。
- 一個(gè)祖先元素是隱藏的，該元素是不會(huì)在頁(yè)面上顯示
- CSS visibility的值是hidden
- CSS opacity的指是0
元素顯示： - 如果元素中占據(jù)文檔中一定的空間,元素被認(rèn)為是可見(jiàn)的
2.元素的visibility: hidden 或 opacity: 0被認(rèn)為是可見(jiàn)的
2.4屬性篩選選擇器
屬性選擇器讓你可以基于屬性來(lái)定位一個(gè)元素缩多。
2.5元素篩選選擇器
//查找class="first-div"下的第一個(gè)a元素
//針對(duì)所有父級(jí)下的第一個(gè)
$('.first-div a:first-child').css("color", "#CD00CD”);
//查找class="first-div"下的最后一個(gè)a元素
//針對(duì)所有父級(jí)下的最后一個(gè)
//如果只有一個(gè)元素的話呆奕，last也是第一個(gè)元素
$('.first-div a:last-child').css("color", "red”);
//查找class="first-div"下的只有一個(gè)子元素的a元素
$('.first-div a:only-child'.css("color", "blue”);
//查找class="last-div"下的第二個(gè)a元素
$('.last-div a:nth-child(2)').css("color", "#CD00CD”);
//查找class="last-div"下的倒數(shù)第二個(gè)a元素
$('.last-div a:nth-last-child(2)').css("color", "red”);
2.6子元素篩選選擇器
2.7表單元素選擇器
表單元素
<form>
<input type="text" value="text類(lèi)型"/>
<input type="password" value="password"/>
<input type="radio"/>
<input type="checkbox"/>
<input type="submit" />
<input type="image" />
<input type="reset" />
<input type="button" value="Button" />
<input type="file" />
</form>
除了input篩選選擇器，幾乎每個(gè)表單類(lèi)別篩選器都對(duì)應(yīng)一個(gè)input元素的type值衬吆。大部分表單類(lèi)別篩選器可以使用屬性篩選器替換梁钾。比如 $(':password') == $('[type=password]’)
2.8表單對(duì)象屬性篩選選擇器
表單對(duì)象屬性篩選選擇器也是專(zhuān)門(mén)針對(duì)表單元素的選擇器，可以附加在其他選擇器的后面咆槽，主要功能是對(duì)所選擇的表單元素進(jìn)行篩選
注意事項(xiàng)：
- 選擇器適用于復(fù)選框和單選框陈轿，對(duì)于下拉框元素, 使用 :selected 選擇器
- 在某些瀏覽器中，選擇器:checked可能會(huì)錯(cuò)誤選取到<option>元素，所以保險(xiǎn)起見(jiàn)換用選擇器input:checked麦射，確保只會(huì)選取<input>元素
2.9特殊選擇器this
this蛾娶，是JavaScript中的關(guān)鍵字，表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象潜秋，可以調(diào)用html對(duì)象所擁有的屬性和方法蛔琅。
$(this),代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象，可以調(diào)用jQuery的方法和屬性值峻呛。
imooc是一個(gè)對(duì)象罗售，擁有name屬性與getName方法,在getName中this指向了所屬的對(duì)象imooc
var imooc = {
name:"慕課網(wǎng)",
getName:function(){
//this,就是imooc對(duì)象
return this.name;
}
}
imooc.getName(); //慕課網(wǎng)
在DOM中this就是指向了這個(gè)html元素對(duì)象，因?yàn)閠his就是DOM元素本身的一個(gè)引用：給頁(yè)面一個(gè)P元素綁定一個(gè)事件: 通過(guò)addEventListener綁定的事件回調(diào)中钩述，this指向的是當(dāng)前的dom對(duì)象寨躁，所以再次修改這樣對(duì)象的樣式，只需要通過(guò)this獲取到引用即可
p.addEventListener('click',function(){
//this === p
//以下兩者的修改都是等價(jià)的
this.style.color = "red";
p.style.color = "red";
},false);
把$()方法傳入當(dāng)前的元素對(duì)象的引用this牙勘，把這個(gè)this加工成jQuery對(duì)象职恳，我們就可以用jQuery提供的快捷方法直接處理樣式了
$('p').click(function(){
//把p元素轉(zhuǎn)化成jQuery的對(duì)象
var $this= $(this)
$this.css('color','red')
})
