jQuery随笔

这两天在看jQuery，就记下一些自己曾经苦苦寻找的东西。

首先就是为动态添加的元素绑定事件。比如在一个页面中，有一个空的div，由于某种原因，我们使用js为该div添加了内容，我们需要为刚添加的内容里某个元素添加事件，比如一个按钮，$('#sub').click(function(){//事件})或者$('#sub').bind('click', function(){//事件})，这样是不行的，这种写法只能为已经加载的元素绑定事件，动态添加的是无法绑定的。

不过jQuery已经为我们想好了，.live可以为任何时候添加的元素绑定事件。

.live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：

1. 生成一个click事件传递给来处理

2. 由于没有事件处理函数直接绑定在

3. 事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。

4. 执行由 .live() 绑定的特殊的 click 事件处理函数。

5. 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。

6. 如果找到了匹配的元素，那么调用原始的事件处理函数。

由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件。

我们只需要

COPYJAVASCRIPT
$('#sub').live('click', function(){
    //事件
});

这样就可以了，后来添加的按钮也能绑定事件。

再一个就是DOM对象和jQuery对象之间的转换。

如果我们不使用jQuery，我们会这样获取元素：

COPYJAVASCRIPT
var divid = document.getElementById('id');
var divname = document.getElementByTagName('name');

用jQuery：var divid = $('#id');

DOM对象转换为jQuery对象：var jQid = $(DOMid);

jQUery对象转换为DOM对象：var DOMid = $('#jQid')[0];