14個JQuery使用技巧

117 月 2014 by Bryce No Comments

最近工作上滿常使用JQuery + AJAX的，這篇就用來分享幾個自己的心得與技巧

1、利用方法一次設定JQuery對象

用

var someDiv = $("#someDiv").hide();

1	var someDiv = $("#someDiv").hide();

代替

var someDiv = $("#someDiv"); 
someDiv.hide();

1 2	var someDiv = $("#someDiv"); someDiv.hide();

2、利用find來尋找

用

$("#someDiv").find("p.someClass").hide();

1	$("#someDiv").find("p.someClass").hide();

來取代

$("#someDiv p.someClass").hide();

1	$("#someDiv p.someClass").hide();

這樣作可以不必觸發JQuery的Sizzle引擎

3、不要濫用$(this)

用

$("#someAnchor").click(function() { 
   alert( this.id );
});

$("#someAnchor").click(function() {

alert( this.id );

});

來取代

$("#someAnchor").click(function() {
   alert($(this).attr("id"));
});

$("#someAnchor").click(function() {

alert($(this).attr("id"));

});

4、ready的簡寫形式

用

$(function() {
  //do something
});

$(function() {

//do something

});

來取代

$(document).ready(function() {
  //do something
});

$(document).ready(function() {

//do something

});

5、讓你的代碼安全

方法1（使用noConflict）

var  j = jQuery.noConflict();  
j('#someDiv').hide();  // The line below will reference some other library's $ function. $('someDiv').style.display = 'none';

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）

( function ($)  {  
// Within this function, $ will always refer to jQuery  
} )(jQuery);

( function ($) {

// Within this function, $ will always refer to jQuery

} )(jQuery);

方法3（透過ready方法）

jQuery(document).ready( function ($)  {  
// $ refers to jQuery  
} );

jQuery(document).ready( function ($) {

// $ refers to jQuery

} );

6、簡化代碼

用each代替for，使用數組保存臨時變量，使用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;

// 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';  }

1 2	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>

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

$('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”

$('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方法

$('#someElement').hover( function ()  {  
   //在這裡可以使用toggle方法來實現滑過和滑出的效果 
} );

$('#someElement').hover( function () {

//在這裡可以使用toggle方法來實現滑過和滑出的效果

} );

14、傳入屬性對象

$('</a>',  { 
   id : 'someId',  
  className : 'someClass',  
  href : 'somePath.html'  } );

$('</a>', {

id : 'someId',

className : 'someClass',

href : 'somePath.html' } );