答案 0 :(得分：252)
创建HTML元素并保留参考
var newDiv = $("<div />");
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 */
检查元素是否存在
if ($("#someDiv").length)
{
// It exists...
}
编写自己的选择器
$.extend($.expr[":"], {
over100pixels: function (e)
{
return $(e).height() > 100;
}
});
$(".box:over100pixels").click(function ()
{
alert("The element you clicked is over 100 pixels height");
});
答案 1 :(得分：111)
jQuery的data()方法很有用，但并不为人所知。它允许您将数据绑定到DOM元素而无需修改DOM。
答案 2 :(得分：95)
答案 3 :(得分：80)
我真的不喜欢$(document).ready(fn)快捷方式。当然它减少了代码，但它也减少了代码的可读性。当你看到$(document).ready(...)时，你知道你在看什么。 $(...)用于其他许多方面，以便立即理解。
如果您有多个框架，可以按照说法使用jQuery.noConflict();，但您也可以为此分配一个不同的变量：
var $j = jQuery.noConflict();
$j("#myDiv").hide();
如果您有几个可以归结为$x(...)样式调用的框架，那么非常有用。
答案 4 :(得分：77)
哦，我们不要忘记jQuery metadata！ data（）函数很棒，但必须通过jQuery调用填充。
而不是违反W3C对自定义元素属性的遵从性，例如：
<input
name="email"
validation="required"
validate="email"
minLength="7"
maxLength="30"/>
改为使用元数据：
<input
name="email"
class="validation {validate: email, minLength: 2, maxLength: 50}" />
<script>
jQuery('*[class=validation]').each(function () {
var metadata = $(this).metadata();
// etc.
});
</script>
答案 5 :(得分：74)
为匹配选择器的任何元素设置事件处理程序，即使它在初始页面加载后添加到DOM中也是如此：
$('button.someClass').live('click', someFunction);
这允许您通过ajax加载内容，或通过javascript添加内容，并自动为这些元素设置事件处理程序。
同样，要停止直播活动处理：
$('button.someClass').die('click', someFunction);
与常规活动相比，这些实时活动处理程序有一些限制，但它们适用于大多数情况。
有关详细信息，请参阅jQuery Documentation。
更新：jQuery 1.7中不推荐使用live()和die()。有关类似的替换功能，请参阅http://api.jquery.com/on/和http://api.jquery.com/off/。
UPDATE2：live()一直被弃用，甚至在jQuery 1.7之前。对于1.7之前的版本jQuery 1.4.2+使用delegate()和undelegate()。 live()示例（$('button.someClass').live('click', someFunction);）可以使用delegate()重写那：$(document).delegate('button.someClass', 'click', someFunction);。
答案 6 :(得分：46)
用命名函数替换匿名函数。这真的取代了jQuery上下文，但是由于它依赖于回调函数，它在使用jQuery时似乎更加发挥作用。我使用内联匿名函数的问题是它们更难调试（更容易查看具有明确命名函数的callstack，而不是6级“匿名”），以及同一个内部的多个匿名函数这一事实jQuery链可能变得难以阅读和/或维护。另外，匿名函数通常不会被重用;另一方面，声明命名函数鼓励我编写更有可能被重用的代码。
插图;而不是：
$('div').toggle(
function(){
// do something
},
function(){
// do something else
}
);
我更喜欢：
function onState(){
// do something
}
function offState(){
// do something else
}
$('div').toggle( offState, onState );
答案 7 :(得分：45)
在元素创建时定义属性
在jQuery 1.4中，您可以使用对象文字在创建元素时定义属性：
var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });
...您甚至可以添加样式：
$("<a />", {
...
css: {
color: "#FF0000",
display: "block"
}
});
答案 8 :(得分：43)
而不是为jQuery对象使用不同的别名（当使用noConflict时），我总是通过将其全部包装在闭包中来编写我的jQuery代码。这可以在document.ready函数中完成：
var $ = someOtherFunction(); // from a different library
jQuery(function($) {
if ($ instanceOf jQuery) {
alert("$ is the jQuery object!");
}
});
或者你可以这样做：
(function($) {
$('...').etc() // whatever jQuery code you want
})(jQuery);
我发现这是最便携的。我一直在开发一个同时使用Prototype和jQuery的网站，这些技术避免了所有冲突。
答案 9 :(得分：39)
jQuery有.index但是使用起来很痛苦，因为你需要元素列表，并传入你想要索引的元素：
var index = e.g $('#ul>li').index( liDomObject );
以下内容更容易：
如果您想知道无序列表中集合中元素的索引（例如列表项）：
$("ul > li").click(function () {
var index = $(this).prevAll().length;
});
答案 10 :(得分：23)
准备事件的简写
明确而冗长的方式：
$(document).ready(function ()
{
// ...
});
简写：
$(function ()
{
// ...
});
答案 11 :(得分：22)
在核心jQuery函数上，除了selector参数之外，还要指定context参数。指定context参数允许jQuery从DOM中的更深层分支开始，而不是从DOM根开始。给定足够大的DOM，指定上下文参数应该转化为性能增益。
示例：在文档的第一个表单中查找radio类型的所有输入。
$("input:radio", document.forms[0]);
答案 12 :(得分：21)
不仅仅是jQuery，但我为jQuery和MS AJAX做了一个很好的小桥：
Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
return $('#' + this.get_id());
}
如果你正在做很多ASP.NET AJAX，这真的很好，因为MS支持jQuery现在有一个很好的桥接意味着它很容易做jQuery操作：
$get('#myControl').j().hide();
所以上面的例子不是很好，但是如果你正在编写ASP.NET AJAX服务器控件，那么就可以轻松地在客户端控件实现中使用jQuery。
答案 13 :(得分：20)
优化复杂选择器的性能
使用复杂选择器时，查询DOM的子集可以显着提高性能：
var subset = $("");
$("input[value^='']", subset);
答案 14 :(得分：19)
说到提示和技巧以及一些教程。我发现Jeffery Way这些系列教程（“jQuery for Absolute Beginners”视频系列）非常有用。
它针对那些不熟悉jQuery的开发人员。他展示了如何使用jQuery创建许多很酷的东西，比如动画，创建和删除元素等......
我从中学到了很多东西。他展示了如何使用jQuery很容易。 现在我喜欢它，我可以阅读和理解任何jQuery脚本，即使它很复杂。
以下是我喜欢“调整文字大小”
的一个例子1- jQuery ...
<script language="javascript" type="text/javascript">
$(function() {
$('a').click(function() {
var originalSize = $('p').css('font-size'); // get the font size
var number = parseFloat(originalSize, 10); // that method will chop off any integer from the specified variable "originalSize"
var unitOfMeasure = originalSize.slice(-2);// store the unit of measure, Pixle or Inch
$('p').css('font-size', number / 1.2 + unitOfMeasure);
if(this.id == 'larger'){$('p').css('font-size', number * 1.2 + unitOfMeasure);}// figure out which element is triggered
});
});
</script>
2- CSS样式......
<style type="text/css" >
body{ margin-left:300px;text-align:center; width:700px; background-color:#666666;}
.box {width:500px; text-align:justify; padding:5px; font-family:verdana; font-size:11px; color:#0033FF; background-color:#FFFFCC;}
</style>
2- HTML ...
<div class="box">
<a href="#" id="larger">Larger</a> |
<a href="#" id="Smaller">Smaller</a>
<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>
</div>
强烈推荐这些教程......
http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
答案 15 :(得分：19)
异步each（）函数
如果您有非常复杂的文档，那么运行jquery 每个（）函数会在迭代期间锁定浏览器，并且/或者Internet Explorer会弹出'你想继续运行这个脚本'消息，这个解决方案将节省一天。
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
};
您可以使用它的第一种方式就像每个（）：
$('your_selector').forEach( function() {} );
可选的第二个参数允许您指定迭代之间的速度/延迟，这可能对动画有用（以下示例将在迭代之间等待1秒）：
$('your_selector').forEach( function() {}, 1000 );
请记住，由于这是异步工作，因此您不能依赖迭代在下一行代码之前完成，例如：
$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete
我为一个内部项目写了这个，虽然我确信它可以改进，但它适用于我们需要的东西，所以希望你们中的一些人觉得它很有用。谢谢 -
答案 16 :(得分：18)
Syntactic shorthand-sugar-thing - 在一行缓存对象集合并执行命令：
代替：
var jQueryCollection = $("");
jQueryCollection.command().command();
我这样做：
var jQueryCollection = $("").command().command();
一个有点“真实”的用例可能是这样的：
var cache = $("#container div.usehovereffect").mouseover(function ()
{
cache.removeClass("hover").filter(this).addClass("hover");
});
答案 17 :(得分：15)
我喜欢在匿名函数的开头声明一个$this变量，所以我知道我可以引用一个jQueried。
像这样：
$('a').each(function() {
var $this = $(this);
// Other code
});
答案 18 :(得分：14)
将jQuery对象保存到变量可让您重用它，而无需通过搜索DOM来查找它。
（正如@Louis建议的那样，我现在使用$来表示变量包含一个jQuery对象。）
// 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等。
var $allFoods, $matchingFoods;
$allFoods = $('div.food');
现在您可以继续使用该jQuery对象了。每次单击一个复选框（检查或取消选中），从主食品列表开始，并根据复选框过滤：
// 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();
});
答案 19 :(得分：11)
像访问数组一样访问jQuery函数
根据布尔值添加/删除类...
function changeState(b)
{
$("selector")[b ? "addClass" : "removeClass"]("name of the class");
}
是...的缩短版本。
function changeState(b)
{
if (b)
{
$("selector").addClass("name of the class");
}
else
{
$("selector").removeClass("name of the class");
}
}
没有那么多的用例。从来没有;我觉得它很整洁:)。
<强>更新
如果你不是评论阅读类型，ThiefMaster指出toggleClass accepts a boolean value，它决定是否应该添加或删除一个类。因此，就我上面的示例代码而言，这将是最好的方法......
$('selector').toggleClass('name_of_the_class', true/false);
答案 20 :(得分：11)
似乎已经提到了大多数有趣且重要的提示，所以这只是一点补充。
小提示是jQuery.each(object, callback)功能。每个人都可能使用jQuery.each(callback)函数迭代jQuery对象本身，因为它很自然。 jQuery.each（对象，回调）实用程序函数迭代对象和数组。很长一段时间，我不知道除了不同的语法之外没有看到它是什么（我不介意编写所有时尚的循环），而且我有点惭愧，我最近才意识到它的主要优势。
问题是，由于jQuery.each（对象，回调）中的循环体是一个函数，每次在循环中都会得到新范围这在循环中创建闭包时特别方便。
换句话说，一个典型的常见错误是做类似的事情：
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实用程序，它基本上会为您执行此操作：
var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
functions.push(function() { alert(item) });
});
现在，当您调用这些函数时，您会收到三个警告，内容为1,2和3，符合预期。
一般来说，你自己做不了什么，但是很高兴。
答案 21 :(得分：9)
从集合中删除元素并保留可链接性
请考虑以下事项：
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
$("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元素。
答案 22 :(得分：9)
尽可能在伪选择器上使用过滤方法，以便jQuery可以使用querySelectorAll（比sizzle快得多）。考虑一下这个选择器：
$('.class:first')
可以使用以下方式进行相同的选择：
$('.class').eq(0)
哪个必须更快，因为'.class'的初始选择是QSA兼容的
答案 23 :(得分：9)
更新
只需在网站上包含此脚本，您就可以在任何浏览器中弹出一个Firebug控制台进行调试。不完整的功能，但它仍然非常有用！完成后请记得将其删除。
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
点击此链接：
更新： 我找到了新的东西;它是JQuery Hotbox。
Google在Google Code上托管了多个JavaScript库。从那里加载它可以节省带宽，并加载已经缓存的快速cos。
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
// Your code goes here.
});
</script>
或者
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
您也可以使用它来判断图像何时完全加载。
$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
});
firebug的“console.info”，您可以使用它将消息和变量转储到屏幕而不必使用警告框。 “console.time”允许您轻松设置一个计时器来包装一堆代码并查看它需要多长时间。
console.time('create list');
for (i = 0; i < 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
}
console.timeEnd('create list');
答案 24 :(得分：8)
更改输入元素的类型
当我尝试更改已附加到DOM的输入元素的类型时，我遇到了这个问题。您必须克隆现有元素，将其插入旧元素之前，然后删除旧元素。否则它不起作用：
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");
答案 25 :(得分：7)
明智地使用第三方jQuery脚本，例如表单字段验证或URL解析。值得一看的是什么，所以当你下次遇到JavaScript需求时你就会知道。
答案 26 :(得分：7)
在方法调用（例如.append()）中使用自执行匿名函数来迭代某些东西。即：
$("<ul>").append((function ()
{
var data = ["0", "1", "2", "3", "4", "5", "6"],
output = $("<div>"),
x = -1,
y = data.length;
while (++x < y) output.append("<li>" + info[x] + "</li>");
return output.children();
}()));
我使用它来迭代那些大而不舒服的东西，以摆脱我的链接构建。
答案 27 :(得分：7)
触发动画时使用.stop（true，true）可防止重复动画。这对于翻转动画特别有用。
$("#someElement").hover(function(){
$("div.desc", this).stop(true,true).fadeIn();
},function(){
$("div.desc", this).fadeOut();
});
答案 28 :(得分：7)
换行符和可链接性
在集合上链接多个调用时......
$("a").hide().addClass().fadeIn().hide();
您可以使用换行符提高可读性。像这样：
$("a")
.hide()
.addClass()
.fadeIn()
.hide();
答案 29 :(得分：5)
这个出现在Kobi。
考虑以下代码片段：
// hide all elements which contains the text "abc"
$("p").each(function ()
{
var that = $(this);
if (that.text().indexOf("abc") > -1) that.hide();
});
这是一个速记......速度快了两倍：
$("p.value:contains('abc')").hide();
答案 30 :(得分：5)
支持类固醇的HTML5数据属性！
之前曾提到data function。有了它，您就可以将数据与DOM元素相关联。
最近，jQuery团队增加了对HTML5 custom data-* attributes的支持。好像这还不够;他们用类固醇强制数据函数，这意味着你可以直接在你的标记中以JSON的形式存储复杂的对象。
HTML：
<p data-xyz = '{"str": "hi there", "int": 2, "obj": { "arr": [1, 2, 3] } }' />
JavaScript：
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!
答案 31 :(得分：3)
$.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;
}
});
$("p:aboveFold").css({color:"red"});
Thx to scottymac
答案 32 :(得分：1)
（这是一个无耻的插件）
不是编写重复的表单处理代码，而是可以尝试this plugin我写的是通过添加与表单相关的方法添加到jQuery的流畅API：
// 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();
答案 33 :(得分：1)
在更基础和更高级别的说明中，您可以尝试通过编写自己的小框架来模拟jQuery的基本选择器机制（它比听起来更简单）。它不仅可以改善你的Javascript，还可以帮助你理解为什么jQuery的$（“＃elementId”）比$（“。elementClass”）快很多倍，并且也快于$（“element＃elementId “）（这可能表面上反直觉）。
这也将迫使您学习面向对象的Javascript，它将帮助您以更模块化的方式组织代码，从而避免重型jQuery脚本块可以采用的意大利面条代码性质。
答案 34 :(得分：1)
访问iFrame Elements iframe不是大多数问题的最佳解决方案，但是当你确实需要使用它时，知道如何使用Javascript访问其中的元素非常方便。 jQuery的contents（）方法使这变得轻而易举，使我们可以在一行中加载iframe的DOM，如下所示：
$(function(){
var iFrameDOM = $("iframe#someID").contents();
//Now you can use <strong>find()</strong> to access any element in the iframe:
iFrameDOM.find(".message").slideUp();
//Slides up all elements classed 'message' in the iframe
});
答案 35 :(得分：1)
“以...结尾”元素选择器非常适合ASP.NET Web表单开发，因为您不必担心前置的ctl00愚蠢：
$("[id$='txtFirstName']");
如评论中所述，如果不小心使用，这个选择器（与任何抽象层一样）可能会很慢。更喜欢将选择器范围限定为某些包含元素，例如
$(".container [id$='txtFirstName']");
减少遍历所需元素的数量。
答案 36 :(得分：0)
无冲突模式
jQuery.noConflict();
“运行此函数可以将
$变量控制回第一个实现它的库。这有助于确保jQuery不与其他库的$对象冲突。” / p>通过使用此函数，您将只能使用
jQuery变量访问jQuery。例如，您曾经执行$("div p")的地方，现在必须执行jQuery("div p")“。
答案 37 :(得分：0)
如果输入元素名称包含像'0_row'这样的行索引，这是一种增加克隆输入元素的行索引的简洁方法：
$(this).attr('name', $(this).attr('name').replace(/^\d+/, function(n){ return ++n; }));
克隆元素的名称现在为'1_row'
答案 38 :(得分：0)
一个无耻的插件...... The jQuery template plug-in: implementing complex logic using render-functions
新的jQuery模板插件是 真棒。话虽如此， 双花括号模板标签是 不完全是我的一杯茶。在更多 复杂的模板标签模糊了 模板标记和实现 过去简单的if / else语句的逻辑 是一种痛苦。
搞乱插件后 几个小时，我的头开始受伤 从试图区分标记 在数百万的模板中 双花括号。
所以我弹了阿司匹林并开始工作 另类
答案 39 :(得分：0)
绑定到事件并立即执行事件处理程序：
$('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
这就像
function update() {
// update other portions of the UI
}
$('selector').change(update);
update();
但无需创建单独的命名函数。