14個有用的Jquery技巧分享_jquery

1.透過方法回傳Jquery物件實例

用 var someDiv = $(‘#someDiv').hide();  代替 var someDiv = $(‘#someDiv');  someDiv.hide();

2.使用find來找出

用$('#someDiv').find('p.someClass').hide();   取代$('#someDiv p.someClass').hide();因為可以不必觸發Jquery的Sizzle引擎，同時在寫選擇符的時候盡量讓您的選擇符簡單同時優化最右邊的選擇符

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（傳入參數Jquery）

複製程式碼 程式碼如下:

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

方法3（透過ready方法）

複製程式碼 程式碼如下:

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;

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

複製程式碼 程式碼如下:

<script>!window.jQuery && document.write(‘<script src=”js/jquery-1.4.2.min.js”></script>')

如果CDN沒有下載到Jquery，則從本地讀取

12.Jquery Filters

複製程式碼 程式碼如下:

<script><br /> $(‘p:first').data(‘info', ‘value'); // populates $'s data object to have something to work with<br /> $.extend(<br /> jQuery.expr[":"], {<br /> block: function(elem) {<br /> return $(elem).css(“display”) === “block”;<br /> },<br /> hasData : function(elem) {<br /> return !$.isEmptyObject( $(elem).data() );<br /> }<br /> }<br /> );<br /> $(“p:hasData”).text(“has data”); // grabs paras that have data attached<br /> $(“p:block”).text(“are block level”); // grabs only paragraphs that have a display of “block”<br /> </script>

註：$.expr[":"]等價於$.expr.filters

13.hover方法

複製程式碼 程式碼如下:

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

14.傳入屬性物件

當建立一個元素的時候，Jquery1.4可以傳入一個屬性物件

複製程式碼 程式碼如下:

$(‘', {
id : ‘someId',
className : ‘someClass',
href : ‘somePath.html'
});

甚至是Jquery指定的屬性或事件如text, click