jQuery中大家不太了解的幾個(gè)方法
jQuery近些年來(lái)仍舊是web開(kāi)發(fā)中最受歡迎的類庫(kù),雖然大家褒貶不一,但是仍舊不失為一款最流行的Javascript,
在事件中return false
可能大家在編寫(xiě)事件相關(guān)代碼的時(shí)候,有時(shí)候會(huì)使用return false語(yǔ)句,代碼如下:
$("a").click(function() {
$(".gbtags").toggle();
return false;
}
以上代碼中,我們點(diǎn)擊a元素,如果不return false,會(huì)觸發(fā)對(duì)應(yīng)a元素的鏈接,導(dǎo)致頁(yè)面的地址變化。
而jQuery有標(biāo)準(zhǔn)的方法來(lái)幫助你實(shí)現(xiàn)類似上面的功能,代碼如下:
if ( ret !== undefined ) {
if ( (event.result = ret) === false ) {
event.preventDefault();
event.stopPropagation();
}
}
那么這兩個(gè)實(shí)現(xiàn)方式有什么不同呢? 我們可以看看jQuery的源代碼,如下:
if ( ret !== undefined ) {
if ( (event.result = ret) === false ) {
event.preventDefault();
event.stopPropagation();
}
}
大家看明白了嗎?最簡(jiǎn)單理解,如下:
return false;
等于
event.preventDefault();
event.stopPropagation();
在事件處理中,如果你直接返回false,那么將會(huì)同時(shí)阻止元素缺省行為并且終止元素事件的Bubbling,即事件同時(shí)阻止當(dāng)前元素父層元素,即:event.stopPropagation(); 所實(shí)現(xiàn)效果。
$.type來(lái)實(shí)現(xiàn)類型判斷
也許大家都已經(jīng)習(xí)慣了使用javascript的本地方法:typeof 來(lái)判斷類型,但是在jQuery中提供了一個(gè)更好的方法幫助你判斷類型,那就是$.type。
那么究竟有什么區(qū)別呢? 我們先看看這個(gè)gbdebug:
http://www.gbtags.com/gb/debug/3361dbff-41c0-465d-81e3-1ef6cbb275e1.htm
運(yùn)行以上代碼,能看到如下輸出結(jié)果:
// 返回object
result(typeof null);
// 返回object
result(typeof [0, 1, 2]);
// 返回object
result(typeof new Number(3));
// 返回null
result($.type(null));
// 返回array
result($.type([0, 1, 2]));
// 返回number
result($.type(new Number(3)));
大家看出來(lái)什么區(qū)別了嗎? 使用$.type能夠返回更準(zhǔn)確的對(duì)象類型,而typeof則返回object,所以如果你使用jQuery來(lái)編碼的時(shí)候,使用$.type 將更加方便。
使用attr()來(lái)實(shí)現(xiàn)removeAttr()的功能
可能大家習(xí)慣了使用attr()來(lái)添加元素屬性,而使用removeAttr() 來(lái)刪除元素屬性。
但是其實(shí)使用attr()也能執(zhí)行刪除的效果,為什么呢?請(qǐng)看看如下jQuery源代碼:
attr: function( elem, name, value ) {
...
if ( value !== undefined ) {
if ( value === null ) {
jQuery.removeAttr( elem, name );
...
}
從上面jQuery的源代碼中可以看出來(lái),如果你設(shè)置value為null的話,其實(shí)它就可以實(shí)現(xiàn)removeAttr的方法功能。
http://www.gbtags.com/gb/debug/269c89e1-b22f-40f9-8d26-8d995e999d29.htm
因此,我們可以如下方式來(lái)運(yùn)行判斷是否刪除屬性:
$('a').attr('title', condition ? value : null);
否則你需要使用如下:
condition ? $('a').attr('title', value) : $('a').removeAttr('title');
是不是稍微簡(jiǎn)單一些?
$.makeArray來(lái)創(chuàng)建數(shù)組
有些時(shí)候我們需要將類似數(shù)組的數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)化成為一個(gè)真實(shí)的數(shù)組,然后調(diào)用相關(guān)數(shù)組方法,例如reverse,代碼如下:
// 返回 NodeList
var elems = document.getElementsByTagName( "li" );
// 轉(zhuǎn)化為Array
var arr = jQuery.makeArray( elems );
// 調(diào)用數(shù)組方法反向排序
arr.reverse();
$( arr ).appendTo( document.body );
相關(guān)gbdebug:
http://www.gbtags.com/gb/debug/75d28491-aa13-4868-aa95-10b079337b82.htm
是不是非常簡(jiǎn)單?如果不使用$.makeArray,那么你需要自己處理Javascript來(lái)實(shí)現(xiàn)類似的功能,會(huì)非常麻煩
總結(jié)
以上就是幾個(gè)大家可能在jQuery開(kāi)發(fā)中容易忽略的幾個(gè)實(shí)用方法,或者你也有自己的一些不錯(cuò)的方法,請(qǐng)大家不吝分享!
- jQuery動(dòng)畫(huà)效果-fadeIn fadeOut淡入淺出示例代碼
- jQuery中fadeIn、fadeOut、fadeTo的使用方法(圖片顯示與隱藏)
- 在IE 瀏覽器中使用 jquery的fadeIn() 效果 英文字符字體加粗
- js模擬jquery的slide和fadeIn和fadeOut功能
- jquery 圖片Silhouette Fadeins漸顯效果
- jQuery實(shí)現(xiàn)數(shù)秒后自動(dòng)提交form的方法
- jQuery實(shí)現(xiàn)復(fù)選框成對(duì)選擇及對(duì)應(yīng)取消的方法
- jquery實(shí)現(xiàn)翻動(dòng)fadeIn顯示的方法
相關(guān)文章
使用jQuery+EasyUI實(shí)現(xiàn)CheckBoxTree的級(jí)聯(lián)選中特效
這篇文章主要介紹了使用jQuery+EasyUI實(shí)現(xiàn)CheckBoxTree的級(jí)聯(lián)選中特效的相關(guān)資料,需要的朋友可以參考下2015-12-12jquery實(shí)現(xiàn)效果比較好的table選中行顏色
這篇文章主要介紹了jquery table選中行顏色實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-03-03jquery實(shí)現(xiàn)的鼠標(biāo)下拉滾動(dòng)置頂效果
鼠標(biāo)下拉滾動(dòng)置頂效果想必大家在瀏覽網(wǎng)頁(yè)時(shí)都有遇到過(guò),下面有個(gè)不錯(cuò)的小例子,需要的朋友可以參考下2014-07-07jQuery實(shí)現(xiàn)自動(dòng)調(diào)整字體大小的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)調(diào)整字體大小的方法,涉及jQuery針對(duì)頁(yè)面屬性與樣式動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06基于HTML+CSS,jQuery編寫(xiě)的簡(jiǎn)易計(jì)算器后續(xù)(添加了鍵盤(pán)監(jiān)聽(tīng))
這篇文章主要介紹了使用HTML+CSS,jQuery編寫(xiě)的簡(jiǎn)易計(jì)算器后續(xù)(添加了鍵盤(pán)監(jiān)聽(tīng)) 的相關(guān)資料,需要的朋友可以參考下2016-01-01jQuery實(shí)現(xiàn)手機(jī)自定義彈出輸入框
這篇文章主要介紹了jQuery實(shí)現(xiàn)手機(jī)自定義彈出輸入框 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法,涉及jQuery結(jié)合HTML5實(shí)現(xiàn)瀑布流效果的動(dòng)態(tài)加載功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jQuery實(shí)現(xiàn)判斷滾動(dòng)條滾動(dòng)到document底部的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)判斷滾動(dòng)條滾動(dòng)到document底部的方法,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及針對(duì)頁(yè)面元素屬性判斷的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08