jQuery（二）

第一章 事件篇

鼠標(biāo)事件

1. click與dbclick事件

click(): 監(jiān)聽(tīng)用戶的單機(jī)操作

$("#test").click(function() {
    //this指向 div元素
});

dbclick: 監(jiān)聽(tīng)用戶的雙擊操作

2. mousedown與mouseup

監(jiān)聽(tīng)用戶鼠標(biāo)的按下和彈起。

$("button:eq(0)").mousedown(function(e) {
        alert('e.which: ' + e.which)
 })

** 用event 對(duì)象的which區(qū)別按鍵:**
敲擊鼠標(biāo)左鍵which的值是1,敲擊鼠標(biāo)中鍵which的值是2,敲擊鼠標(biāo)右鍵which的值是3

3. mousemove 事件

監(jiān)聽(tīng)用戶鼠標(biāo)移動(dòng)的操作

$("#test").mousemove(function() {
    //this指向 div元素 
});

4. mouseover 和 mouseout 事件

移入和移除事件

5. mouseenter與mouseleave事件

監(jiān)聽(tīng)用戶移動(dòng)到內(nèi)部的操作
mouseenter事件和mouseover的區(qū)別
關(guān)鍵點(diǎn)就是：冒泡的方式處理問(wèn)題
mouseover為例：

<div class="aaron2"> <p>鼠標(biāo)離開(kāi)此區(qū)域觸發(fā)mouseleave事件</p> </div>

如果在p元素與div元素都綁定mouseover事件，鼠標(biāo)在離開(kāi)p元素，但是沒(méi)有離開(kāi)div元素的時(shí)候，觸發(fā)的結(jié)果:

  1. p元素響應(yīng)事件
  2. div元素響應(yīng)事件
    這里的問(wèn)題是div為什么會(huì)被觸發(fā)？ 原因就是事件冒泡的問(wèn)題，p元素觸發(fā)了mouseover，他會(huì)一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就會(huì)被觸發(fā)
    所以在這種情況下面，jQuery推薦我們使用 mouseenter事件
mouseenter事件只會(huì)在綁定它的元素上被調(diào)用，而不會(huì)在后代節(jié)點(diǎn)上被觸發(fā)

6. hover 事件

鼠標(biāo)劃入和劃出觸發(fā)不同事件，相當(dāng)于mouseover+mouseout或者mouseenter+mouseleave

$(selector).hover(handlerIn, handlerOut)

7. focusin 和 focusout 事件

focusin: 獲得焦點(diǎn)時(shí)動(dòng)作
focusout: 失去焦點(diǎn)時(shí)動(dòng)作

$("#test").focusin(function() {
    //this指向 div元素
});

8. blur 與 focus 事件

用于處理表單焦點(diǎn)的事件，類似于 focusin 事件與 focusout 事件
不同: focus()在元素本身產(chǎn)生，focusin()在元素包含的元素中產(chǎn)生

9. change 事件

<input>元素，<textarea>和<select>元素的值發(fā)生變化時(shí)通過(guò)change事件去監(jiān)聽(tīng)這些改變的動(dòng)作

$('.target1').change(function(e) {
    $("#result").html(e.target.value)
});

10. select 事件

當(dāng) textarea 或文本類型的 input 元素中的文本被選擇時(shí)，會(huì)發(fā)生 select 事件。
select事件只能用于<input>元素與<textarea>元素。

$("input").select(function(e){
    alert(e.target.value)
})

11. submit事件

form元素是有默認(rèn)提交表單的行為，如果通過(guò)submit處理的話，需要禁止瀏覽器的這個(gè)默認(rèn)行為。
傳統(tǒng)的方式是調(diào)用事件對(duì)象e.preventDefault()來(lái)處理， jQuery中可以直接在函數(shù)中最后結(jié)尾return false即可。

$("#target").submit(function(data) { 
   return false; //阻止默認(rèn)行為，提交表單
});

鍵盤(pán)事件

1. keydown()與keyup()

鍵盤(pán)按下和松手時(shí)觸發(fā)的動(dòng)作

2. keypress 事件

keydown 時(shí)，每次獲取的內(nèi)容都是之前輸入的，當(dāng)前的額獲取不了。
keypress事件與keydown和keyup的主要區(qū)別:

  • 只能捕獲單個(gè)字符，不能捕獲組合鍵
  • 無(wú)法響應(yīng)系統(tǒng)功能鍵（如delete，backspace）
  • 不區(qū)分小鍵盤(pán)和主鍵盤(pán)的數(shù)字字符

