jQuery 之事件处理
jQuery 可以很简单的为元素绑定事件。当事件被触发时,相关的函数就会被执行。函数内的 this
指向被触发事件的元素。
常用事件方法有 $.fn.click
, $.fn.focus
, $.fn.blur
, $.fn.change
等等,他们都是 $.fn.bind
方法的简写方式。bind
方法在为元素一次性绑定多个事件时非常方便:
jQuery 可以很简单的为元素绑定事件。当事件被触发时,相关的函数就会被执行。函数内的 this
指向被触发事件的元素。
常用事件方法有 $.fn.click
, $.fn.focus
, $.fn.blur
, $.fn.change
等等,他们都是 $.fn.bind
方法的简写方式。bind
方法在为元素一次性绑定多个事件时非常方便:
如果项目中除了 jQuery 库之外还有其它库,并且这个库中也有$
变量,那么这个$
就会和 jQuery 中的$
冲突。为了避免这样的冲突,需要再加载 jQuery 库之后,立即将 jQuery 设置为no-conflict
模式。
将 jQuery 设置为 no-conflict
模式后,可以给$
设置个别名:
调用 jQuery 对象的方法很简单:
$('h1').remove();
大多数 jQuery 方法都是像上面这样被调用的,这些方法都位于 $.fn
命名空间内,这些方法称为 jQuery 对象方法。
但是也有一些方法不需要依赖于选择器的结果集,这些方法位于 jQuery
命名空间内,这些方法称为 jQuery 核心方法。如果觉得不好理解,记住下面两条即可:
一旦选择器的结果集中有元素了,就可以这些元素为基准点遍历其它元素了。关于 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
方法,对结果集中的元素一个一个处理:
jQuery 对有些方法进行了“重载”,所有对某元素赋值或取值的时候所用的方法名是一样的,只是参数列表不同。当用 jQuery 方法对元素赋值的时候,它称为 setter,取值的时候称为 getter。setter 会对选择器中的所有所有元素赋值,getter 只取得选择器中第一个元素的值。
$('h1').html('hello world'); // setter var str = $('h1').html(); // getter
setter 返回的是 jQuery 对象,可以继续在这个对象上调用 jQuery 方法(链式操作),getter 仅放回我们想要的值,返回值不是 jQuery 对象,所以不能继续链式操作了。