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

2021-07-23 22:07:38 字數 4714 閱讀 7508

為什麼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比較

以選擇符為例,類似於這種 class 方式,在ie裡面,肯定比 id 低很多,而對於chrome和firefox,則因為提供了getelementsbyclassname 介面,所以速度不會特別慢,不需要遍歷所有元素檢視class,所以考慮乙個綜合的方案,應優先使用id選擇符。測試方法 對於一次處理...

原生js與jQuery操作DOM的區別

一 建立元素節點 1.1 原生js建立元素節點 1 document.createelement p 1.2 jquery建立元素節點 1 二 建立並新增文字節點 2.1 原生js建立文字節點 1 document.createtextnode text content 通常建立文字節點和建立元素節...

原生JS與jQuery操作DOM對比

1.1 原生js建立元素節點 1 document.createelement p 1.2jquery建立元素節點 1 2.1 原生js建立文字節點 1 document.createtextnode text content 1 2 3 var textel document.createtext...