3. on 的多事件綁定

之前學(xué)的鼠標(biāo)事件，表單事件與鍵盤(pán)事件都有個(gè)特點(diǎn)，就是直接給元素綁定一個(gè)處理函數(shù)，所有這類事件都是屬于快捷處理。翻開(kāi)源碼其實(shí)可以看到，所有的快捷事件在底層的處理都是通過(guò)一個(gè)on方法來(lái)實(shí)現(xiàn)的。jQuery on()方法是官方推薦的綁定事件的一個(gè)方法。

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

多個(gè)事件綁定同一個(gè)函數(shù)

$("#elem").on("mouseover mouseout",function(){ });
// 通過(guò)空格分離，傳遞不同的事件名，可以同時(shí)綁定多個(gè)事件

多個(gè)事件綁定不同函數(shù)

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){},
});
// 通過(guò)空格分離，傳遞不同的事件名，可以同時(shí)綁定多個(gè)事件，每一個(gè)事件執(zhí)行自己的回調(diào)方法

將數(shù)據(jù)傳遞到處理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 
}
$( "button" ).on( "click", {name: "Tom"}, greet );
// 可以通過(guò)第二參數(shù)（對(duì)象），當(dāng)一個(gè)事件被觸發(fā)時(shí)，要傳遞給事件處理函數(shù)的

on 的事件委托機(jī)制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

//給body綁定一個(gè)click事件
    //沒(méi)有直接a元素綁定點(diǎn)擊事件
    //通過(guò)委托機(jī)制，點(diǎn)擊a元素的時(shí)候，事件觸發(fā)
    $('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })

事件綁定在最上層div元素上，當(dāng)用戶觸發(fā)在a元素上，事件將往上冒泡，一直會(huì)冒泡在div元素上。如果提供了第二參數(shù)，那么事件在往上冒泡的過(guò)程中遇到了選擇器匹配的元素，將會(huì)觸發(fā)事件回調(diào)函數(shù)。

4. 卸載事件off()方法

通過(guò).on()綁定的事件處理程序；通過(guò)off()方法移除該綁定。

綁定2個(gè)事件
$("elem").on("mousedown mouseup",fn)
刪除一個(gè)事件
$("elem").off("mousedown")
刪除所有事件
$("elem").off("mousedown mouseup")
快捷方式刪除所有事件，這里不需要傳遞事件名了，節(jié)點(diǎn)上綁定的所有事件講全部銷(xiāo)毀
$("elem").off()

jQuery 事件對(duì)象

1. jQuery 事件對(duì)象的作用

<ul>     
    <li class="even1"></li>     
    <li class="even2"></li>     
    <li class="even2"></li>    
     ......... 
 </ul>

ul有N個(gè)子元素li(這里只寫(xiě)了3個(gè))，如果我要響應(yīng)每一個(gè)li的事件，那么常規(guī)的方法就是需要給所有的li都單獨(dú)綁定一個(gè)事件監(jiān)聽(tīng)，這樣寫(xiě)法很符合邏輯，但是同時(shí)有顯得繁瑣。因?yàn)閘i都有一個(gè)共同的父元素，而且所有的事件都是一致的，這里我們可以采用要一個(gè)技巧來(lái)處理，也是常說(shuō)的『事件委托』，綁定到父元素ul。觸發(fā)li的時(shí)候把這個(gè)事件往上冒泡到ul上，因?yàn)閡l上綁定事件響應(yīng)所以就能夠觸發(fā)這個(gè)動(dòng)作了。唯一的問(wèn)題怎么才知道觸發(fā)的li元素是哪個(gè)一個(gè)？

這里就引出了事件對(duì)象了:

事件對(duì)象是用來(lái)記錄一些事件發(fā)生時(shí)的相關(guān)信息的對(duì)象。事件對(duì)象只有事件發(fā)生時(shí)才會(huì)產(chǎn)生，并且只能是事件處理函數(shù)內(nèi)部訪問(wèn)，在所有事件處理函數(shù)運(yùn)行結(jié)束后，事件對(duì)象就被銷(xiāo)毀

event.target
event.target代表當(dāng)前觸發(fā)事件的元素，可以通過(guò)當(dāng)前元素對(duì)象的一系列屬性來(lái)判斷是不是我們想要的元素

