20個熱門jQuery的提示和技巧

openkk 12年前發布 | 56K 次閱讀 jQuery Ajax框架
以下是一些非常有用的jQuery提示和所有jQuery的開發技巧。我分享這些，因為我認為他們將是非常有用的給你。聲明：我沒有寫下面的代碼，但已經從Internet收集各種來源。

1。優化性能復雜的選擇
查詢DOM中的一個子集，使用復雜的選擇時，大幅提高了性能：
var subset = $("");
$("input[value^='']", subset);

2。設置上下文和提高性能
jQuery核心功能上，指定上下文參數。指定context參數，允許從DOM中更深的分支，而不是從DOM根，jQuery來啟動。鑒于一個足夠大的DOM，指定上下文參數轉化為性能提升。
$("input:radio", document.forms[0]);

3。現場事件處理程序

設置任何一個選擇的元素相匹配的事件處理程序，即使它被添加后的初始頁面加載到DOM：
$('button.someClass').live('click', someFunction);

這允許你通過Ajax加載內容，或通過JavaScript添加事件處理程序的成立為這些元素正確自動。

同樣，要停止現場事件處理：
4。檢查索引
jQuery有索引，但它是一種痛苦，使用你所需要的元素的列表，并通過元素你想要的指標

var index = e.g $('#ul>li').index( liDomObject );
以下是比較容易：
$("ul > li").click(function ()
{
    var index = $(this).prevAll().length;
});
如果你想知道在一個集合元素的索引，例如在一個無序列表的列表項：
5。使用jQuery的數據的方法
jQuery的數據（）方法是有用的，不為人所熟知。它可以讓你無需修改DOM綁定數據到DOM元素。
$("ul > li").click(function ()
{
    var index = $(this).prevAll().length;
});
6。刪除一個元素的淡出效果基本show效果
結合多個jQuery效果，動畫和刪除DOM元素。

$("#myButton").click(function() {
         $("#myDiv").fadeTo("slow", 0.01, function(){ //fade
             $(this).slideUp("slow", function() { //slide up
                 $(this).remove(); //then remove from the DOM
             });
         });
});
7。檢查是否存在一個元素
if ($("#someDiv").length) {
    //hooray!!! it exists...
}
使用下面的代碼片段來檢查一個元素是否存在與否。
8。添加到DOM中動態創建的元素

使用下面的代碼片段來動態創建一個DIV，并添加到DOM。
var newDiv = $('<div></div>');
newDiv.attr("id","myNewDiv").appendTo("body");
9。換行符和chainability的

而不是做：

$("a").hide().addClass().fadeIn().hide();

像這樣可以增加可讀性：
$("a")
  .hide()
  .addClass()
  .fadeIn()
  .hide();

10。創建自定義選擇
$.extend($.expr[':'], {
    over100pixels: function(a) {
        return $(a).height() > 100;
    }
});

$('.box:over100pixels').click(function() {
    alert('The element you clicked is over 100 pixels high');
});
11。克隆在jQuery對象

使用clone（）方法。jQuery的方法克隆任何JavaScript中的DOM對象。

// Clone the DIV
var cloned = $('#somediv').clone();
jQuery的clone（）方法不克隆一個JavaScript對象。克隆JavaScript對象，使用下面的代碼。
// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);
12。測試，如果事情是隱藏使用jQuery

我們使用。隱藏（）。在jQuery的show（）方法來改變元素的知名度。使用以下代碼來檢查一個元素是否是可見或不可見。
if($(element).is(":visible") == "true") {
       //The element is Visible
}
13。另一種方式的文件準備就緒
//Instead of
$(document).ready(function() {
    //document ready
});
//Use
$(function(){
    //document ready
});
14。選擇一個元素。（期），在它的ID

在選擇使用反斜杠來選擇的元素，在它的ID期間。
$("#Address\\.Street").text("Enter this field");
15。計數的直接子元素

如果你要計算所有的div＃foo的元素存在于
<div id="foo">
  <div id="bar"></div>
  <div id="baz">
    <div id="biz">
  </div>
  <span><span>
</div>

//jQuery code to count child elements
$("#foo > div").size()
16。做一個“閃存”的元素

jQuery.fn.flash = function( color, duration )
{
    var current = this.css( 'color' );
    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );
}
//Then use the above function as:
$( '#importantElement' ).flash( '255,0,0', 1000 );
17。中心元素在屏幕上
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

//Use the above function as:
$(element).center();
18。獲取父div使用最接近

如果你想找到的包裝紙DIV元素（不論該DIV的ID），然后你會想這個jQuery選擇：
$("#searchBox").closest("div");

19。禁用右鍵單擊上下文菜單

還有許多JavaScript片段禁用右鍵
單擊上下文菜單，但jQuery讓事情容易多了：
$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});
20。獲取鼠標光標的X和Y軸

這個腳本會顯示X和Y值 - 鼠標指針的坐標。
$().mousemove(function(e){
    //display the x and y axis values inside the P element
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
 本文由用戶 openkk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！