|
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.訪問原生的屬性和方法 復制代碼 代碼如下: // 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代碼的最下面，可以看到下面的代碼 11.條件加載Jquery 復制代碼 代碼如下: <!– Grab Google CDN jQuery. fall back to local if necessary –> <script src=”http://ajax./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方法來實現滑過和滑出的效果 }); 14.傳入屬性對象 當創建一個元素的時候，Jquery1.4可以傳入一個屬性對象 復制代碼 代碼如下: $(‘</a>', { id : ‘someId', className : ‘someClass', href : ‘somePath.html' }); 甚至是Jquery指定的屬性或事件如text, click |
|
|
