$( ".class" )沼撕，$( "element" )
- 原生：樣式是可以多選的支示，所以得到的是一個(gè)合集亩钟，需要通過(guò)循環(huán)給合集中每一個(gè)元素修改樣式
- jQuery：class選擇器可以選擇多個(gè)元素赋兵，不需要循環(huán)
var divs = document.getElementsByClassName('aaron');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
$(.aaron).css("border", "3px solid red");
$( "*" )
- IE會(huì)將注釋節(jié)點(diǎn)實(shí)現(xiàn)為元素庙睡，所以在IE中調(diào)用getElementsByTagName里面會(huì)包含注釋節(jié)點(diǎn)吼旧，這個(gè)通常是不應(yīng)該的
jQuery選擇器之層級(jí)選擇器
- 子選擇器：$('div > p') 選擇所有div元素里面的子元素P
- 后代選擇器：$('div p') 選擇所有div元素里面的p元素
- 相鄰兄弟選擇器：$('pre+next')
選擇緊鄰在pre元素后的next元素
jq基本篩選器
$("div:first")匹配div下的第一個(gè)元素
$("div:last")匹配div下的最后一個(gè)元素
$("div:not(p)")過(guò)濾選擇器郎嫁，選擇所有元素但不包括括號(hào)中的
$("div:eq(index)")在匹配的集合中選擇索引值index的元素
eq就是equal等于的意思$("div:gt(index)")選擇匹配集合中所有大于給定index（索引值）的元素
gt是gather than 大于的意思$("div:lt(index)")選擇匹配集合中所有小于給定index（索引值）的元素
lt是litter than 小于的意思$("div:even")選擇索引值為偶數(shù)的元素，從0開(kāi)始計(jì)數(shù)
$("div:odd")選擇索引值為奇數(shù)的元素哮内，從0開(kāi)始計(jì)數(shù)
$("div:animated")選擇所有執(zhí)行動(dòng)畫(huà)效果的元素
$("div:root")選擇該文檔的根元素
$("div:header")選擇所有標(biāo)題元素
jq可見(jiàn)性篩選選擇器?
- $(":visible") 選擇所有顯示的元素盗棵；
- $(":hidden") 選擇所有隱藏的元素；
:hidden 選擇器北发，不僅僅包含樣式 display="none"的元素纹因，還包括隱藏表單、visibility等等 - 我們有幾種方式可以隱藏一個(gè)元素：
- CSS display的值是 none
- type="hidden"的表單元素
- 寬度和高度都顯式設(shè)置為 0
- 一個(gè)祖先元素是隱藏的琳拨，該元素是不會(huì)在頁(yè)面上顯示
- CSS visibility的值是 hidden
- CSS opacity的指是 0
- 如果元素中占據(jù)文檔中一定的空間,元素被認(rèn)為是可見(jiàn)的瞭恰。
可見(jiàn)元素的寬度或高度，是大于零狱庇。
元素的visibility: hidden 或 opacity: 0被認(rèn)為是可見(jiàn)的惊畏，因?yàn)樗麄內(nèi)匀徽加每臻g布局。 - 不在文檔中的元素是被認(rèn)為是不可見(jiàn)的僵井，如果當(dāng)他們被插入到文檔中陕截，jQuery沒(méi)有辦法知道他們是否是可見(jiàn)的驳棱，因?yàn)樵乜梢?jiàn)性依賴于適用的樣式
屬性篩選選擇器
- $('div[name=p1]')： //查找所有div中批什，屬性name=p1的div元素
- $('div[p2]')： //查找所有div中，有屬性p2的div元素
- $('div[name|="-"]')//查找所有div中社搅，有屬性name中的值只包含一個(gè)連字符“-”的div元素驻债，或以連字符‘-’相連的前綴為字符“-”的div
- $('div[name~="a"]') //查找所有div中，有屬性name中的值包含一個(gè)連字符“空”和“a”的div元素形葬，以空格風(fēng)格的屬性中有屬性值a
- $('div[name^=imooc]') //查找所有div中合呐，屬性name的值是用imooc開(kāi)頭的
- $('div[name$=imooc]') //查找所有div中，屬性name的值是用imooc結(jié)尾的
- $('div[name*="test"]')
//查找所有div中笙以，有屬性name中的值包含一個(gè)test字符串的div元素 - $('div[testattr!="true"]')//查找所有div中淌实，有屬性testattr中的值沒(méi)有包含"true"的div
子元素篩選選擇器
$
(':first-child'):針對(duì)所有父元素下的第一個(gè)子元素
$(':last-child'):針對(duì)所有父元素下的最后一個(gè)子元素
$(':only-child'):針對(duì)所有父元素下的只有一個(gè)子元素（只有唯一一個(gè)子元素）
$(':nth-child(n)')針對(duì)所有父元素下的弟n個(gè)元素（這里的n是從1開(kāi)始計(jì)數(shù)）
$(':nth-last-child(n)')針對(duì)所有父元素下的倒數(shù)弟n個(gè)元素
- 注意：
- :first只匹配一個(gè)單獨(dú)的元素，但是:first-child選擇器可以匹配多個(gè)：即為每個(gè)父級(jí)元素匹配第一個(gè)子元素猖腕。這相當(dāng)于:nth-child(1）
- jQuery實(shí)現(xiàn):nth-child(n)是嚴(yán)格來(lái)自CSS規(guī)范拆祈，所以n值是“索引”，也就是說(shuō)倘感，從1開(kāi)始計(jì)數(shù)放坏，:nth-child(index)從1開(kāi)始的，而eq(index)是從0開(kāi)始的
表單元素選擇器
- $(":input") 選擇所有input,testarea,select和button元素老玛；
- $(":text") 匹配所有文本框淤年；
- $(":password") 匹配所有密碼框钧敞；
- $(":radio") 匹配所有單選按鈕；
- $(":checkbox") 匹配所有復(fù)選框麸粮；
- $(":submit") 匹配所有提交按鈕溉苛；
- $(":image") 匹配所有圖像域；
- $(":reset") 匹配所有重置按鈕弄诲；
- $("button") 匹配所有按鈕炊昆；
- $("file") 匹配所有文件域；
表單對(duì)象屬性篩選選擇器
- $(":enabled") 選取可以使用的表單元素
- $(":disabled")選取不可以使用的表單元素
- $(":checked")選取被選擇中的<input>
- $(":selected")選取被選擇中的<option>元素
- 注意： 選擇器適用于復(fù)選框和單選框威根，對(duì)于下拉框元素, 使用 :selected 選擇器
在某些瀏覽器中凤巨，選擇器:checked可能會(huì)錯(cuò)誤選取到<option>元素，所以保險(xiǎn)起見(jiàn)換用選擇器input:checked洛搀，確保只會(huì)選取<input>元素
特殊選擇器this
$('p').click(function(){
//把p元素轉(zhuǎn)化成jQuery的對(duì)象
var $this= $(this)
$this.css('color','red')
})
attr()與.removeAttr()
- attr()有4個(gè)表達(dá)式：
- attr(傳入屬性名)：獲取屬性的值
- attr(屬性名, 屬性值)：設(shè)置屬性的值
- attr(屬性名,函數(shù)值)：設(shè)置屬性的函數(shù)值
- attr(attributes)：給指定元素設(shè)置多個(gè)屬性值敢茁，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }
- removeAttr()刪除方法：
.removeAttr( attributeName ) : 為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性（attribute） - 注意：Property是這個(gè)DOM元素作為對(duì)象，其附加的內(nèi)容留美，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法進(jìn)行取值或賦值等彰檬，獲取Attribute就需要用attr，獲取Property就需要用prop
html()及.text()
- .html()方法 ：獲取集合中第一個(gè)匹配元素的HTML內(nèi)容 或 設(shè)置每一個(gè)匹配元素的html內(nèi)容谎砾，具體有3種用法：
- .html() 不傳入值逢倍，就是獲取集合中第一個(gè)匹配元素的HTML內(nèi)容
- .html( htmlString ) 設(shè)置每一個(gè)匹配元素的html內(nèi)容
- .html( function(index, oldhtml) ) 用來(lái)返回設(shè)置HTML內(nèi)容的一個(gè)函數(shù)
- .text()方法：得到匹配元素集合中每個(gè)元素的文本內(nèi)容結(jié)合，包括他們的后代景图，或設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容较雕。，具體有3種用法：
- .text() 得到匹配元素集合中每個(gè)元素的合并文本挚币，包括他們的后代
- .text( textString ) 用于設(shè)置匹配元素內(nèi)容的文本
- .text( function(index, text) ) 用來(lái)返回設(shè)置文本內(nèi)容的一個(gè)函數(shù)
.val()
- .val()方法主要是用于處理表單元素的value值亮蒋，比如 input, select 和 textarea。具體有3種用法：
- .val()無(wú)參數(shù)妆毕，獲取匹配的元素集合中第一個(gè)元素的當(dāng)前值
2 .val( value )慎玖，設(shè)置匹配的元素集合中每個(gè)元素的值 - .val( function ) ，一個(gè)用來(lái)返回設(shè)置值的函數(shù)
- 通過(guò).val()處理select元素笛粘， 當(dāng)沒(méi)有選擇項(xiàng)被選中趁怔，它返回null
- .val()方法多用來(lái)設(shè)置表單的字段的值
如果select元素有multiple（多選）屬性，并且至少一個(gè)選擇項(xiàng)被選中薪前， .val()方法返回一個(gè)數(shù)組润努，這個(gè)數(shù)組包含每個(gè)選中選擇項(xiàng)的值
