jQuery的選擇器效能

2021-06-25 22:01:16 字數 895 閱讀 2822

發現自己經常在涉及到jquery選擇器的時候出現猶豫,於是在這邊記一下。

首先,jquery選擇器主要分為兩類:偽類選擇器和css選擇器

這邊著重需要考慮到效能問題的是偽類選擇器

思路:盡量不使用偽類選擇器(慢)

偽類選擇器又大概分為這麼幾種:

1、選擇表單元素

如    :checkbox :select等等。如果不考慮效能,考慮方便。我們一般寫成

$("element:checkbox");
考慮效能後,更好的寫法是
$("element[type=checkbox]");
如果一定要使用前面一種寫法,那麼記得要加上前面的標籤名。

2、選擇部分元素

如     :even :lt :gt等等

不考慮效能:

$("element:even");
考慮效能:
$("element").filter(":even");
其中,:lt和:gt是選擇一定範圍內的元素。在效能上考慮,可以用別的方式實現。

:lt(index)可以用.slice(0,index)替代

:gt(index)可以用.slice(index)替代

3、所有有對應方法的偽類選擇器

如 :has :not等等

:has應該用.has()替代

.not應該用.not()替代

其餘未說明的可以不考慮效能問題。

css選擇器:jquery預設根據瀏覽器支援來選擇效能最佳的查詢方法

總結:善用.filter()可以提公升選擇器的效能

這些工作都不是必須的,但需要日常積累養成這樣一種意識。

個人見解,有意見歡迎指出。

Jquery 選擇器 簡單的選擇器

1.3簡單的偽類選擇器 你們好你們好 你們好你們好 你們好你們好 1.3.1特定位置選擇器 主要包括 first last,eq index 3中位置 p first css color blue 匹配第乙個p標籤 p eq 3 css background yellow 匹配第4個p標籤 p la...

JQuery選擇器 選擇器簡介

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

Jquery選擇器 基本選擇器

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