HTML5数据属性支持，在类固醇!

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

最近，jQuery团队增加了对HTML5自定义data-*属性的支持。似乎这还不够;他们用类固醇强制输入数据函数，这意味着你可以直接在标记中以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!

不是真的jQuery，但我为jQuery和MS AJAX做了一个漂亮的小桥梁:

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

如果你做了很多ASP，这真的很好。由于MS支持jQuery，现在有一个很好的桥接意味着它很容易做jQuery操作:

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

所以上面的例子不是很好，但是如果你正在编写ASP。NET AJAX服务器控件，使得在客户端控件实现中使用jQuery变得很容易。

(这是一个无耻的插头)

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

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

像这样:

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

    // Other code
});

优化复杂选择器的性能

当使用复杂的选择器时，查询DOM的一个子集可以极大地提高性能:

var subset = $("");

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

从更基本、更高级的角度来看，您可以尝试通过编写自己的小框架来模拟jQuery的基本选择器机制(实际操作比听起来简单)。它不仅会不断地改进你的Javascript，还会帮助你理解为什么jQuery的$("#elementId")比$(". elementclass ")快很多倍，也比$("element#elementId")快很多倍(这可能在表面上与直觉相反)。

这也将迫使你学习面向对象的Javascript，这将帮助你以一种更模块化的方式组织你的代码，从而避免沉重的jQuery脚本块所带来的意大利面条式的代码性质。