App下載

使用jQuery能做什么?

猿友 2021-01-15 13:36:53 瀏覽數(shù) (3763)
反饋

 jQuery 庫為 Web 腳本編程提供了通用(跨瀏覽器)的抽象層,使得它幾乎適用于任何腳本編程的情形。jQuery 通常能為我們提供以下功能:

1.方便快捷獲取DOM元素

  如果使用純 JavaScript 的方式來遍歷 DOM 以及查找 DOM 的某個(gè)部分編寫很多冗余的代碼,而使用 jQuery 只需要一行代碼就足夠了。例如,找到所有應(yīng)用了.content class 樣式的 div 中所有的P標(biāo)簽,只需要下面的一行代碼:

1 $('div.content').find('p');

2.動(dòng)態(tài)修改頁面樣式

  使用 jQuery 我們可以動(dòng)態(tài)的修改頁面的 CSS 即使在頁面呈現(xiàn)以后。jQuery 仍然能夠改變文檔中某個(gè)部分的類或者個(gè)別的樣式屬性。例如,找到頁面所有的 ul 標(biāo)簽的第一個(gè) li 子標(biāo)簽,然后為它們增加名為 active 的樣式,代碼如下:

1 $('ul > li:first').addClass('active');

3.動(dòng)態(tài)改變DOM內(nèi)容

  使用 jQuery 我們可以很容易地對頁面 DOM 進(jìn)行修改,例如,為 ID 為"container"的元素添加一個(gè)鏈接:

1 $('#container').append('<a href="more.html">more</a>');

4.響應(yīng)用戶的交互操作

  jQuery 提供了截獲形形色色的頁面事件(比如用戶單擊某個(gè)鏈接)的適當(dāng)方式,而不需要使用事件處理程序拆散 HTML 代碼。此外,它的事件處理API也消除了經(jīng)常困擾 Web 開發(fā)人員瀏覽器的不一致性。

1 $('button.show-details').click(function() {
2   $('div.details').show();
3 });

上面的代碼表示:為使用的 .show-details 樣式的 button 元素添加一個(gè) click 事件,事件就是:顯示使用 .details 樣式的 DIV。

5.為頁面添加動(dòng)態(tài)效果

  jQuery 中內(nèi)置的一批淡入、擦除之類的效果,以及制作新效果的工具包,為此提供了便利。

1    $(function () {
2             $("#btnShow").click(function () {
3                 $("#msubject").hide("slow");
4             });
5         });

6.統(tǒng)一Ajax操作

  jQuery 統(tǒng)一了多種瀏覽器的 Ajax 操作,使得開發(fā)人員更多的專注服務(wù)器端開發(fā)。

1 function (data, type) {
2     // 對Ajax返回的原始數(shù)據(jù)進(jìn)行預(yù)處理
3     return data // 返回處理后的數(shù)據(jù)
4 }

7.簡化常見的JavaScript任務(wù)。

  除了這些完全針對文檔的特性之外,jQuery 也改進(jìn)了對基本的 JavaScript 數(shù)據(jù)結(jié)構(gòu)(例如迭代和數(shù)組操作等)。

1 $.each(obj, function(key, value) {
2   total += value;
3 });


0 人點(diǎn)贊