关于javascript：jQuery提示和技巧

jQuery Tips and Tricks

句法

由roosteronacid准备的事件的简写
通过roosteronacid的断裂和可连接性
由Nathan Long嵌套过滤器
通过roosteronacid缓存集合并在同一行执行命令
由roosteronacid包含选择器
通过roosteronacid定义元素创建时的属性
通过roosteronacid访问jQuery函数和数组一样
noConflict函数 - 由Oli释放$变量
通过nickf在noConflict模式下隔离$变量
roosteronacid的无冲突模式

数据存储

数据功能 - 通过TenebrousX将数据绑定到元素
类固醇支持HTML5数据属性！通过roosteronacid
Filip Dupanovi的jQuery元数据插件？

优化

通过roosteronacid优化复杂选择器的性能
lupefiasco的上下文参数
保存并重复使用Nathan Long的搜索
创建HTML元素并保留引用，检查元素是否存在，由Andreas Grech编写自己的选择器

杂

通过redsquare检查集合中元素的索引
TM的现场活动处理程序
用ken替换匿名函数和命名函数
Slace的Microsoft AJAX框架和jQuery桥接器
egyamado的jQuery教程
从集合中移除元素并通过roosteronacid保持可链接性
在Ben的匿名函数开头声明$ this
FireBug lite，Hotbox插件，告知何时加载图像和Color Blend的Google CDN
harriyott明智地使用第三方jQuery脚本
Jan Zich的每个功能
Chris S的Form Extensions插件
由OneNerd异步的每个函数
jQuery模板插件：使用roosteronacid的render函数实现复杂的逻辑

创建HTML元素并保留引用

1
2
3
4
5
6

var newDiv = $("");

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

/* Now whenever I want to append the new div I created,
I can just reference it from the"newDiv" variable */

检查元素是否存在

1
2
3
4

if ($("#someDiv").length)
{
// It exists...
}

编写自己的选择器

1
2
3
4
5
6
7
8
9
10
11

$.extend($.expr[":"], {
over100pixels: function (e)
{
return $(e).height() > 100;
}
});

$(".box:over100pixels").click(function ()
{
alert("The element you clicked is over 100 pixels height");
});

相关讨论

jQuery的data()方法很有用，但并不为人所知。它允许您在不修改DOM的情况下将数据绑定到DOM元素。

相关讨论

嵌套过滤器

你可以嵌套过滤器(如此处所示的nickf)。

1	.filter(":not(:has(.selected))")

相关讨论

我真的不喜欢$(document).ready(fn)快捷方式。当然它减少了代码，但它也减少了代码的可读性。当你看到$(document).ready(...)时，你知道你在看什么。 $(...)用于太多其他方式以立即有意义。

如果你有多个框架，你可以像你说的那样使用jQuery.noConflict();，但你也可以为它分配一个不同的变量：

1
2
3

var $j = jQuery.noConflict();

$j("#myDiv").hide();

如果你有几个框架可以归结为$x(...)式调用，那么非常有用。

相关讨论

哦，我们不要忘记jQuery元数据！ data()函数很棒，但必须通过jQuery调用填充。

而不是违反W3C对自定义元素属性的遵从性，例如：

1
2
3
4
5
6

改为使用元数据：

1
2
3
4
5
6
7
8
9

<input
name="email"
class="validation {validate: email, minLength: 2, maxLength: 50}" />

jQuery('*[class=validation]').each(function () {
var metadata = $(this).metadata();
// etc.
});

相关讨论

现场活动处理程序

为与选择器匹配的任何元素设置事件处理程序，即使它在初始页面加载后被添加到DOM：

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

这允许您通过ajax加载内容，或通过javascript添加它们，并自动为这些元素正确设置事件处理程序。

同样，要停止实时事件处理：

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

与常规事件相比，这些实时事件处理程序有一些限制，但它们对大多数情况都很有用。

有关更多信息，请参阅jQuery文档。

更新：live()和die()在jQuery 1.7中已弃用。有关类似的替换功能，请访问http://api.jquery.com/on/和http://api.jquery.com/off/。

UPDATE2：live()一直被弃用，甚至在jQuery 1.7之前。对于1.7之前的版本jQuery 1.4.2+使用delegate()和undelegate()。可以使用delegate()重写live()示例($('button.someClass').live('click', someFunction);)：$(document).delegate('button.someClass', 'click', someFunction);。

相关讨论

