首頁 > 文章 > web前端 > 關於jquery DOM&事件的講解

關於jquery DOM&事件的講解

jacklove原創: 2018-05-21 10:39:141337瀏覽

在學習中常會遇到jquery DOM&事件，本篇將會詳解jquery DOM&事件。

函式庫和框架的差別？

庫就是提供了很多方法，相當於倉庫裡有各種小工具，需要什麼工具的時候就直接用。

框架就是搭好了一個架子，大的主體已經確定，只需要往裡面填充各種工具。

jquery 能做什麼？ jquery 物件和 DOM 原生物件有什麼差別？如何轉化？

jquery可以遍歷HTML文字、DOM節點的操作、事件的處理、動畫也以及ajax功能，讓你不用考慮相容性在更多的平台去使用它。
特點是：輕量級（32kb）、相容css3、跨瀏覽器、

jquery 物件和DOM 原生物件的區別是jqery物件是原生物件經過包裝後的對象，它擁有的是jquery物件專屬的一些方法，使用起來很方便。

query直接使用陣列的方法([索引數下標])將轉換為原生DOM對象，如果使用eq方法則結果也為query物件。而原生物件轉化為jquery物件只需要用$()包裹住就可以了。
如：

jquery物件轉原生> $(#head)[0]

原生物件轉jquery > $(原生物件)

jquery中如何綁定事件？ bind、unbind、delegate、live、on、off都有什麼作用？推薦使用哪一種？使用on綁定事件使用事件代理的寫入？

在jquery中可以綁定事件用如下寫法：

$("button").click(function() {
    alert(1);
} );
$("button").bind(&#39;click&#39;, function(e){    console.log(e);
    alert(2);
});
$("button").on(&#39;click&#39;, function(){    console.log(e);    console.log(this);    console.log($(this));
});

bind 為元素添加一個綁定事件（1.7版本之後建議使用on代替bind）

#unbind 解除一個元素綁定事件（1.7版本前使用的方法）

delegate 相當於事件代理（可指定元素）為元素添加一個或多個綁定事件（1.7版本之後建議用on代替）

live 相當於使用了事件代理（對於根節點），為元素添加一個或多個綁定事件（在1.7版本之後被廢除，用on代替）

#on 在被選元素及子元素上新增一個或多個事件處理程序（最建議使用的方法）

off 是用來移除.on()方法新增的事件處理程序

on()的方法把上面幾種方法統一了，所以現在推薦使用.on()的方法，寫法為：

$( "#members" ).on( "click","li a",function ( e ) {} );
這裡注意子元素的位置在click之後，代表使用了事件代理

jquery 如何展示/隱藏元素？ jquery 動畫如何使用？

展示元素: $(selector).show(speed,callback);

隱藏元素: $(selector).hide(speed,callback);

展示和隱藏切換: $(selector).toggle(speed,callback);

淡入淡出:

$(selector).fadeIn(speed,callback); //淡入
$(selector).fadeOut(speed,callback); //
淡出$(selector).fadeToggle(speed,callback); //
淡入淡出切换$(selector).fadeTo(speed,opacity,callback);  //渐变到透明度

滑入滑出:

$(selector).slideDown(speed ,callback); //滑入$(selector).slideUp(speed,callback); //滑出$(selector).slideToggle(speed,callback); //切換

可選的speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。

jquery動畫 $(selector).animate({parmas},speed,callback);

params為必選參數，是動畫的css屬性。 speed是可選參數，規定動畫效果的時長，取slow、fast、或毫秒值。 classback為動畫完成後所執行的函數。

如何設定和取得元素內部HTML內容？如何設定和取得元素內部文字？

設定或取得HTML內容：$(selector).html()

設定或取得文字內容：$(selector).text()

有參數代表設定，沒有參數代表獲取。

如何設定和取得表單使用者輸入或選擇的內容？如何設定和取得元素屬性？

設定或取得表單使用者輸入內容$('#input').val()

#設定或取得表單選擇內容$('input:checked')或$(':checked ')