//多事件綁定一
$("ul").on('click',function(e){
   alert('觸發(fā)的元素是內(nèi)容是: ' + e.target.textContent)
})

2. jQuery事件的屬性和方法

event.type：獲取事件的類型
event.pageX 和 event.pageY：獲取鼠標(biāo)當(dāng)前相對(duì)于頁(yè)面的坐標(biāo)
event.preventDefault() 方法：阻止默認(rèn)行為
這個(gè)用的特別多，在執(zhí)行這個(gè)方法后，如果點(diǎn)擊一個(gè)鏈接（a標(biāo)簽），瀏覽器不會(huì)跳轉(zhuǎn)到新的 URL 去了。我們可以用 event.isDefaultPrevented() 來(lái)確定這個(gè)方法是否(在那個(gè)事件對(duì)象上)被調(diào)用過(guò)了。
event.stopPropagation() 方法：阻止事件冒泡
event.which：獲取在鼠標(biāo)單擊時(shí)，單擊的是鼠標(biāo)的哪個(gè)鍵
event.which 將 event.keyCode 和 event.charCode 標(biāo)準(zhǔn)化了。event.which也將正常化的按鈕按下(mousedown 和 mouseupevents)，左鍵報(bào)告1，中間鍵報(bào)告2，右鍵報(bào)告3。
**event.currentTarget : 在事件冒泡過(guò)程中的當(dāng)前DOM元素 **
冒泡前的當(dāng)前觸發(fā)事件的DOM對(duì)象, 等同于this.
this和event.target的區(qū)別：
js中事件是會(huì)冒泡的，所以this是可以變化的，但event.target不會(huì)變化，它永遠(yuǎn)是直接接受事件的目標(biāo)DOM元素；
.this和event.target都是dom對(duì)象
如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對(duì)象。比如this和$(this)的使用、event.target和$(event.target)的使用；

自定義事件

1. trigger 事件

根據(jù)綁定到匹配元素的給定的事件類型執(zhí)行所有的處理程序和行為。
trigger除了能夠觸發(fā)瀏覽器事件，同時(shí)還支持自定義事件，并且自定義時(shí)間還支持傳遞參數(shù):

$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自觸自定義時(shí)間")
 });
$('#elem').trigger('Aaron',['參數(shù)1','參數(shù)2'])

trigger觸發(fā)瀏覽器事件與自定義事件區(qū)別？

  • 自定義事件對(duì)象，是jQuery模擬原生實(shí)現(xiàn)的
  • 自定義事件可以傳遞參數(shù)
<body>
        <h2>自定義事件trigger</h2>
        <div class="left">
            <div>
                <span></span>
                <span>0</span> 點(diǎn)擊次數(shù)
            </div>
            <button>直接點(diǎn)擊</button>
            <button>通過(guò)自定義點(diǎn)擊</button>
        </div>
        <script type="text/javascript">
            //點(diǎn)擊更新次數(shù)
            $("button:first").click(function(event, bottonName) {
                bottonName = bottonName || 'first';
                update($("span:first"), $("span:last"), bottonName);
            });

            //通過(guò)自定義事件調(diào)用，更新次數(shù)
            $("button:last").click(function() {
                $("button:first").trigger('click', 'last');
            });

            function update(first, last, bottonName) {
                first.text(bottonName);
                var n = parseInt(last.text(), 10);
                last.text(n + 1);
            }
        </script>
    </body>

2. triggerHandler 事件

盡管 .trigger() 模擬事件對(duì)象，但是它并沒(méi)有完美的復(fù)制自然發(fā)生的事件，若要觸發(fā)通過(guò) jQuery 綁定的事件處理函數(shù)，而不觸發(fā)原生的事件，使用.triggerHandler() 來(lái)代替。

triggerHandler與trigger的用法是一樣的，重點(diǎn)看不同之處：

  • triggerHandler不會(huì)觸發(fā)瀏覽器的默認(rèn)行為，.triggerHandler( "submit" )將不會(huì)調(diào)用表單上的.submit()
  • .trigger() 會(huì)影響所有與 jQuery 對(duì)象相匹配的元素，而.triggerHandler()僅影響第一個(gè)匹配到的元素
  • 使用 .triggerHandler()觸發(fā)的事件，并不會(huì)在 DOM 樹(shù)中向上冒泡。 如果它們不是由目標(biāo)元素直接觸發(fā)的，那么它就不會(huì)進(jìn)行任何處理
  • 與普通的方法返回 jQuery 對(duì)象(這樣就能夠使用鏈?zhǔn)接梅?相反，.triggerHandler() 返回最后一個(gè)處理的事件的返回值。如果沒(méi)有觸發(fā)任何事件，會(huì)返回 undefined 
