jQuery選擇器
通過傳遞對(duì)應(yīng)規(guī)則的內(nèi)容(ID、標(biāo)簽名、樣式類名...),獲取到頁面中指定的元素/元素集合桌吃。
jQuery選擇器獲取到的結(jié)果是一個(gè)jQuery對(duì)象,可以使用jQuery中提供的那些屬性和方法,但是不能直接的使用瀏覽器內(nèi)置的屬性和方法的圆。
var $oDiv = jQuery("#div1");//==> $oDiv = $("#div1") -> $===jQuery
// console.log($oDiv.innerWidth());
// console.log($oDiv.attr(""));
// console.log($oDiv.clientWidth);//->undefined $oDiv沒有這個(gè)屬性
// console.log($oDiv.getAttribute(""));//->$oDiv.getAttribute is not a function
JS獲取到的結(jié)果是屬于元素對(duì)象/元素集合/節(jié)點(diǎn)集合...它們可以使用瀏覽器為其提供的那些天生自帶的屬性和方法。
var oDiv = document.getElementById("div1");
// console.log(oDiv.clientWidth);
// console.log(oDiv.getAttribute("zhufeng"));
// console.log(oDiv.innerWidth());//->oDiv.innerWidth is not a function 原生的JS對(duì)象是不能直接的使用jQuery中提供的屬性和方法的
// console.log(oDiv.attr(""));
關(guān)于原生JS對(duì)象和jQuery對(duì)象之間的轉(zhuǎn)換
//->原生轉(zhuǎn)變?yōu)閖Query: $(原生JS對(duì)象)
//console.log($(oDiv).attr(""));
//->jQuery轉(zhuǎn)變?yōu)樵褐苯油ㄟ^索引獲取對(duì)應(yīng)的元素對(duì)象即可
//console.log($oDiv[0].getAttribute(""));
//$oDiv.get(0); <==> $oDiv[0] 都是通過索引來獲取指定位置的元素對(duì)象(JS原生對(duì)象)
更多的jQuery選擇器
//$("#div1")
//$("div")
//$(".w100")
//$("*")
//$("#div1,div,.w100") 把每一個(gè)選擇器獲取到的jQuery對(duì)象最后融合在一起,一起獲取到
//$("#div1 li") 在子子孫孫級(jí)中進(jìn)行查找
//$("#div1>li") 在子集中進(jìn)行查找
//$("#div3+") 獲取它的下一個(gè)弟弟
//$("#div3+ul") 獲取它的下一個(gè)弟弟并且標(biāo)簽名是ul的
//$("#div3~") 獲取它的所有弟弟元素
//$("#div3~ul") 在所有的弟弟元素中查找標(biāo)簽名為ul的
//$("#div1>div:not(.w100)") #div1下所有子集DIV中樣式類名不包含w100的
//$("#div1>div:eq(0)") 通過索引獲取集合中的某一個(gè),但是獲取的結(jié)果依然是一個(gè)jQuery對(duì)象(而之前講到的get方法,雖然也是通過索引來獲取,但是獲取到的結(jié)果是一個(gè)JS原生對(duì)象)
//$("#div1>div:gt(1)") 大于索引1的(不包含索引1這一項(xiàng))
//$("#div1>div:lt(1)") 小于索引1的(不包含索引1這一項(xiàng))
//$("#div1 li:contains('aa')") 獲取的所有LI中內(nèi)容包含珠峰的
//$("#div1 div:has(ul)") 在所有DIV中包含UL的
//$("#div1>*:nth-child(1)") 獲取集合中的第一個(gè) $("#div1>*:eq(1)") 獲取集合中的第二個(gè)(索引為1)
