14個有用的Jquery技巧分享
1.通過方法返回Jquery對象實例
用 var someDiv = $(‘#someDiv').hide(); 代替 var someDiv = $(‘#someDiv'); someDiv.hide();
2.使用find來查找
用 $(‘#someDiv').find(‘p.someClass').hide(); 代替 $(‘#someDiv p.someClass').hide();因為可以不必觸發(fā)Jquery的Sizzle引擎，同時在寫選擇符的時候盡量讓您的選擇符簡單同時優(yōu)化最右邊的選擇符
3.不要濫用$(this)
用 $(‘#someAnchor').click(function() { alert( this.id ); }); 代替 $(‘#someAnchor').click(function() {alert($(this).attr(‘id'));});
4.ready的簡寫形式
用 $(function() { }); 代替 $(document).ready(function() {});
5.讓你的代碼安全
方法1（使用noConflict）
var j = jQuery.noConflict();
j(‘#someDiv').hide();
// The line below will reference some other library's $ function.
$(‘someDiv').style.display = ‘none';
方法2（傳入?yún)?shù)Jquery）
(function($) {
// Within this function, $ will always refer to jQuery
})(jQuery);
方法3（通過ready方法）
jQuery(document).ready(function($) {
// $ refers to jQuery
});
6.簡化代碼
用each代替for，使用數(shù)組保存臨時變量，使用document fragment，這其實和寫原生的Javascript需要注意的一樣。
7.使用Ajax的方法
Jquery提供了get getJSON post ajax這些有用的ajax方法
8.訪問原生的屬性和方法
比如獲取元素id的方法有
// OPTION 1 – Use jQuery
var id = $(‘#someAnchor').attr(‘id');
// OPTION 2 – Access the DOM element
var id = $(‘#someAnchor')[0].id;
// OPTION 3 – Use jQuery's get method
var id = $(‘#someAnchor').get(0).id;
// OPTION 3b – Don't pass an index to get
anchorsArray = $(‘.someAnchors').get();
var thirdId = anchorsArray[2].id;
9.使用PHP來檢查Ajax請求
通過使用xhr.setRequestHeader(“X-Requested-With”, “XMLHttpRequest”); 服務器端如PHP就可以通過
function isXhr() {
return $_SERVER['HTTP_X_REQUESTED_WITH'] === ‘XMLHttpRequest';
}
來檢查是不是Ajax請求，在一些禁用Javascript的情況下可能會用到
10.Jquery和$的關系
在Jquery代碼的最下面，可以看到下面的代碼
window.jQuery = window.$ = jQuery; $其實就是Jquery的一個shortcut
11.條件加載Jquery
<!– Grab Google CDN jQuery. fall back to local if necessary –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script>!window.jQuery && document.write(‘<script src=”js/jquery-1.4.2.min.js”><\/script>')</script>
如果CDN沒有下載到Jquery，則從本地讀取
12.Jquery Filters
<script>
$(‘p:first').data(‘info', ‘value'); // populates $'s data object to have something to work with
$.extend(
jQuery.expr[":"], {
block: function(elem) {
return $(elem).css(“display”) === “block”;
},
hasData : function(elem) {
return !$.isEmptyObject( $(elem).data() );
}
}
);
$(“p:hasData”).text(“has data”); // grabs paras that have data attached
$(“p:block”).text(“are block level”); // grabs only paragraphs that have a display of “block”
</script>
注：$.expr[":"]等價于$.expr.filters
13.hover方法
$(‘#someElement').hover(function() {
//在這里可以使用toggle方法來實現(xiàn)滑過和滑出的效果
});
14.傳入屬性對象
當創(chuàng)建一個元素的時候，Jquery1.4可以傳入一個屬性對象
$(‘</a>', {
id : ‘someId',
className : ‘someClass',
href : ‘somePath.html'
});
甚至是Jquery指定的屬性或事件如text, click
- jQuery 技巧大全(新手入門篇)
- jQuery編寫widget的一些技巧分享
- jquery常用技巧及常用方法列表集合
- 了解jQuery技巧來提高你的代碼（個人覺得那個jquery的手冊很不錯）
- jquery div 居中技巧應用介紹
- jQuery常見開發(fā)技巧詳細整理
- 關于jQuery新的事件綁定機制on()的使用技巧
- jquery操作復選框(checkbox)的12個小技巧總結
- jQuery操作表格（table）的常用方法、技巧匯總
- 編寫高效jQuery代碼的4個原則和5個技巧
- jQuery源碼分析之jQuery中的循環(huán)技巧詳解
- 15個jquery常用方法、小技巧分享
- 日常收藏的jquery技巧
相關文章
這篇文章主要為大家詳細介紹了jquery實現(xiàn)下載圖片的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
本文主要介紹了jQuery中$.ajax()方法的具體使用，$.ajax(url,[settings])通過 HTTP 請求加載遠程數(shù)據(jù)，文中通過示例代碼詳細的介紹了$.ajax()的用法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05![前端開發(fā)部分總結[兼容性、DOM操作、跨域等]（持續(xù)更新）](http://img.jbzj.com/images/xgimg/bcimg2.png)
前端開發(fā)部分總結[兼容性、DOM操作、跨域等]（持續(xù)更新）
在公司做這個項目已經(jīng)6個多月了，總結一些問題，也算是拋磚引玉吧，希望更多的朋友一起分享一些技巧。2010-03-03
這篇文章主要為大家詳細介紹了jQuery電話號碼驗證實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
打造個性化的功能強大的Jquery虛擬鍵盤(VirtualKeyboard)
本文主要講訴了如何一起一步一步打造個性化的VirtualKeyboard：功能強大的Jquery虛擬鍵盤，非常的詳細，非常實用，有需要的朋友可以參考下2014-10-10
這篇文章主要介紹了jQuery多級彈出菜單插件ZoneMenu的使用方法，有需要的小伙伴可以參考下2014-12-12
jQuery動態(tài)添加及刪除表單上傳元素的方法(附demo源碼下載)
這篇文章主要介紹了jQuery動態(tài)添加及刪除表單上傳元素的方法,涉及jQuery的事件動態(tài)綁定及頁面元素動態(tài)操作技巧,并附帶了demo源碼供讀者下載參考,代碼非常簡潔實用,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery實現(xiàn)的淡入淡出圖片輪播效果,涉及jQuery基于定時器的頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
jQuery實現(xiàn)仿微軟首頁感應鼠標變化滑動窗口效果
這篇文章主要介紹了jQuery實現(xiàn)仿微軟首頁感應鼠標變化滑動窗口效果,基于jQuery響應鼠標事件簡單實現(xiàn)動畫效果,非常簡單實用,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)選項卡切換圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01