jQuery 之事件处理

jQuery 可以很简单的为元素绑定事件。当事件被触发时,相关的函数就会被执行。函数内的 this 指向被触发事件的元素。

常用事件方法有 $.fn.click$.fn.focus$.fn.blur$.fn.change 等等,他们都是 $.fn.bind 方法的简写方式。bind 方法在为元素一次性绑定多个事件时非常方便:

Posted on 2012-03-06

jQuery 中 $ 避免跟其它库冲突

如果项目中除了 jQuery 库之外还有其它库,并且这个库中也有$变量,那么这个$就会和 jQuery 中的$冲突。为了避免这样的冲突,需要再加载 jQuery 库之后,立即将 jQuery 设置为no-conflict模式。

将 jQuery 设置为 no-conflict 模式后,可以给$设置个别名:

Posted on 2012-03-06

jQuery 核心方法

调用 jQuery 对象的方法很简单:

$('h1').remove();

大多数 jQuery 方法都是像上面这样被调用的,这些方法都位于 $.fn 命名空间内,这些方法称为 jQuery 对象方法。

但是也有一些方法不需要依赖于选择器的结果集,这些方法位于 jQuery 命名空间内,这些方法称为 jQuery 核心方法。如果觉得不好理解,记住下面两条即可:

Posted on 2012-03-06

jQuery 基础 3

一旦选择器的结果集中有元素了,就可以这些元素为基准点遍历其它元素了。关于 jQuery 遍历元素的方法,详见 http://api.jquery.com/category/traversing/,如:

$('h1').next('p');
$('div:visible').parent();
$('input[name=first_name]').closest('form');
$('#myList').children();
$('li.selected').siblings();

还可以用 $.fn.each 方法,对结果集中的元素一个一个处理:

Posted on 2012-03-06

jQuery 基础 2

jQuery 对有些方法进行了“重载”,所有对某元素赋值或取值的时候所用的方法名是一样的,只是参数列表不同。当用 jQuery 方法对元素赋值的时候,它称为 setter,取值的时候称为 getter。setter 会对选择器中的所有所有元素赋值,getter 只取得选择器中第一个元素的值。

$('h1').html('hello world'); // setter
var str = $('h1').html();   // getter

setter 返回的是 jQuery 对象,可以继续在这个对象上调用 jQuery 方法(链式操作),getter 仅放回我们想要的值,返回值不是 jQuery 对象,所以不能继续链式操作了。

Posted on 2012-03-06