html5選擇器真比jquery 選擇器效率快嗎

HTML5向Web API新引入了document.querySelector以及document.querySelectorAll兩個(gè)方法用來(lái)更方便地從DOM選取元素，功能類似于jQuery的選擇器。這使得在編寫原生JavaScript代碼時(shí)方便了許多.如：

創(chuàng)新互聯(lián)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)，成都品牌網(wǎng)站建設(shè)，廣告投放等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，十載的網(wǎng)站開發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè)，成功案例突破近千家,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.

標(biāo)簽選擇

element = document.querySelector('selectors');

elementList = document.querySelectorAll('selectors');

多標(biāo)簽

element = document.querySelector('selector1,selector2,...');

elementList = document.querySelectorAll('selector1,selector2,...');

iD 和class

element = document.querySelector('div#container');//返回id為container的首個(gè)div

element = document.querySelector('.foo,.bar');//返回帶有foo或者bar樣式類的首個(gè)元素

elements = document.querySelectorAll('div.foo');//返回所有帶foo類樣式的div

jQuery本身在dom操作上速度就一般，jQuery只是原生JS的一個(gè)自定義框架，速度首先敢原生就差很遠(yuǎn)了。所以JQ跟HTML5原生自帶的選擇器根本就沒辦法比。當(dāng)然有時(shí)候和JQ結(jié)合速度也會(huì)比你只使用上面說(shuō)的選擇器快，首先您得記住將DOM緩存起來(lái) 如：

var a=$("#a");//緩存元素

var b=$("#a").find(".b");//緩存元素

function doa(){

b.toggle();

}

//如果我們要執(zhí)行一個(gè)點(diǎn)擊就讓b顯示隱藏的話，也就是多次操作該DOM，上面的寫法要比下面的快很多很多

function doa(){

y$("#a").find(".b").toggle();

}

html5選擇器有哪些呀

CSS3 選擇器大概有一下幾個(gè)類型：

全局選擇器????Universal Selector

類型選擇器????Type Selector

屬性選擇器????Attribute Selectors

偽類????Pseudo-classes

偽元素????Pseudo-element

Class 選擇器????Class Selectors

ID 選擇器????ID?Selectors

選擇符????Combinator

下面是 W3C 官網(wǎng)上關(guān)于 Selector Level 3 的一個(gè)表格。我翻譯了一下。

不同瀏覽器對(duì) CSS 選擇器有不同程度的支持，目前的瀏覽器（IE9前除外）已經(jīng)支持了下面的絕大部分選擇器。

* ? ?任何元素

E ? ?一個(gè) E 類型的元素 ?

E[foo] ? ?擁有“foo”屬性的E 元素

E[foo="bar"] ? ?擁有屬性值等于“bar”的“foo”屬性的 E 元素

E[foo~="bar"] ? ?一個(gè) E 元素，它的“foo”屬性值是通過(guò)空格分開的一系列的值，其中有一個(gè)值等于“bar”

E[foo^="bar"] ? ?一個(gè) E 元素，它的“foo”屬性的值是一個(gè)以“bar”開頭的字符串

E[foo$="bar"] ? ?一個(gè) E 元素，它的“foo”屬性的值是一個(gè)以“bar”結(jié)尾的字符串

E[foo*="bar"] ? ?一個(gè) E 元素，它的“foo”屬性值包含字符串“bar”

E[foo|="en"] ? ?一個(gè) E 元素，它的“foo”屬性的值是通過(guò)連字符（-）分割的一系列的值的字符串，其中有一個(gè)值是以“en”開頭 ?

E:root ? ?一個(gè) E 元素，是文檔的根元素

E:nth-child(n) ? ?一個(gè) E 元素，是它父元素的第 n 個(gè)子元素

E:nth-last-child(n) ? ?一個(gè) E 元素，是它父元素的倒數(shù)第 n 個(gè)子元素

E:nth-of-type(n) ? ?一個(gè) E 元素，在它同類型的兄弟元素中排在第 n 個(gè)

E:nth-last-of-type(n) ? ?一個(gè) E 元素，在它同類型的兄弟元素中排行倒數(shù)第 n 個(gè)

E:first-child ? ?一個(gè) E 元素，是它父元素的第一個(gè)子元素

E:last-child ? ?一個(gè) E 元素，是它父元素的最后一個(gè)子元素

E:first-of-type ? ?一個(gè) E 元素，是它同類型兄弟元素中的第一個(gè)

E:last-of-type ? ?一個(gè) E 元素，是它同類型的兄弟元素中的最后一個(gè)

E:only-child ? ?一個(gè) E 元素，是它父元素的唯一一個(gè)子元素

E:only-of-type ? ?一個(gè) E 元素，是它同類型的兄弟元素的唯一一個(gè)（沒有別的同類的兄弟）

E:empty ? ?一個(gè)沒有子元素的 E 元素

E:link????一個(gè)沒有被訪問(wèn)過(guò)的，作為超鏈接的錨點(diǎn)的 E 元素

E:visited ? ?一個(gè)被訪問(wèn)過(guò)的錨點(diǎn) E 元素 ?

E:active? ? 一個(gè)正處于某些用戶操作狀態(tài)的 E 元素

E:hover????一個(gè)鼠標(biāo)滑過(guò)的 E 元素

E:focus ? ? 一個(gè)獲得用戶焦點(diǎn)的 E 元素

E:target ? ?一個(gè)做為起 Refer 制定錨點(diǎn)的元素（url hash 相關(guān)）

E:lang(fr) ? ?一個(gè) language 是 fr 的 E 元素 ?

E:enabled????一個(gè)UI 操作上 enabled 的 E 元素

E:disabled ? ?一個(gè) UI 操作上 disabled 的 E 元素 ?

E:checked ? ?一個(gè) UI 操作上狀態(tài)為 checked 的 E 元素

E::first-line ? ?E 元素中格式化后的第一行

E::first-letter ? ?E 元素的第一個(gè)字母

E::before ? ?在 E 元素之前生成的內(nèi)容

E::after ? ? 在 E 元素之后生成的內(nèi)容

E.warning ? ?一個(gè)class 屬性包含 warning 的 E 元素

E#myid ? ?一個(gè) ID 為 myid 的 E 元素

E:not(s) ? ?一個(gè)不匹配簡(jiǎn)單的選擇器 s 的 E 元素

E F ? ?一個(gè)作為 E 元素后代的 F 元素

E F ? ?一個(gè)作為 E 元素子元素的 F 元素

E + F ? ?一個(gè)緊跟在 E 元素后面的 F 元素

E ~ F ? ?一個(gè)出現(xiàn)在 E 元素前面（緊挨著）的 F 元素

html5中的幾種常見選擇器

每天一更新，這些初級(jí)html知識(shí)你掌握了嗎？

css選擇器的優(yōu)先級(jí)：作用的元素一樣，樣式一樣，就會(huì)有優(yōu)先級(jí)問(wèn)題。

* 通配選擇器 0

* 標(biāo)簽名選擇器 1

* 類選擇器 10

* id選擇器 100

* 后代選擇器 選擇器1 選擇器2 ...（會(huì)有相加的過(guò)程）

* 群組選擇器 選擇器1,選擇器2,... (不會(huì)有相加的過(guò)程)

注意：

* 1.相同類型的選擇器 樣式?jīng)_突下 后覆蓋前

* 2.不同類型的選擇器 樣式?jīng)_突下 優(yōu)先級(jí)高覆蓋優(yōu)先級(jí)低

* 3.* Tags class id style !important

* 4.!important慎用(非得用的時(shí)候，要加注釋說(shuō)明一下)