<h2>自定義事件triggerHandler</h2>
<div class="left">
    <div id="accident">
        <a>triggerHandler事件</a>
        <input type="text">
    </div>
    <button>事件冒泡,觸發(fā)瀏覽器默認(rèn)聚焦行為</button><br><br>
    <button>不會(huì)冒泡，不觸發(fā)瀏覽器默認(rèn)聚焦行為</button>
</div>
<script type="text/javascript">

    //給input綁定一個(gè)聚焦事件
    $("input").on("focus",function(event,title) {
        $(this).val(title)
    });

    $("#accident").on("click",function() {
        alert("trigger觸發(fā)的事件會(huì)在 DOM 樹(shù)中向上冒泡");
    });
    //trigger觸發(fā)focus
    $("button:first").click(function() {
        $("a").trigger("click");
        $("input").trigger("focus");
    });

    //triggerHandler觸發(fā)focus
    $("button:last").click(function() {
        $("a").triggerHandler("click");
        $("input").triggerHandler("focus","沒(méi)有觸發(fā)默認(rèn)聚焦事件");
    });
</script>

第二章 動(dòng)畫(huà)篇

隱藏和顯示

1. hide方法

讓頁(yè)面上的元素不可見(jiàn)，一般可以通過(guò)設(shè)置css的display為none屬性。但是通過(guò)css直接修改是靜態(tài)的布局，如果在代碼執(zhí)行的時(shí)候，一般是通過(guò)js控制元素的style屬性，這里jQuery提供了一個(gè)快捷的方法.hide()來(lái)達(dá)到這個(gè)效果。

$elem.hide()
提供參數(shù)
.hide( options )
這是一個(gè)動(dòng)畫(huà)設(shè)置的快捷方式,元素會(huì)執(zhí)行200/600毫秒的動(dòng)畫(huà)后再隱藏
.hide("fast / slow")

$("#a2").hide({
    duration: 3000,
    complete: function() {
        alert('執(zhí)行3000ms動(dòng)畫(huà)完畢')
    }
})

2. show方法

css中有display:none屬性，同時(shí)也有display:block，所以jQuery同樣提供了與hide相反的show。

$('elem').hide(3000).show(3000)
  • show與hide方法是修改的display屬性，通過(guò)是visibility屬性布局需要通過(guò)css方法單獨(dú)設(shè)置
  • 如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫(xiě)樣式
  • 如果讓show與hide成為一個(gè)動(dòng)畫(huà)，那么默認(rèn)執(zhí)行動(dòng)畫(huà)會(huì)改變?cè)氐母叨龋叨龋该鞫取?/li>

3. 隱藏切換toggle方法

切換顯示或隱藏匹配元素

$('elem').toggle(3000);

4. 下拉動(dòng)畫(huà)slideDown

用滑動(dòng)動(dòng)畫(huà)顯示一個(gè)匹配元素

.slideDown( [duration ] [, complete ] )
// 持續(xù)時(shí)間（duration）是以毫秒為單位的，數(shù)值越大，動(dòng)畫(huà)越慢
// 字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。默認(rèn)使用400 毫秒的延時(shí)。

$("ele").slideDown(1000, function() {
    //等待動(dòng)畫(huà)執(zhí)行1秒后,執(zhí)行別的動(dòng)作....
});

5. 上卷動(dòng)畫(huà)slideUp

用法同 slideDown

6. slideToggle

slideToggle("fast")  // 200毫秒延遲
slideToggle("slow")   // 600毫秒延遲

淡入淡出效果

1. fdeOut 和 fadeIn

fadeOut(): 用于隱藏所有匹配的元素，并帶有淡出的過(guò)渡動(dòng)畫(huà)效果.
fadeIn: 淡入效果

2. 淡入淡出切換fadeToggle

fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當(dāng)前是可見(jiàn)的，則將其隱藏(淡出)；如果元素當(dāng)前是隱藏的，則使其顯示(淡入)。

3. 淡入效果fadeTo

