20个热门jQuery的提示和技巧

以下是一些非常有用的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。

varnewDiv = $('<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

varcloned = $('#somediv').clone();

jQuery的clone（）方法不克隆一个JavaScript对象。克隆JavaScript对象，使用下面的代码。

// Shallow copy

varnewObject = jQuery.extend({}, oldObject);

// Deep copy

varnewObject = 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 >

<div ></div>

<div >

<div >

</div>

<span><span>

</div>

//jQuery code to count child elements

$("#foo > div").size()

16。做一个“闪存”的元素

jQuery.fn.flash =function( color, duration )

{

varcurrent =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");

returnthis;

}

//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){

returnfalse;

});

});

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

});