首頁 > web前端 > js教程 > 使用jquery能做什麼

使用jquery能做什麼

青灯夜游
發布: 2020-12-21 11:34:43
原創
1699 人瀏覽過

使用jquery可以:1、方便快速取得DOM元素;2、動態修改頁面樣式;3、動態改變DOM內容;4、回應使用者的互動操作;5、為頁面新增動態效果;6、統一Ajax操作;7、簡化常見的JavaScript任務等。

使用jquery能做什麼

本教學操作環境:windows7系統、jquery1.10.0版本,此方法適用於所有品牌電腦。

推薦教學:jquery影片教學

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

1.方便快速取得DOM元素

  如果使用純JavaScript的方式來遍歷DOM以及尋找DOM的某個部分編寫很多冗餘的程式碼,而使用jQuery只需要一行程式碼就夠了。例如,找到所有應用了.content class樣式的p中所有的P標籤,只需要下面的一行程式碼:

$('p.content').find('p');
登入後複製

2.動態修改頁面樣式

  使用jQuery我們可以動態的修改頁面的CSS即使在頁面呈現以後。 jQuery仍然能夠改變文件中某個部分的類別或個別的樣式屬性。例如,找到頁面所有的ul標籤的第一個li子標籤,然後為它們增加名為active的樣式,程式碼如下:

$('ul > li:first').addClass('active');
登入後複製

3.動態改變DOM內容

使用jQuery我們可以輕鬆地對頁面DOM進行修改,例如,為ID為"container"的元素添加一個連結:

$('#container').append('<a href="more.html">more</a>');
登入後複製

4.回應使用者的互動操作

  jQuery提供了截獲形形色色的頁面事件(例如使用者點擊某個連結)的適當方式,而不需要使用事件處理程序拆散HTML程式碼。此外,它的事件處理API也消除了經常困擾網頁開發人員瀏覽器的不一致。

$(&#39;button.show-details&#39;).click(function() {
  $(&#39;div.details&#39;).show();
});
登入後複製

上面的程式碼表示:為使用的.show-details樣式的button元素新增一個click事件,事件就是:顯示使用.details樣式的p。

5.為頁面新增動態效果

jQuery中內建的一批淡入、擦除之類的效果,以及製作新效果的工具包,為此提供了便利。

$(function () {
            $("#btnShow").click(function () {
                $("#msubject").hide("slow");
            });
        });
登入後複製

6.統一Ajax操作

  jQuery統一了多種瀏覽器的Ajax操作,使得開發人員更多的專注伺服器端開發。

function (data, type) {
     // 对Ajax返回的原始数据进行预处理3     return data  // 返回处理后的数据4 }
登入後複製

7.簡化常見的JavaScript任務。

  除了這些完全針對文件的特性之外,jQuery也改進了對基本的JavaScript資料結構(例如迭代和陣列操作等)。

$.each(obj, function(key, value) {
  total += value;
});
登入後複製

更多程式相關知識,請造訪:程式設計教學! !

以上是使用jquery能做什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板