.fadeTo( duration, opacity ,callback)
duration:參數(shù)規(guī)定效果的時(shí)長(zhǎng).它可以取以下值:"slow","fast" 或毫秒
opacity :不透明度(介于0到1之間)
callback :函數(shù)完成后要執(zhí)行的動(dòng)作

4. toggle與slideToggle以及fadeToggle的比較

操作元素的顯示和隱藏可以有幾種方法。
例如：

  • 改變樣式display為none

  • 設(shè)置位置高度為0

  • 設(shè)置透明度為0
    toggle、sildeToggle以及fadeToggle的區(qū)別：

  • toggle：切換顯示與隱藏效果

  • sildeToggle：切換上下拉卷滾效果

  • fadeToggle：切換淡入淡出效果

當(dāng)然細(xì)節(jié)上還是有更多的不同點(diǎn):

toggle與slideToggle細(xì)節(jié)區(qū)別：

  • toggle：動(dòng)態(tài)效果為從右至左。橫向動(dòng)作，toggle通過(guò)display來(lái)判斷切換所有匹配元素的可見(jiàn)性
  • slideToggle：動(dòng)態(tài)效果從下至上。豎向動(dòng)作，slideToggle 通過(guò)高度變化來(lái)切換所有匹配元素的可見(jiàn)性

fadeToggle方法

  • fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。
  • 元素是淡出顯示的，fadeToggle() 會(huì)使用淡入效果顯示它們。
  • 元素是淡入顯示的，fadeToggle() 會(huì)使用淡出效果顯示它們。
  • 注釋：隱藏的元素不會(huì)被完全顯示（不再影響頁(yè)面的布局）

自定義動(dòng)畫(huà)

1. animate

精確的控制樣式屬性從而執(zhí)行動(dòng)畫(huà)

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )
properties:一個(gè)或多個(gè)css屬性的鍵值對(duì)所構(gòu)成的Object對(duì)象。要特別注意所有用于動(dòng)畫(huà)的屬性必須是數(shù)字的

特別注意單位，屬性值的單位像素（px）,除非另有說(shuō)明。單位em 和 %需要指定使用

.animate({ left: 50,   width: '50px'   opacity: 'show',   fontSize: "10em", }, 500);

除了定義數(shù)值，每個(gè)屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動(dòng)畫(huà)用來(lái)控制元素的顯示或隱藏

.animate({ width: "toggle" });

如果提供一個(gè)以+= 或 -=開(kāi)始的值，那么目標(biāo)值就是以這個(gè)屬性的當(dāng)前值加上或者減去給定的數(shù)字來(lái)計(jì)算的

.animate({      left: '+=50px' }, "slow");

duration時(shí)間

動(dòng)畫(huà)執(zhí)行的時(shí)間，持續(xù)時(shí)間是以毫秒為單位的；值越大表示動(dòng)畫(huà)執(zhí)行的越慢，不是越快。還可以提供'fast' 和 'slow'字符串，分別表示持續(xù)時(shí)間為200 和 600毫秒。

easing動(dòng)畫(huà)運(yùn)動(dòng)的算法

jQuery庫(kù)中默認(rèn)調(diào)用 swing。如果需要其他的動(dòng)畫(huà)算法，請(qǐng)查找相關(guān)的插件

complete回調(diào)
動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，這個(gè)可以保證當(dāng)前動(dòng)畫(huà)確定完成后發(fā)會(huì)觸發(fā)、

.animate( properties, options )

options參數(shù)

  • duration - 設(shè)置動(dòng)畫(huà)執(zhí)行的時(shí)間
  • easing - 規(guī)定要使用的 easing 函數(shù)，過(guò)渡使用哪種緩動(dòng)函數(shù)
  • step：規(guī)定每個(gè)動(dòng)畫(huà)的每一步完成之后要執(zhí)行的函數(shù)
  • progress：每一次動(dòng)畫(huà)調(diào)用的時(shí)候會(huì)執(zhí)行這個(gè)回調(diào)，就是一個(gè)進(jìn)度的概念
  • complete：動(dòng)畫(huà)完成回調(diào)

其中最關(guān)鍵的一點(diǎn)就是：

如果多個(gè)元素執(zhí)行動(dòng)畫(huà)，回調(diào)將在每個(gè)匹配的元素上執(zhí)行一次，不是作為整個(gè)動(dòng)畫(huà)執(zhí)行一次

