JQuery與原生JS的那點事選擇器

為什麼jquery這麼火

1、在瀏覽器群雄割據的年代，各種不相容。(jquery2.0以上版本不支援ie6、7、8) 2、輕量級。你要想想前端的**多是要通過網路請求下來，雖然有快取，但是**越少越節約網路請求的時間。 3、各種方便的api。 4、健壯的外掛程式庫。 jquery的地位，就連比較牛的angular框架多要內建乙個jqlite。我們需要學習jquery,但是我們要在學習jquery的同時，理解原生的js，這才是王道。

下面的例子多是基於jquery(v3.1.1)

$()返回的是什麼型別

技巧：object.prototype.tostring.call()
$()始終返回的多是[object
object]
而對於原生的方法中多個元素返回[object nodelist](nodelist不是陣列)
如果是單個元素則返回[html***xelement]

$()的容錯功能

比如:$('.some').css('height','200px')如果.some不存在，這句**並不會報錯。
原生的document.queryselector('.some').style.height="200px",就會報錯。
仔細想想，誰又會傻到查詢乙個不存在的dom呢，假如你寫錯了(這是不是乙個很牽強的理由)，但是有一種情況是避免不了的，動態的dom.
所以那時候我們只能這樣寫：
var some = document.queryselector('.some');
if(some) 
雖然原生麻煩，但是卻在警示每個開發人員要以嚴謹的態度去寫**。

jq查詢方法與原生查詢方法的對比

-------------- jquery -------------- $(str) 是不是比較容易記。 -------------- 原生js -------------- document.queryselector() 返回的是單個元素不相容ie6、7. document.queryselectorall() 返回的nodelist 不相容ie6、7. document.getelementbyid() 返回的是單個元素 (還有其他的我就不介紹了，上面的已經夠用了，如果非要糾結ie6、7,那就用jquery吧) 這裡query兩個方法與$(str)幾乎沒什麼差別。但是這裡要特別主要應為這些方法多是要對字串解析的，所以你的字串越複雜，函式執行的效率越低，所以要注意方法的結合使用與你html**的合理編寫。也正是應為如此，jquery也提供很多減輕選擇器過於複雜的方法。下面我會針對各種選擇器列出(jquery,js,css)三種寫法 (css的部分寫法，可能相容性上有點問題)

(要通過jquery來複習js，是多麼慚愧的一件事。)

選擇器

-------------
元素選擇器
-------------
栗子：使li的背景顏色變成紅色
jq:$('li').css('background','red')
js: 這裡為了省事 就用了map(相容性有點問題-_-!)
array.prototype.map.call(document.queryselectorall('li'),function
(item)
) css:
li ---------------
類選擇器
---------------
栗子：使類名為some的背景顏色變成紅色
jq：$('.some').css('background','red')
js:這裡我們預設只有乙個some類（換一種寫法-_-)
document.queryselector('.some').style.background="red"
css:
.some 
------------
id選擇器
------------
栗子: 使id為box的元素的背景顏色改為紅色
jq:$('#box').css('background','red')
js:document.getelementbyid('box').style.background="red"
css:
#box 
這裡有個細節，jq和js對於id的查詢預設是唯一的，但是我在頁面中宣告兩個一樣的id並不會報錯，而在css中設定id的樣式，並不會考慮到唯一性。
所以這裡開發者應該多要遵循id唯一的原則，避免造成不必要的錯誤。
---------------
群組選擇器
---------------
栗子: 使ul和div的背景顏色變成紅色
jq:$('ul,div').css('background','red')
js: (上面提到map的相容性，所以我還是擴充套件nodelist的原型方法吧^-^。)
nodelist.prototype.map = function
(callback)
}document.queryselectorall('li,div').map(function
());
css:
ul,div 
----------------
後代選擇器
----------------
栗子: 使ul下面所有的li的背景顏色變成紅色(這裡要與繼承區別開)
jq:$('ul li').css('background','red');
通過上面幾個例子，js和css的寫法我就不寫了。
-------------
兒子選擇器
-------------
栗子: 使id為box的ul下的li的背景顏色變成紅色,而li裡面巢狀的ul的li不受影響(排除繼承)
jq:$('#box>li').css('background','red')
提供了children([selector])的方法,最好的寫法
$("#box").children().css('background','red');
這裡要特別注意，js是不提供鏈式呼叫的，千萬別這樣寫：
document.getelementbyid('box').queryselectorall('li')這是錯的。
-------------------
a + b
-------------------
栗子: 找出與a同級的後一位為b的元素的背景顏色變成紅色
jq:$('.p1 + div').css('background','red');
提供了next(selector)的方法,最好的寫法
$('.p1').next('div').css('background','red');
----------------
a ~ b
----------------
栗子: 找出與a同級的後面所有的b元素的背景顏色變成紅色
jq:$('.p1 ~ p').css('background','red');
同樣有nextall(selector)
$('.p1').nextall('p').css('background','red');
-----------------
.a.b
-----------------
同時滿足擁有.a.b類名的
jq:$('.p1.dai').css('background','red');
舉了這幾個例子，套路大家應該多懂了吧，還有很多選擇器，大家去看看文件吧，畢竟文件才是王道。
再嘮叨幾句屬性選擇器：
= 等於
!= 不等於
^= 以什麼開頭
$= 以什麼結尾
~= 以空格間隔的值列表
*= 含有子串
還有一些特別容易出錯的地方
:even是從0開始的 :nth-child()是從1開始的
:parent含有子元素的元素 :empty沒有子元素(文字節點也算)
但是parent()確是找到父元素。。
end()返回到上乙個狀態

這幾個jquery特有的方法還是挺重要的

------------------
prev與prevall
------------------
這個找乙個節點的同級節點的前面的乙個節點或者是所有節點
jq:$('.p1').prev('p').css('background','red');
$('.p1').prevall('p').css('background','red');
-------------
siblings
-------------
查詢兄弟節點
$('.p1').siblings('p').css('background','red');
---------------------------
nextuntil與prevuntil
---------------------------
nextuntil(selector): 往乙個節點的同級節點的前面查詢，直到selector停止。
prevuntil(selector):

JQuery與原生JS的那點事選擇器

jquery與原生js比較

原生js與jQuery操作DOM的區別

原生JS與jQuery操作DOM對比

JQuery與原生JS的那點事 選擇器

jquery與原生js比較

原生js與jQuery操作DOM的區別

原生JS與jQuery操作DOM對比

相關推薦

JQuery與原生JS的那點事選擇器