jquery技巧

原文作者：Viral Patel

翻译：http://blog.okbase.net/jquery2000

下面是非常有用的

原文作者：Viral Patel

翻译：http://blog.okbase.net/jquery2000

下面是非常有用的jQuery的技巧提示，我觉得对你可能非常有用，就共享出来。

免责声明：以下例子代码从网上收集，并未仔细测试。

1. 优化复杂选择器的性能

在使用复杂的选择器时，查询DOM的子集可以提升性能。

var subset = $("");

$("input[value^='']", subset);

2. 设置上下文提升性能

指定上下文参数时，在核心的jQuery函数里，指定上下文参数允许jQuery从DOM更深的分支开始而不是从DOM的根开始，这样可以提升性能。

$("input:radio", document.forms[0]);

3. Live事件处理

live()方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。在页面加载初始化完成后，你仍旧可以添加到DOM。

$('button.someClass').live('click', someFunction);

这允许你通过Ajax加载内容，或通过JavaScript设置元素的事件处理程序。

同样，如果要停止live事件处理：

$('button.someClass').die('click', someFunction);

虽然live事件处理相对于通常的方法有所限制，但在多数情况下能很好工作，jQuery 1.3以后支持live。

4. 检查索引

jQuery可以用.index来检查元素在列表中的索引，但用起来不爽。

var index = e.g $('#ul>li').index( liDomObject );

下面的方法更容易些：

$("ul > li").click(function ()

{

var index = $(this).prevAll().length;

});

5. 使用 jQuery data 方法

jQuery 的 data() 方法很有用，但许多人并不知道。它允许你绑定数据到DOM元素而不需要修改DOM。

6. 用淡出效果移除元素

1 2 3 4 5 6 7

$( "#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

比如说可以动态地添加和删除HTML表格里的行。

var newDiv = $('<div></div>');

newDiv.attr("id","myNewDiv").appendTo("body");

9. 换行和连锁转变（chainability）

原来这样：

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

现在可以这样增强可读性：

$("a")

.hide()

.addClass()

.fadeIn()

.hide();

10. 创建自定义选择器

1 2 3 4 5 6 7 8 9

$.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() 方法克隆 DOM 对象

// 克隆 DIV

var cloned = $('#somediv').clone();

jQuery clone() 方法不克隆 JavaScript 对象. 使用下面代码可以克隆 JavaScript 对象.

// 浅拷贝

var newObject = jQuery.extend({}, oldObject);

// 深拷贝

var newObject = jQuery.extend(true, {}, oldObject);

12. 使用jQuery测试元素是否隐藏

我们使用 .hide(), .show() 方法改变元素的可视性，使用下面的代码检测元素是否可见。

if($(element).is(":visible") == "true") {

//元素可见

}

13. 文档准备好的另一种方法

//原来的方法

$(document).ready(function() {

//document ready

});

//替代方法

$(function(){

//document ready

});

14. 在ID后加"."来选择元素

使用反斜杠来选择包含在ID中的元素.

$("#Address\\.Street").text("Enter this field");

15. 统计子元素数量

如果你想统计#foo元素里的DIV个数

<div id="foo">

<div id="bar"></div>

<div id="baz">

<div id="biz">

</div>

<span><span>

</div>

//jQuery统计子元素的代码

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

16. 元素转为"FLASH"

1 2 3 4 5 6 7 8

jQuery.fn.flash = function( color, duration ) { var current = this .css( 'color' ); this .animate( { color: 'rgb(' + color + ')' }, duration / 2 ); this .animate( { color: current }, duration / 2 ); } //使用下面的函数: $( '#importantElement' ).flash( '255,0,0' , 1000 );

17. 将元素在屏幕上居中

1 2 3 4 5 6 7 8 9

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 ; } //使用下面的函数: $(element).center();

18. 使用closest得到DIV父元素

如果你想得到包含的 DIV 元素 (不管这个DIV是什么ID)，可以这样：

$("#searchBox").closest("div");

19. 禁止右键菜单

使用JQuery禁止右键菜单很easy:

1 2 3 4 5

$(document).ready(function(){ $(document).bind( "contextmenu" ,function(e){ return false ; }); });

20. 得到鼠标X和Y坐标

1 2 3 4