列出常用的方式：

$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

 <select id="animation">
        <option value="1">動(dòng)畫(huà)step動(dòng)畫(huà)</option>
        <option value="2">動(dòng)畫(huà)progress回調(diào)</option>
</select>
    <a></a>
    <input id="exec" type="button" value="執(zhí)行動(dòng)畫(huà)">
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //觀察每一次動(dòng)畫(huà)的改變
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一個(gè)動(dòng)畫(huà)都會(huì)調(diào)用
                step: function(now, fx) {
                   $aaron.text('高度的改變值:'+now)
                }
            })
        } else if (v == "2") {
            //觀察每一次進(jìn)度的變化
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一步動(dòng)畫(huà)完成后調(diào)用的一個(gè)函數(shù)，
                //無(wú)論動(dòng)畫(huà)屬性有多少，每個(gè)動(dòng)畫(huà)元素都執(zhí)行單獨(dú)的函數(shù)
                progress: function(now, fx) {
                   $aaron.text('進(jìn)度:'+arguments[1])
                    // var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
                    // alert(data)
                }
            })
        } 
    });

2. 停止動(dòng)畫(huà)stop

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

stop還有幾個(gè)可選的參數(shù)，簡(jiǎn)單來(lái)說(shuō)可以這3種情況

  • .stop(); 停止當(dāng)前動(dòng)畫(huà)，點(diǎn)擊在暫停處繼續(xù)開(kāi)始
  • .stop(true);如果同一元素調(diào)用多個(gè)動(dòng)畫(huà)方法，尚未被執(zhí)行的動(dòng)畫(huà)被放置在元素的效果隊(duì)列中。這些動(dòng)畫(huà)不會(huì)開(kāi)始，直到第一個(gè)完成。當(dāng)調(diào)用.stop()的時(shí)候，隊(duì)列中的下一個(gè)動(dòng)畫(huà)立即開(kāi)始。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動(dòng)畫(huà)其余被刪除并永遠(yuǎn)不會(huì)運(yùn)行
  • .stop(true,true); 當(dāng)前動(dòng)畫(huà)將停止，但該元素上的 CSS 屬性會(huì)被立刻修改成動(dòng)畫(huà)的目標(biāo)值
$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)
  1. stop()：只會(huì)停止第一個(gè)動(dòng)畫(huà)，第二個(gè)第三個(gè)繼續(xù)
  2. stop(true)：停止第一個(gè)、第二個(gè)和第三個(gè)動(dòng)畫(huà)
  3. stop(true ture)：停止動(dòng)畫(huà)，直接跳到第一個(gè)動(dòng)畫(huà)的最終狀態(tài)

jQuery 核心

1. each方法的應(yīng)用

語(yǔ)法

jQuery.each(array, callback )
jQuery.each( object, callback )

第一個(gè)參數(shù)傳遞的就是一個(gè)對(duì)象或者數(shù)組，第二個(gè)是回調(diào)函數(shù)

$.each(["Aaron", "Hello"], function(index, value) { 
    //index是索引,也就是數(shù)組的索引 
    //value就是數(shù)組中的值了
 });

jQuery.each()函數(shù)還會(huì)根據(jù)每次調(diào)用函數(shù)callback的返回值來(lái)決定后續(xù)動(dòng)作。如果返回值為false，則停止循環(huán)(相當(dāng)于普通循環(huán)中的break)；如果返回其他任何值，均表示繼續(xù)執(zhí)行下一個(gè)循環(huán)。

$.each(["Aaron", "Hello"], function(index, value) {
     return false; //停止迭代 
 });

jQuery方法可以很方便的遍歷一個(gè)數(shù)據(jù)，不需要考慮這個(gè)數(shù)據(jù)是對(duì)象還是數(shù)組。

$("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        $aaron.empty();
        if (v == "1") {

            // 遍歷數(shù)組元素
            $.each(['Aaron', 'Hello','aaa','bbb'], function(i, item) {
                $aaron.append("索引=" + i + "; 元素=" + item);
            });
        } else if (v == "2") {
            // 遍歷對(duì)象屬性
            $.each({
                name: "張三",
                age: 18
            }, function(property, value) {
                $aaron.append("屬性名=" + property + "; 屬性值=" + value);
            });
        } 
    }

2. 查找數(shù)組中的索引 inArray

