jQuery入門基礎知識學習指南

2024-05-06 16:24:30

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery入門基礎知識學習指南,jQuery是當下最主流人氣最高的JavaScript庫,需要的朋友可以參考下

打開一個網頁，如果 HTML 沒有完全加載完畢，就去操作頁面中元素是不安全的，但是監測 HTML 是否加載完畢呢?jQuery 提供了一個 $(document).ready() 方法，任何 ready 中的代碼在 HTML 完全加載完成后才會被執行。

$(document).ready(function() {

console.log('ready!');

});

此外，它還有一個簡寫方式

$(function() {

console.log('ready!');

});

$(document).ready() 中并非只能執行匿名方法，執行一個已命名的方法也是可以的：

function readyFn() {

// code to run when the document is ready

}

$(document).ready(readyFn);

選擇元素

jQuery 最基本的概念就是“選擇一些元素，然后對它們做一些事情”。jQuery 支持大多數的 CSS3 選擇器，另外還有一些非標準的選擇器，詳情見 http://api.jquery.com/category/selectors/，下面是一些常見選擇器的用法：

$('#myId'); // 此 ID 在頁面中必須唯一

$('div.myClass'); // 如果指定了元素類型，那么性能會有所提升

$('input[name=first_name]'); // 速度有點慢，盡量避免這種用法

$('#contents ul.people li');

$('a.external:first');

$('tr:odd');

$('#myForm :input'); // 選擇表單中的所有 input 類元素

$('div:visible');

$('div:gt(2)'); // 頁面中除了前 3 個 DIV 之外的所有 DIV

$('div:animated'); // 所有正在執行動畫的 DIV

需要注意的地方

當使用 :visible 和 :hidden 這種偽選擇器的時候，jQuery 實際上是去檢測他們在頁面中是否可見，還不是它們 css 中的 display 的值。也就是說，當一個元素在頁面正的物理寬度和高度都大于 0，那么它就是可見的。但是例外，jQuery 會根據元素的 CSS 中 display 屬性去判斷元素是否可見。

jQuery 的具體實現方式可以參考一下代碼：

jQuery.expr.filters.hidden = function( elem ) {

var width = elem.offsetWidth, height = elem.offsetHeight,

skip = elem.nodeName.toLowerCase() === "tr";

// does the element have 0 height, 0 width,

// and it's not a <tr>?

return width === 0 && height === 0 && !skip ?

// then it must be hidden

true :

// but if it has width and height

// and it's not a <tr>

width > 0 && height > 0 && !skip ?

// then it must be visible

false :

// if we get here, the element has width

// and height, but it's also a <tr>,

// so check its display property to

// decide whether it's hidden

jQuery.curCSS(elem, "display") === "none";

};

jQuery.expr.filters.visible = function( elem ) {

return !jQuery.expr.filters.hidden( elem );

};

選擇器結果集中是否包含有元素

執行了一個選擇器之后，如何判斷選擇器是否選擇到了元素，可能會想當然的寫下：

if ($('div.foo')) { ... }

其實這樣寫是不對的，因為不管選擇器是否選擇到元素，它都會返回一個對象，對象的布爾值肯定為 true，所以，所以此方法是行不通的。其實選擇器返回對象中有一個 length 屬性，通過這個屬性，可以確定選擇器中到底有幾個元素，如果里面一個元素都沒選擇到，那么返回 0-false，如果選擇到了元素，返回元素的實際數目-true。

if ($('div.foo').length) { ... }

給選擇器做個緩存

每做一次選擇器，jQuery 都要執行很多代碼，如果你需要多次使用相同的一個選擇器，最好給選擇器做個緩存，以避免重復執行選擇器。

var $divs = $('div');

注意，此段代碼中用作緩存變量的變量名以 $ 開頭，這個美元符號在 JavaScript 中僅僅是一個普通的字符，沒有其它特殊意義，這里使用 $ 開頭，也僅僅是一個約定俗成的習慣，并非強制要求。

一旦選擇器被緩存到變量中，就可以在變量中調用 jQuery 的方法了，跟調用選擇器沒什么兩樣。

另外還需要注意的是，選擇器只能選擇頁面當前中的元素，如果在執行了選擇器后又往頁面中添加元素，那么后天加的元素并沒有包含在之前的選擇器中，除非往頁面中添加元素后再次執行選擇器。

帶有過濾功能的選擇器

有時候執行一個選擇器之后，并非結果集中的所有元素都是我們想要的，那么就需要對結果集再進行一次過濾：

$('div.foo').has('p'); // 所有包含有 <p> 的 div.foo