用命名函数替换匿名函数。这真的取代了jQuery上下文，但是由于它依赖于回调函数，它在使用jQuery时似乎更加发挥作用。我使用内联匿名函数的问题是它们更难调试(更容易查看具有明确命名函数的callstack，而不是6级"匿名")，以及同一个内部的多个匿名函数这一事实jQuery链可能变得难以阅读和/或维护。另外，匿名函数通常不会被重用;另一方面，声明命名函数鼓励我编写更有可能被重用的代码。

插图;代替：

1
2
3
4
5
6
7
8

$('div').toggle(
function(){
// do something
},
function(){
// do something else
}
);

我更喜欢：

1
2
3
4
5
6
7
8
9

function onState(){
// do something
}

function offState(){
// do something else
}

$('div').toggle( offState, onState );

相关讨论

在元素创建时定义属性

在jQuery 1.4中，您可以使用对象文字在创建元素时定义属性：

1	var e = $("", { href:"#", class:"a-class another-class", title:"..." });

...你甚至可以添加样式：

1
2
3
4
5
6
7

$("", {
...
css: {
color:"#FF0000",
display:"block"
}
});

这是文档的链接。

而不是为jQuery对象使用不同的别名(当使用noConflict时)，我总是通过将其全部包装在闭包中来编写我的jQuery代码。这可以在document.ready函数中完成：

1
2
3
4
5
6
7

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
if ($ instanceOf jQuery) {
alert("$ is the jQuery object!");
}
});

或者你可以这样做：

1
2
3

(function($) {
$('...').etc() // whatever jQuery code you want
})(jQuery);

我发现这是最便携的。我一直在研究同时使用Prototype和jQuery的网站，这些技术避免了所有冲突。

相关讨论

检查索引

jQuery有.index但是使用起来很痛苦，因为你需要元素列表，并传入你想要索引的元素：

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

以下更容易：

如果您想知道无序列表中集合中元素的索引(例如列表项)：

1
2
3

$("ul > li").click(function () {
var index = $(this).prevAll().length;
});

相关讨论

准备活动的简写

明确而冗长的方式：

1
2
3
4

$(document).ready(function ()
{
// ...
});

简写：

1
2
3
4

$(function ()
{
// ...
});

相关讨论

在核心jQuery函数上，除了selector参数之外还指定context参数。指定context参数允许jQuery从DOM中的更深层分支开始，而不是从DOM根开始。给定足够大的DOM，指定上下文参数应转换为性能增益。

示例：在文档的第一个表单中查找无线电类型的所有输入。

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

参考：http：//docs.jquery.com/Core/jQuery#expressioncontext

相关讨论

不仅仅是jQuery，但我为jQuery和MS AJAX做了一个很好的小桥：

1
2
3

Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
return $('#' + this.get_id());
}

如果你正在做很多ASP.NET AJAX，这真的很好，因为MS支持jQuery现在有一个很好的桥接意味着它很容易做jQuery操作：

1	$get('#myControl').j().hide();

所以上面的例子并不是很好，但如果你正在编写ASP.NET AJAX服务器控件，那么就可以轻松地在客户端控件实现中使用jQuery。

相关讨论

优化复杂选择器的性能

使用复杂选择器时，查询DOM的子集可以显着提高性能：

1
2
3

var subset = $("");

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

相关讨论

说到提示和技巧以及一些教程。我发现Jeffery Way的这些系列教程("jQuery for Absolute Beginners"视频系列)非常有用。

它针对那些不熟悉jQuery的开发人员。他展示了如何使用jQuery创建许多很酷的东西，比如动画，创建和删除元素等......

我从中学到了很多东西。他展示了如何使用jQuery很容易。
现在我喜欢它，我可以阅读和理解任何jQuery脚本，即使它很复杂。

这是一个我喜欢"调整文本大小"的例子

1- jQuery ......

1
2
3
4
5
6
7
8
9
10
11

2- CSS造型......

1
2
3
4

2- HTML ...

1
2
3
4
5
6
7

Larger |
Smaller
<p>

In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the"slice","parseFloat", and"CSS" Javascript/jQuery methods.

</p>

强烈推荐这些教程......

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

相关讨论

异步each()函数

如果你有非常复杂的文件运行jquery每个()函数在迭代期间锁定浏览器，和/或Internet Explorer弹出"你想继续运行这个脚本"的消息，这个解决方案将节省一天。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
if (!in_array.length) return; // make sure array was sent

var i = 0; // starting index

bgEach(); // call the function

function bgEach()
{
if (in_callback.call(in_array[i], i, in_array[i]) !== false)
{
i++; // move to next item

if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
}
}

return in_array; // returns array
};

jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};

你可以使用它的第一种方式就像每个()：

