5個jquery 選擇器小tips

2021-08-31 22:49:18 字數 893 閱讀 3058

jquery 選擇器是十分強大的,但在使用時,應該注意其效率問題,在sitepoint

上的新文章總結的比較好小結了,如下:

1 盡可能使用id屬性

盡可能使用id屬性去選擇元素,這樣即使在舊的瀏覽器,速度也會很快

$("#myelement");

2 避免只使用 class屬性去搜尋

比如$(".myclass");

這樣,在ie 6/7等舊點的瀏覽器中,必須檢查頁面上所有的元素,以確定.myclass能否被應用,應該這樣:

$("div.myclass");

3 讓選擇器盡可能簡單,不要使用多於3層的選擇器,比如

$("body #page:first-child article.main p#intro em");

4 注意選擇器的順序

比如:$("p#intro em"); 中,

jquery會將每個em元素載入到陣列中,如果em元素一多起來,效率會低,可以採用如下兩個方法解決:

$("em", $("p#intro")); // or

$("p#intro").find("em");

5 避免重複選擇

$("p").css("color", "blue");

$("p").css("font-size", "1.2em");

$("p").text("text changed!");

可以寫成:

$("p").css().text("text changed!");

如果要多次用jquery物件的話可以先把其儲存為變數,再操作,比如

var $p = $("p");

$p.css("color", "blue");

$p.text("text changed!");

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...

jQuery選擇器之全選擇器( 選擇器)

在css中,經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery,如果要獲取文件中所有的元素,通過document.getelementsbytagname 中傳遞 同樣可以獲取到 不難發現...