20个热门jQuery的提示和技巧

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);  

}); 

 

我也封装了一下Jquery 地址：http://www.360ui.net