JQuery绑定及效果
生活随笔
收集整理的這篇文章主要介紹了
JQuery绑定及效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JQuery綁定及效果
文章目錄
- JQuery綁定及效果
- 一、JQuery的四種事件綁定
- 1.bind(type,[data],function(eventObject))
- 2.live(type, [data], fn)
- 3.delegate
- 4.on
- 二、this
- 1.獲取元素的索引值
- 2.this和$(this)
- 3.jQuery中this與$(this)的區別
- 三、效果
- 1.隱藏和顯示
- 2.淡入淡出
- 3.jQuery 滑動方法
- 4.jQuery 動畫 - animate() 方法
- 5.jQuery stop()
- 6.chaining
一、JQuery的四種事件綁定
jQuery提供了多種綁定事件的方式，每種方式各有其特點，明白了它們之間的異同點，有助于我們在寫代碼的時候進行正確的選擇，從而寫出優雅而容易維護的代碼。下面我們來看下jQuery中綁定事件的方式都有哪些。
jQuery中提供了四種事件監聽方式，分別是bind、live、delegate、on，對應的解除監聽的函數分別是unbind、die、undelegate、off。
1.bind(type,[data],function(eventObject))
- bind是使用頻率較高的一種，作用就是在選擇到的元素上綁定特定事件類型的監聽函數，參數的含義如下：
- type:事件類型，如click、change、mouseover等;
- data:傳入監聽函數的參數，通過event.data取到?？蛇x;
- function:監聽函數，可傳入event對象，這里的event是jQuery封裝的event對象，與原生的event對象有區別，使用時需要注意
- bind的源碼：
- bind的特點就是會把監聽器綁定到目標元素上，有一個綁一個，在頁面上的元素不會動態添加的時候使用它沒什么問題。
- 但如果列表中動態增加一個“列表元素”，點擊它是沒有反應的，必須再bind一次才行。 要想不這么麻煩，我們可以使用live。
- jQuery還有一種事件綁定的簡寫方式如a.click(function(){});、a.change(function(){});等，它們的作用與bind一樣，僅僅是簡寫而已。
2.live(type, [data], fn)
- live的參數和bind一樣，它又有什么蹊蹺呢，我們還是先瞄一眼源碼：
- 可以看到**live方法并沒有將監聽器綁定到自己(this)身上，而是綁定到了this.context上了**。這個context是什么東西呢?其實就是元素的限定范圍，看了下面的代碼就清楚了：
- 通常情況下，我們都不會像第三種方式那樣使用選擇器，所以也就認為這個context通常就是document了，即live方法把監聽器綁定到了document上了。
- 不把監聽器直接綁定在元素上，你是不是想起事件委托機制來了呢?
- live正是利用了事件委托機制來 完成事件的監聽處理，把節點的處理委托給了document。在
- 監聽函數中，我們可以用event.currentTarget來獲取到當前捕捉到事件的 節點。下面的例子來揭曉：
3.delegate
- live存在那樣的缺點，所以我們就思考，既然老爺子負擔那么重，可不可以別把監聽器綁定在document上呢，
- 綁定在就近的父級元素上不就好了。順應正常邏輯，delegate破殼而出
- 參數多了一個selector，用來指定觸發事件的目標元素，監聽器將被綁定在調用此方法的元素上。看看源碼：
- 又是調用了on，并且把selector傳給了on。看來這個on真的是舉足輕重的東西。照樣先不管它。
看看示例先：
$('#myol').delegate('li','click',getHtml);4.on
看了這么多，你是不是迫不及待想看看這個on的真實面目了呢，這就來：
on(type,[selector],[data],fn)- 參數與delegate差不多但還是有細微的差別，首先type與selector換位置了
- 其次selector變為了可選項。交換位置的原因不好查證，應該是為了讓視覺上更舒服一些吧。
我們先不傳selector來看一個例子：
$('#myol li').on('click',getHtml);- 可以看到event.currentTarget是li自己，與bind的效果一樣。至于傳selector進去，就是跟delegate一樣的意義了，除了參數順序不同，其他完全一樣。
- 終于看到on的真實作用了，那么，這么多的事件綁定方式，我們該如何進行選擇呢?
- 其實這個問題是完全不必糾結的，因為你已經知道他們之間的區別了不是么?根據實際情況斟酌使用就行。
- 不過官方有一個推薦就是盡量使用on，因為其他 方法都是內部調用on來完成的，直接使用on可以提高效率，而且你完全可以用on來代替其他三種寫法。
- 至于如何代替我想就不必這么直白的寫出來了，真正理 解它們的區別之后自然而然也就不是難事了
二、this
1.獲取元素的索引值
有時候需要獲得匹配元素相對于其同胞元素的索引位置，此時可以用index()方法獲取
var $li = $('.list li').eq(1); alert($li.index()); // 彈出1 ...... <ul class="list"><li>1</li><li>2</li><li>4</li><li>5</li><li>6</li> </ul>2.this和$(this)
當你用的是jquery時，就用$(this)，如果是JS，就用this
$(this).html( $(this).html() + " BAM! ");- 這個里的html()是JQUERY方法，用$(this).html()
- 當然，JS里也有相似方法innerHTML，如果用innerHTML，就要這樣寫了，這里的reset是JS方法，所以同上得用this.reset()：
- jquery對象$ (this)[0]等同于JS里的元素this，這里的this是一樣的
- JS里的元素只要包上$()就是jquery對象了，而jquery的對象只要加上[0]或者.get(0)，就是js元素了。
- $(this)是jquery對象，this就是簡單指當前元素。
- jquery對象不能直接指定元素的屬性（ele.style），需要get（index）或者直接（index）取得對象中元素才行
- JQuery中的 $() 這個符號，實際上這個符號在JQuery中相當于JQuery（），即：
- 也就是說，這樣可以返回一個jquery對象。那么，當你在網頁中alert($('#id'));時，會彈出一個[object Object ]，這個object對象，也就是jquery對象了。
- 那么，我們再回過頭來說$(this)，這個this是什么呢？假設我們有如下的代碼：
那么，這時候可以看出來：
alert($(this)); //彈出的結果是[object Object ]alert(this); //彈出來的是[object HTMLImageElement]3.jQuery中this與$(this)的區別
$("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } ); 這里的this其實是一個html 元素(textbox)，textbox有text屬性，所以這樣寫是完全沒有什么問題的。但是如果將this換成(this)就不是那回事了，報Error了。this與(this)的區別在此。
\\Error Code： $("#textbox").hover( function() { $(this).title ＝ "Test"; }, function() { $(this).title = "OK"; } );- $()這是jQuery的一個函數，也是最核心最基本的函數
- 功能一：傳入一個選擇器字符串，獲得這個選擇器對應的dom內容，保存在[]中，也就是俗稱的jQuery對象。例如
- 功能二：傳入一個匿名函數 ，例如
- 功能三：將JavaScript對象包裝成為jQuery對象。例如
- this是javascript自身的語法關鍵字，它指向一個javascript對象，所以可以使用所指向的目標javascript對象所擁有的方法,但他自己不是一個普通的變量，所以你無法自己定義一個變量叫this
- 所以為了使用jQuery對象的方法，你必須傳入jQuery函數$(this), 將javascript 對象包裝成為一個jquery對象。
- 這里的$(this)是一個JQuery對象，而jQuery對象沒有title 屬性，因此這樣寫是錯誤的。
- JQuery擁有attr()方法可以get/set DOM對象的屬性，所以正確的寫法應該是這樣：
正確的代碼：
$("#textbox").hover( function() { $(this).attr(’title’, ‘Test’); }, function() { $(this).attr(’title’, ‘OK’); } );- 使用jQuery的好處是它包裝了各種瀏覽器版本對DOM對象的操作，因此統一使用$(this)而不再用this應該是比較不錯的選擇。
典型錯誤與注意點
var node = $('#id'); node.click(function(){this.css('display','block');//報錯 this是一個html元素，不是jquery對象，//因此this不能調用jquery 的css()方法 $(this).css();//正確，$(this)是一個jquery對象，不是html元素，//可以用css()方法this.style.display = 'block'; //正確 this是一個html元素，//不是jquery對象，因此this不能調用jquery的css()方法,//但是可以用javascript來更改style屬性});不要濫用$(this)
如果不了解javasrcipt中基本的DOM屬性和方法的話，很容易濫用jQuery對象。比如：
如果你只是通過jQ對象獲取簡單的dom元素的屬性比如id，那么你完全可以使用js原生的方法：
$(‘#someAnchor’).click(function() {alert( this.id );});諸如“src,” “href,” 和“style.”等一些屬性在老版本的ie中使用了getAttribute方法。
三、效果
1.隱藏和顯示
- hide()隱藏元素
- show() 顯示元素
- toggle() 顯示隱藏的元素，隱藏顯示的元素
2.淡入淡出
?
- fadeIn()淡入已隱藏的函數
- 可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
- 可選的 callback 參數是 fading 完成后所執行的函數名稱。
- ? fadeOut()方法淡出可見的元素
- 可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒
- 可選的 callback 參數是 fading 完成后所執行的函數名稱。
- ? fadeToggle()可以再fadeIn()和fadeOut()方法之間進行切換。
- 可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
- 可選的 callback 參數是 fading 完成后所執行的函數名稱。
- ? fadeTo() 方法允許漸變為給定的不透明度（值介于 0 與 1 之間）
- fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間）。
- 可選的 callback 參數是該函數完成后所執行的函數名稱。
3.jQuery 滑動方法
- slideDown() 向下滑動元素
- slideUp() 向上滑動元素
- slideToggle() 可以再slideDown ()和slideUp之間切換。
4.jQuery 動畫 - animate() 方法
自定義動畫使用方法：$(selector).animate({params},speed,callback);
參數說明：
- params—一組包含作為動畫屬性和最終值哦樣式屬性和其值的集合
- speed----可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
- callback—回調函數，是動畫完成后所執行的函數名稱。
注意：params的樣式屬性必須書寫成駝峰形式，即比如margin-left應該些微
marginLeft的形式
代碼如下:
var callback=function(){ //alert("我是回調函數"); } ; var par={ height:"70%" }; var f1=function(){ $("#t1").animate(par,1000,callback); };$("#b1").click(f1);5.jQuery stop()
方法用于在動畫或效果完成前對它們進行停止。
6.chaining
名為鏈接（chaining）的技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條
總結
以上是生活随笔為你收集整理的JQuery绑定及效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery简介选择器
- 下一篇： JQuery属性、事件相关操作