最近工作上滿常使用JQuery + AJAX的,這篇就用來分享幾個自己的心得與技巧
1、利用方法一次設定JQuery對象
用
1 |
var someDiv = $("#someDiv").hide(); |
代替
1 2 |
var someDiv = $("#someDiv"); someDiv.hide(); |
2、利用find來尋找
用
1 |
$("#someDiv").find("p.someClass").hide(); |
來取代
1 |
$("#someDiv p.someClass").hide(); |
這樣作可以不必觸發JQuery的Sizzle引擎
3、不要濫用$(this)
用
1 2 3 |
$("#someAnchor").click(function() { alert( this.id ); }); |
來取代
1 2 3 |
$("#someAnchor").click(function() { alert($(this).attr("id")); }); |
4、ready的簡寫形式
用
1 2 3 |
$(function() { //do something }); |
來取代
1 2 3 |
$(document).ready(function() { //do something }); |
5、讓你的代碼安全
- 方法1(使用noConflict)
1 2 |
var j = jQuery.noConflict(); j('#someDiv').hide(); // The line below will reference some other library's $ function. $('someDiv').style.display = 'none'; |
- 方法2(傳入參數Jquery)
1 2 3 |
( function ($) { // Within this function, $ will always refer to jQuery } )(jQuery); |
方法3(透過ready方法)
1 2 3 |
jQuery(document).ready( function ($) { // $ refers to jQuery } ); |
6、簡化代碼
用each代替for,使用數組保存臨時變量,使用document fragment,這其實和寫原生的Javascript需要注意的一樣。
7、使用AJAX的方法
Jquery提供了get、getJSON、post、ajax這些有用的ajax方法。
8、訪問原生的屬性和方法
比如獲取元素id的方法有
1 2 3 4 5 6 7 8 9 10 11 |
// 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就可以透過
1 2 |
function isXhr() { return $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] === 'XMLHttpRequest'; } |
來檢查是不是Ajax請求,在一些禁用Javascript的情況下可能會用到。
10、JQuery和$的關係
在Jquery代碼的最下面,可以看到下面的代碼
window.jQuery = window.$ = jQuery; $其實就是Jquery的一個shortcut
11、條件載入Jquery
1 |
<!– 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> |
12、Jquery Filters
1 2 3 4 5 6 7 8 9 10 11 |
$('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” |
注:$.expr[“:”]等同於$.expr.filters。
13、hover方法
1 2 3 |
$('#someElement').hover( function () { //在這裡可以使用toggle方法來實現滑過和滑出的效果 } ); |
14、傳入屬性對象
1 2 3 4 |
$('</a>', { id : 'someId', className : 'someClass', href : 'somePath.html' } ); |