jQuery.inArray()函數(shù)用于在數(shù)組中搜索指定的值，并返回其索引值。如果數(shù)組中不存在該值，則返回 -1。
語(yǔ)法：

jQuery.inArray( value, array ,[ fromIndex ] )

用法非常簡(jiǎn)單，傳遞一個(gè)檢測(cè)的目標(biāo)值，然后傳遞原始的數(shù)組，可以通過(guò)fromIndex規(guī)定查找的起始值，默認(rèn)數(shù)組是0開(kāi)始

例如：在數(shù)組中查找值是5的索引

$.inArray(5,[1,2,3,4,5,6,7]) //返回對(duì)應(yīng)的索引：4

注意：

如果要判斷數(shù)組中是否存在指定值，你需要通過(guò)該函數(shù)的返回值不等于(或大于)-1來(lái)進(jìn)行判斷

3. 去空格神器trim方法

jQuery.trim()函數(shù)用于去除字符串兩端的空白字符

4. DOM元素的獲取get方法

jQuery是一個(gè)合集對(duì)象，如果需要單獨(dú)操作合集中的的某一個(gè)元素，可以通過(guò).get()方法獲取到

以下有3個(gè)a元素結(jié)構(gòu)：

<a>1</a>
<a>2</a> 
<a>3</a>

通過(guò)jQuery獲取所有的a元素合集$("a")，如果想進(jìn)一步在合集中找到第二2個(gè)dom元素單獨(dú)處理，可以通過(guò)get方法

語(yǔ)法：

.get( [index ] )

注意2點(diǎn)

  1. get方法是獲取的dom對(duì)象，也就是通過(guò)document.getElementById獲取的對(duì)象
  2. get方法是從0開(kāi)始索引

所以第二個(gè)a元素的查找：$(a).get(1)

負(fù)索引值參數(shù)

get方法還可以從后往前索引，傳遞一個(gè)負(fù)索引值，注意的負(fù)值的索引起始值是-1

同樣是找到第二元素，可以傳遞$(a).get(-2)

5. DOM元素的獲取index方法

.index()方法，從匹配的元素中搜索給定元素的索引值，從0開(kāi)始計(jì)數(shù)。

語(yǔ)法：參數(shù)接受一個(gè)jQuery或者dom對(duì)象作為查找的條件

.index()  // 返回值時(shí)jQuery對(duì)象中第一個(gè)元素相對(duì)于它同輩元素的位置
.index( selector )  //  返回值時(shí)原生元素相對(duì)于選擇器匹配的位置
.index( element ) // 返回值時(shí)傳入的元素相對(duì)于原生集合的位置。如果找不到匹配的元素，則 .index() 返回 -1

<ul>    
     <a></a>     
     <li id="test1">1</li>     
     <li id="test2">2</li>     
     <li id="test3">3</li> 
 </ul>

$("li").index()沒(méi)有傳遞參數(shù)，反正的結(jié)果是1，返回同輩的排列循序，第一個(gè)li之前有a元素,同輩元素是a開(kāi)始為0，所以li的開(kāi)始索引是1

如果要快速找到第二個(gè)li在列表中的索引,可以通過(guò)如下2種方式處理

$("li").index(document.getElementById("test2")) //結(jié)果：1 
$("li").index($("#test2")) //結(jié)果:1
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 事件 綁定事件：1）方式一：bind( type,function(){} ) 2）方式二（綁定的簡(jiǎn)寫(xiě)形式）：cl...
    南山伐木閱讀 180評(píng)論 0贊 0
  • 第1章 鼠標(biāo)事件 1-1 jQuery鼠標(biāo)事件之click與dbclick事件 用交互操作中，最簡(jiǎn)單直接的操作就是...
    mo默22閱讀 1,308評(píng)論 0贊 6
  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點(diǎn)的復(fù)制與替換 （1）DOM拷貝clone() 克隆節(jié)點(diǎn)是DOM的常...
    凜0_0閱讀 1,370評(píng)論 0贊 8
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,379評(píng)論 0贊 2
  • 洗頭#剛畢業(yè)時(shí)還會(huì)有一兩年按照在學(xué)校生活制度中養(yǎng)成的習(xí)慣去生活，直到漸漸發(fā)現(xiàn)自己在沒(méi)有人強(qiáng)制制度的生活之空中擁有可...
    Pinppin_Tseng閱讀 307評(píng)論 0贊 0