$('h1').not('.bar'); // 沒有被標記 bar 這個類的 h1 元素

$('ul li').filter('.current'); // 帶有類 current 的無序列表

$('ul li').first(); // 無序列表中的第一個元素

$('ul li').eq(5); // 第六個

選擇表單元素

jQuery 提供了一些偽選擇器來選擇表單元素，非常有用。

:button 選擇按鈕

:checkbox 選擇多選框

:checked 選擇被選中的表單元素

:disabled 選擇被禁用的表單元素

:enabled 選擇被啟用的表單元素

:file 選擇 type="file" 的表單元素

:image 選擇 type="image" 的表單元素

…… ……

$('#myForm :input'); // 選擇所有可輸入的表單元素

如何使用選擇器

執行了選擇器之后，就可以調用選擇器中的方法了。這些方法分為兩類：getter 和 setter，getter 返回結果集中第一個元素的屬性，setter 可以設置結果集中所有元素的屬性。

鏈式操作

jQuery 選擇器中的大多數方法都會返回的都是 jQuery 對象本身，所以在調用一個方法后，可以繼續在這個方法上繼續調用其它方法，猶如連招一般：

$('#content').find('h3').eq(2).html('new text for the third h3!');

對于鏈式操作而言，保持代碼的可讀性很重要：

$('#content')

.find('h3')

.eq(2)

.html('new text for the third h3!');

如果再鏈式操作中，選擇器中的元素有所變化，那么可以用 $.fn.end 方法返回到最初的結果集：

$('#content')

.find('h3')

.eq(2)

.html('new text for the third h3!')

.end() // 返回最初的結果集

.eq(0)

.html('new text for the first h3!');

鏈式操作非常好用，以至于現在很多其它 JavaScript 庫都加入了類似特性。但是對于鏈式操作也要小心使用，過長的鏈式操作會給代碼的修改和調試帶來困難。對于鏈式操作的長度沒有硬性規定 — 只要你覺得能 Hold 住。

jQuery 對有些方法進行了“重載”，所有對某元素賦值或取值的時候所用的方法名是一樣的，只是參數列表不同。當用 jQuery 方法對元素賦值的時候，它稱為 setter，取值的時候稱為 getter。setter 會對選擇器中的所有所有元素賦值，getter 只取得選擇器中第一個元素的值。

$('h1').html('hello world'); // setter

var str = $('h1').html(); // getter

setter 返回的是 jQuery 對象，可以繼續在這個對象上調用 jQuery 方法(鏈式操作)，getter 僅放回我們想要的值，返回值不是 jQuery 對象，所以不能繼續鏈式操作了。

jQuery 操作 CSS

jQuery 可以很方便的設置或取得元素的 CSS 屬性。

CSS 屬性如果要想在 JavaScript 中使用，多要轉換成駱駝命名法(camel cased)，例如 CSS 中的 font-size 屬性，在 JavaScript 中對應的是 fontSize，但是 jQuery 的 $.fn.css 方法對此做了特殊處理，無論使用哪種寫法都可以。

例如：

var strsize1 = $('h1').css('fontSize'); // 返回 "19px"

var strsize2 = $('h1').css('font-size'); // 同上

$('h1').css('fontSize', '100px'); // 給單個屬性賦值

$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // 給多個屬性賦值

上面可以看到，一次性給多個屬性賦值的時候，實際上傳入的是一個對象，這個對象中包含了一些可以表示 CSS 屬性的鍵-值對，在 jQuery 的很多 setter 方法中都有類似用法。

jQuery 操作元素的 class 屬性

作為一個 getter，$.fn.css 確實很好用，但是應該盡量避免將其作為 setter 使用，因為一般不建議在 JavaScript 代碼中包含太多的樣式代碼。比較靠譜的方法是把樣式規則單獨分開寫成類(class)，然后用 JavaScript 將類應用到元素上即可：

var $h1 = $('h1');

$h1.addClass('big');

$h1.removeClass('big');

$h1.toggleClass('big');

if ($h1.hasClass('big')) { ... }

尺寸

jQuery 中有很多方法可以用來獲取或者修改元素的尺寸或者位置信息。

$('h1').width('50px'); // 設置所有 h1 元素的寬度

$('h1').width(); // 得到第一個 h1 元素的寬度

$('h1').height('50px'); // 設置所有 h1 元素的高度

$('h1').height(); // 得到第一個 h1 元素的高度

$('h1').position(); // 返回第一個 h1 元素

// 的位置信息，此返回值是一個對象

// 此位置是相對其父元素的位置的偏移量