jquery怎麼寫,效率最高

2021-09-01 04:51:36 字數 1151 閱讀 1966

最近看到一些不錯的文章,轉來坐一下筆記。

其內容和一些新提供的方法還是很多有值得學習的地方。

1. 使用最新版本的jquery

jquery的版本更新很快,你應該總是使用最新的版本。因為新版本會改進效能,還有很多新功能。

下面就來看看,不同版本的jquery效能差異有多大。這裡是三條最常見的jquery選擇語句:

$('.elem')

$('.elem', context)

context.find('.elem')

我們用1.4.2、1.4.4、1.6.2三個版本的jquery測試,看看瀏覽器在1秒內能夠執行多少次。結果如下:

可以看到,1.6.2版本的執行次數,遠遠超過兩個老版本。尤其是第一條語句,效能有數倍的提高。

其他語句的測試,比如.attr("value")和.val(),也是新版本的jquery表現好於老版本。

2. 用對選擇器

在jquery中,你可以用多種選擇器,選擇同乙個網頁元素。每種選擇器的效能是不一樣的,你應該了解它們的效能差異。

(1)最快的選擇器:id選擇器和元素標籤選擇器

舉例來說,下面的語句效能最佳:

$('#id')

$('form')

$('input')

遇到這些選擇器的時候,jquery內部會自動呼叫瀏覽器的原生方法(比如getelementbyid()),所以它們的執行速度快。

(2)較慢的選擇器:class選擇器

$('.classname')的效能,取決於不同的瀏覽器。

firefox、safari、chrome、opera瀏覽器,都有原生方法getelementbyclassname(),所以速度並不慢。但是,ie5-ie8都沒有部署這個方法,所以這個選擇器在ie中會相當慢。

(3)最慢的選擇器:偽類選擇器和屬性選擇器

先來看例子。找出網頁中所有的隱藏元素,就要用到偽類選擇器:

$(':hidden')

屬性選擇器的例子則是:

$('[attribute=value]')

這兩種語句是最慢的,因為瀏覽器沒有針對它們的原生方法。但是,一些瀏覽器的新版本,增加了queryselector()和queryselectorall()方法,因此會使這類選擇器的效能有大幅提高。

最後是不同選擇器的效能比較圖。

**

jQuery外掛程式的怎麼寫

對於jquery之前一直用,也看到過別人寫的外掛程式,直到最近才想著學習怎麼寫自己的jquery外掛程式,今天看了網上的一些資料,發現其實很簡單的。先看乙個簡單的jquery外掛程式的例子 使用的時候要先導入jquery外掛程式,比如 p bold red 這樣p標籤內容就會變為紅色粗體。那麼,如何...

JQuery效率問題

1,前言 我們開發了乙個專題系統,生成了json的資料格式,採用jquery動態插入html中,在前期的使用中,沒有太大的問題,效率還可以接受,但是最近可能由於網路加之頁面設計問題,我們的js效率比較差,長達10多秒中,實在難以忍受,到底是什麼原因呢?2,分析 我觀察了一下js指令碼,應該說沒有太費...

有害的「這樣效率最高」思維

在與一些人交流時經常碰到對方說,你的方法好是好,就是不如現在的方式效率高,因此並不願意作出改變。我們來分析下,為什麼說這樣的思維方式是有害的。有些團隊包括技術背景出身的po不願意按可交付的方式拆分需求,原因是原來的方式雖然不能頻繁交付,但最節省時間,效率最高。這種思維是有害的,首先 頻繁交付的一大目...