1	$('your_selector').forEach( function() {} );

可选的第二个参数允许您指定迭代之间的速度/延迟，这对于动画可能很有用(以下示例将在迭代之间等待1秒)：

1	$('your_selector').forEach( function() {}, 1000 );

请记住，由于这是异步工作，因此您不能依赖迭代在下一行代码之前完成，例如：

1 2	$('your_selector').forEach( function() {}, 500 ); // next lines of code will run before above code is complete

我为一个内部项目编写了这个，虽然我确信它可以改进，但它适用于我们需要的东西，所以希望你们中的一些人觉得它很有用。谢谢 -

Syntactic shorthand-sugar-thing - 在一行上缓存对象集合并执行命令：

代替：

1
2
3

var jQueryCollection = $("");

jQueryCollection.command().command();

我做：

1	var jQueryCollection = $("").command().command();

一个有点"真实"的用例可能是这样的：

1
2
3
4

var cache = $("#container div.usehovereffect").mouseover(function ()
{
cache.removeClass("hover").filter(this).addClass("hover");
});

相关讨论

我喜欢在匿名函数的开头声明一个$this变量，所以我知道我可以引用一个jQueried。

像这样：

1
2
3
4
5

$('a').each(function() {
var $this = $(this);

// Other code
});

相关讨论

将jQuery对象保存在变量中以便重用

将jQuery对象保存到变量可让您重用它，而无需通过搜索DOM来查找它。

(正如@Louis建议的那样，我现在使用$来表示变量包含一个jQuery对象。)

1
2
3
4
5
6
7
8

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

作为一个更复杂的例子，假设您在商店中有食物清单，并且您只想显示符合用户标准的食物。您有一个带有复选框的表单，每个复选框都包含一个条件。复选框的名称类似于organic和lowfat，产品具有相应的类 - .organic等。

1 2	var $allFoods, $matchingFoods; $allFoods = $('div.food');

现在您可以继续使用该jQuery对象了。每次单击一个复选框(检查或取消选中)，从主食品列表开始，并根据复选框过滤：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

// Start out assuming all foods should be showing
// (in case a checkbox was just unchecked)
var $matchingFoods = $allFoods;

// Go through all the checked boxes and keep only the foods with
// a matching class
this.closest('form').find("input:checked").each(function() {
$matchingFoods = $matchingFoods.filter("." + $(this).attr("name"));
});

// Hide any foods that don't match the criteria
$allFoods.not($matchingFoods).hide();
});

相关讨论

像访问数组一样访问jQuery函数

基于布尔值添加/删除类...

1
2
3
4

function changeState(b)
{
$("selector")[b ?"addClass" :"removeClass"]("name of the class");
}

是...的缩短版本

1
2
3
4
5
6
7
8
9
10
11

function changeState(b)
{
if (b)
{
$("selector").addClass("name of the class");
}
else
{
$("selector").removeClass("name of the class");
}
}

没有那么多的用例。从来没有;我觉得它很整洁:)

更新

如果你不是注释读取类型，ThiefMaster指出toggleClass接受一个布尔值，它确定是否应该添加或删除一个类。因此，就我上面的示例代码而言，这将是最好的方法......

1	$('selector').toggleClass('name_of_the_class', true/false);

相关讨论

似乎已经提到了大多数有趣且重要的提示，所以这只是一点补充。

小技巧是jQuery.each(对象，回调)函数。每个人都可能使用jQuery.each(回调)函数迭代jQuery对象本身，因为它很自然。 jQuery.each(对象，回调)实用程序函数迭代对象和数组。很长一段时间，我不知道除了不同的语法之外没有看到它是什么(我不介意编写所有时尚的循环)，而且我有点惭愧，因为我最近才意识到它的主要优势。

问题在于，由于jQuery.each(对象，回调)中的循环体是一个函数，因此每次在循环中都会得到一个新的作用域，这在循环中创建闭包时特别方便。

换句话说，一个典型的常见错误是执行以下操作：

1
2
3
4
5

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
functions.push(function() { alert(someArray[i]) });
}

现在，当您调用functions数组中的函数时，您将获得内容undefined的三次警报，这很可能不是您想要的。问题是只有一个变量i，并且所有三个闭包都引用它。循环结束时，i的最终值为3，someArrary[3]为undefined。您可以通过调用另一个为您创建闭包的函数来解决它。或者您使用jQuery实用程序，它基本上会为您执行此操作：

1
2
3
4
5

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
functions.push(function() { alert(item) });
});

现在，当您调用这些函数时，您将获得三个警报，其中包含内容1,2和3。

