在元素创建时定义属性

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

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

．.． 你甚至可以添加样式:

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

这里有一个文档链接。

在核心jQuery函数中，除了指定选择器参数外，还指定上下文参数。指定context参数允许jQuery从DOM中更深的分支开始，而不是从DOM根开始。给定一个足够大的DOM，指定上下文参数应该转化为性能提升。

示例:查找文档中第一个表单中radio类型的所有输入。

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

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

换行和可链性

当在集合上链接多个调用时…

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

你可以用换行符增加可读性。是这样的:

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

(这是一个无耻的插头)

与其写重复的表单处理代码，你可以试试我写的这个插件，它通过添加表单相关的方法添加到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();

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

$('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();

但是不需要创建单独的命名函数。

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

将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，等等。

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