$().mousemove(function(e){ //display the x and y axis values inside the P element $( 'p' ).html( "X Axis : " + e.pageX + " | Y Axis " + e.pageY); });

提示，我觉得对你可能非常有用，就共享出来。

免责声明：以下例子代码从网上收集，并未仔细测试。

1. 优化复杂选择器的性能

在使用复杂的选择器时，查询DOM的子集可以提升性能。

var subset = $("");

$("input[value^='']", subset);

2. 设置上下文提升性能

指定上下文参数时，在核心的jQuery函数里，指定上下文参数允许jQuery从DOM更深的分支开始而不是从DOM的根开始，这样可以提升性能。

$("input:radio", document.forms[0]);

3. Live事件处理

live()方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。在页面加载初始化完成后，你仍旧可以添加到DOM。

$('button.someClass').live('click', someFunction);

这允许你通过Ajax加载内容，或通过JavaScript设置元素的事件处理程序。

同样，如果要停止live事件处理：

$('button.someClass').die('click', someFunction);

虽然live事件处理相对于通常的方法有所限制，但在多数情况下能很好工作，jQuery 1.3以后支持live。

4. 检查索引

jQuery可以用.index来检查元素在列表中的索引，但用起来不爽。

var index = e.g $('#ul>li').index( liDomObject );

下面的方法更容易些：

$("ul > li").click(function ()

{

var index = $(this).prevAll().length;

});

5. 使用 jQuery data 方法

jQuery 的 data() 方法很有用，但许多人并不知道。它允许你绑定数据到DOM元素而不需要修改DOM。

6. 用淡出效果移除元素

1 2 3 4 5 6 7

$( "#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

比如说可以动态地添加和删除HTML表格里的行。

var newDiv = $('<div></div>');

newDiv.attr("id","myNewDiv").appendTo("body");

9. 换行和连锁转变（chainability）

原来这样：

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

现在可以这样增强可读性：

$("a")

.hide()

.addClass()

.fadeIn()

.hide();

10. 创建自定义选择器

1 2 3 4 5 6 7 8 9

$.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() 方法克隆 DOM 对象

// 克隆 DIV

var cloned = $('#somediv').clone();

jQuery clone() 方法不克隆 JavaScript 对象. 使用下面代码可以克隆 JavaScript 对象.

// 浅拷贝

var newObject = jQuery.extend({}, oldObject);

// 深拷贝

var newObject = jQuery.extend(true, {}, oldObject);

12. 使用jQuery测试元素是否隐藏

我们使用 .hide(), .show() 方法改变元素的可视性，使用下面的代码检测元素是否可见。

if($(element).is(":visible") == "true") {

//元素可见

}

13. 文档准备好的另一种方法

//原来的方法

$(document).ready(function() {

//document ready

});

//替代方法

$(function(){

//document ready

});

14. 在ID后加"."来选择元素

使用反斜杠来选择包含在ID中的元素.

$("#Address\\.Street").text("Enter this field");

15. 统计子元素数量

如果你想统计#foo元素里的DIV个数

<div id="foo">

<div id="bar"></div>

<div id="baz">

<div id="biz">

</div>

<span><span>

</div>

//jQuery统计子元素的代码

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

16. 元素转为"FLASH"

1 2 3 4 5 6 7 8

jQuery.fn.flash = function( color, duration ) { var current = this .css( 'color' ); this .animate( { color: 'rgb(' + color + ')' }, duration / 2 ); this .animate( { color: current }, duration / 2 ); } //使用下面的函数: $( '#importantElement' ).flash( '255,0,0' , 1000 );

17. 将元素在屏幕上居中

1 2 3 4 5 6 7 8 9

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 ; } //使用下面的函数: $(element).center();

18. 使用closest得到DIV父元素

如果你想得到包含的 DIV 元素 (不管这个DIV是什么ID)，可以这样：

$("#searchBox").closest("div");

19. 禁止右键菜单

使用JQuery禁止右键菜单很easy:

1 2 3 4 5

$(document).ready(function(){ $(document).bind( "contextmenu" ,function(e){ return false ; }); });

20. 得到鼠标X和Y坐标

1 2 3 4

$().mousemove(function(e){ //display the x and y axis values inside the P element $( 'p' ).html( "X Axis : " + e.pageX + " | Y Axis " + e.pageY); });