一般来说，这是你自己无法做到的事情，但它很高兴。

从集合中删除元素并保留可链接性

考虑以下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<ul>

<li>
One
</li>

<li>
Two
</li>

<li>
Three
</li>

<li>
Four
</li>

<li>
Five
</li>

</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$("li").filter(function()
{
var text = $(this).text();

// return true: keep current element in the collection
if (text ==="One" || text ==="Two") return true;

// return false: remove current element from the collection
return false;
}).each(function ()
{
// this will alert:"One" and"Two"
alert($(this).text());
});

filter()函数从jQuery对象中删除元素。在这种情况下：将删除所有不包含文本"One"或"Two"的li元素。

相关讨论

更新：

只需在网站上包含此脚本，您就可以在任何浏览器中弹出一个Firebug控制台进行调试。不完整的功能，但它仍然非常有用！记得在完成后将其删除。

1	<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'>

看看这个链接：

来自CSS技巧

更新：
我找到了新的东西;它是JQuery Hotbox。

JQuery Hotbox

Google在Google Code上托管了多个JavaScript库。从那里加载它可以节省带宽，并加载已经缓存的快速cos。

1
2
3
4
5
6
7
8
9

要么

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript">

您还可以使用它来判断图像何时完全加载。

1
2
3

$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
});

firebug的"console.info"，您可以使用它将消息和变量转储到屏幕而不必使用警告框。"console.time"允许您轻松设置一个计时器来包装一堆代码并查看它需要多长时间。

1
2
3
4
5
6
7
8

console.time('create list');

for (i = 0; i < 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
}

console.timeEnd('create list');

相关讨论

在可能的情况下使用伪选择器的过滤方法，以便jQuery可以使用querySelectorAll(这比sizzle快得多)。考虑这个选择器：

1	$('.class:first')

可以使用以下方法进行相同的选择：

1	$('.class').eq(0)

哪个必须更快，因为'.class'的初始选择是QSA兼容的

相关讨论

更改输入元素的类型

当我试图改变已经附加到DOM的输入元素的类型时，我遇到了这个问题。您必须克隆现有元素，将其插入旧元素之前，然后删除旧元素。否则它不起作用：

1
2
3
4
5
6
7
8

var oldButton = jQuery("#Submit");
var newButton = oldButton.clone();

newButton.attr("type","button");
newButton.attr("id","newSubmit");
newButton.insertBefore(oldButton);
oldButton.remove();
newButton.attr("id","Submit");

触发动画时使用.stop(true，true)可防止重复动画。这对于翻转动画特别有用。

1
2
3
4
5

$("#someElement").hover(function(){
$("div.desc", this).stop(true,true).fadeIn();
},function(){
$("div.desc", this).fadeOut();
});

在方法调用(如.append())中使用自执行匿名函数来迭代某些东西。即：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$("
<ul>
").append((function ()
{
var data = ["0","1","2","3","4","5","6"],
output = $(""),
x = -1,
y = data.length;

while (++x < y) output.append("
<li>
" + info[x] +"
</li>
");

return output.children();
}()));

我用它来迭代那些大而不舒服的东西，以摆脱我的链接构建。

明智地使用第三方jQuery脚本，例如表单字段验证或URL解析。值得一看的是什么，以便您在下次遇到JavaScript要求时知道。

换行符和可链接性

在链接上链接多个调用时......

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

您可以使用换行符提高可读性。像这样：

1
2
3
4
5

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

相关讨论

这个去了Kobi。

请考虑以下代码段：

1
2
3
4
5
6
7

// hide all elements which contains the text"abc"
$("p").each(function ()
{
var that = $(this);

if (that.text().indexOf("abc") > -1) that.hide();
});

这是一个速记......大约快两倍：

1	$("p.value:contains('abc')").hide();

相关讨论

类固醇支持HTML5数据属性！

之前已经提到过数据功能。有了它，您就可以将数据与DOM元素相关联。

最近，jQuery团队增加了对HTML5自定义data- *属性的支持。好像这还不够;他们用类固醇强制数据函数，这意味着你可以直接在你的标记中以JSON的形式存储复杂的对象。

HTML：

1	<p data-xyz = '{"str":"hi there","int": 2,"obj": {"arr": [1, 2, 3] } }' />

JavaScript：

1
2
3
4
5
6
7
8
9
10

var data = $("p").data("xyz");

data.str //"hi there"
typeof data.str //"string"

data.int + 2 // 4
typeof data.int //"number"

data.obj.arr.join(" +") +" = 6" //"1 + 2 + 3 = 6"
typeof data.obj.arr //"object" ... Gobbles! Errrghh!

为折叠上方的元素添加选择器

作为jQuery选择器插件

1
2
3
4
5
6
7
8
9
10
11
12
13

$.extend($.expr[':'], {
"aboveFold": function(a, i, m) {
var container = m[3],
var fold;
if (typeof container ==="undefined") {
fold = $(window).height() + $(window).scrollTop();
} else {
if ($(container).length == 0 || $(container).offset().top == null) return false;
fold = $(container).offset().top + $(container).height();
}
return fold >= $(a).offset().top;
}
});

用法：

1	$("p:aboveFold").css({color:"red"});

感谢scottymac

在更基础和更高级别的说明中，您可以尝试通过编写自己的小框架来模拟jQuery的基本选择器机制(它比听起来更简单)。它不仅可以改善你的Javascript，还可以帮助你理解为什么jQuery的$("＃elementId")比$("。elementClass")快很多倍，并且也快于$("element＃elementId")(这可能表面上反直觉)。

这也将迫使您学习面向对象的Javascript，它将帮助您以更模块化的方式组织代码，从而避免重型jQuery脚本块可以采用的意大利面条代码性质。

访问iFrame Elements
iframe不是大多数问题的最佳解决方案，但是当你确实需要使用它时，知道如何使用Javascript访问其中的元素非常方便。 jQuery的contents()方法使这变得轻而易举，使我们能够在一行中加载iframe的DOM，如下所示：

1
2
3
4
5
6
7

$(function(){
var iFrameDOM = $("iframe#someID").contents();
//Now you can use find() to access any element in the iframe:

iFrameDOM.find(".message").slideUp();
//Slides up all elements classed 'message' in the iframe
});

资源

"ends with"元素选择器非常适合ASP.NET Web表单开发，因为您不必担心前面的ctl00 silliness：

1	$("[id$='txtFirstName']");

正如评论中所指出的，如果不小心使用，这个选择器(与任何抽象层一样)可能会很慢。更喜欢将选择器范围限定为某些包含元素，例如：

1	$(".container [id$='txtFirstName']");

减少遍历所需元素的数量。

jQuery文档

相关讨论

(这是一个无耻的插头)

您可以尝试使用我添加的表单相关方法添加到jQuery的流畅API中的这个插件，而不是编写重复的表单处理代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// elementExists is also added
if ($("#someid").elementExists())
alert("found it");

// Select box related
$("#mydropdown").isDropDownList();

// Can be any of the items from a list of radio boxes - it will use the name
$("#randomradioboxitem").isRadioBox("myvalue");
$("#radioboxitem").isSelected("myvalue");

// The value of the item selected. For multiple selects it's the first value
$("#radioboxitem").selectedValue();

// Various, others include password, hidden. Buttons also
$("#mytextbox").isTextBox();
$("#mycheck").isCheckBox();
$("#multi-select").isSelected("one","two","three");

// Returns the 'type' property or 'select-one' 'select-multiple'
var fieldType = $("#someid").formElementType();

相关讨论

绑定到事件并立即执行事件处理程序：

1
2
3

$('selector').bind('change now', function () { // bind to two events: 'change' and 'now'
// update other portions of the UI
}).trigger('now'); // 'now' is a custom event

这就像

1
2
3
4
5

function update() {
// update other portions of the UI
}
$('selector').change(update);
update();

但无需创建单独的命名函数。

无冲突模式

1	jQuery.noConflict();

"Run this function to give control of the $ variable back to whichever library first implemented it. This helps to make sure that jQuery doesn't conflict with the $ object of other libraries.

By using this function, you will only be able to access jQuery using the jQuery variable. For example, where you used to do $("div p"), you now must do jQuery("div p")".

增加行索引的名称

如果输入元素名称包含像'0_row'这样的行索引，这是一种增加克隆输入元素的行索引的简洁方法：

1	$(this).attr('name', $(this).attr('name').replace(/^\d+/, function(n){ return ++n; }));

克隆元素的名称现在为'1_row'

相关讨论

一个无耻的插件...... jQuery模板插件：使用render-functions实现复杂的逻辑

The new jQuery template plug-in is
awesome. That being said, the
double-curly brace template-tags are
not exactly my cup of tea. In a more
complex template the tags obscure the
templates markup, and implementing
logic past simple if/else statements
is a pain.

After messing around with the plug-in
for a few hours, my head began to hurt
from trying to distinguish the markup
in my template from the millions of
double curly braces.

So I popped an aspirin and began work
on an alternative

相关讨论