jQuery事件

首先我们要知道，
JavaScript
开发基本可以分为以下四个部分：

1
、查找
DOM
元素进行取值和赋值的操作、在特定节点位置进行内容的取值和赋值操作
（
innerHTML
）。

2
、针对元素进行事件监听。

3
、通过操作
DOM
节点结合改变元素的
CSS
样式，达到绚丽的动画效果。

4
、对
DOM
元素进行
Ajax
操作。

对于
jQuery
来说，可以对这四部分提供完美的实现：

a
、
jQuery
拥有强大的选择器，可以查找任意的
DOM
元素。同时
jQuery
对象实现链式语法，
能够很方便简洁的写出强大的操作。比如操作属性：

$("#chkbox").attr("checked","checked").attr("disabled","disabled")
。可以这样继续链下去，包括增
加事件、样式等等操作。

b
、在页面加载时给
DOM
绑定事件。
$("#chkbox").click(function(){ alert("hello jquery!"); });
c
、
show()
和
hide()
是
jQuery
中最基本的动画。对元素显示和隐藏，当然，我们还可以实现其
它的更复杂的动画。

d
、
$.ajax(options)
是
jQuery
中最底层的
Ajax
实现。除此之外，还可以使用
$.get()
或
$.post()
实
现
Ajax
请求。

了解了以上内容后，
jQuery
带给我们的另一个惊喜，在于它的
API
支持当前多种主流浏览器，使得你
不用再为了
IE
、
FireFox
等兼容问题而抓头发伤脑筋。在以前做项目的时候，我总是喜欢将行为或样式
属性写在
DOM
中。这是极其不好也极其不规范的一种做法。如今采用
jQuery
后，我将所有的行为全部从
DOM
中抽取了出来，
放到
jQuery
初始化函数中进行绑定。
而且
jQuery
的初始化函数比
window.onload
的加载速度更快。

$(
function
(){
$("#chkbox").click(

function
(){
alert("hello jQuery!");
}
);
});
<input type="checkbox" id="chkbox"/>

上面是一种简写方法，不管是初始化函数还是绑定事件。推荐采用这种写法。

※下面这种写法是不可取的，行为一定要和
DOM
分离：

function
chkClick(){
alert("hello
jQuery");
}
<input type="checkbox" id="chkbox" onclick="chkClick()"/>

※不要再把样式写到
DOM
里面，这是很难维护的一件事情：

<span style="font-size:15pt;color:red">hello jQuery</span>

应该统一采用
CSS
文件定义或是定义
class
类，或是对
ID
进行定义：

.spanClass{
font-size:15pt;
color:red;
}
<span class="spanClass">hello jQuery</span>

#hello_span{
font-size:15pt;
color:red;
}
<span id="hello_span">hello jQuery</span>

在上一篇
jQuery
学习总结（一）
中，简单的介绍了
jQuery
提供对
JavaScript
开发的四个部分的支持，这篇
文章将详细的用代码示例来说明如何实现。

1
、
DOM

jQuery
提供强大的
DOM
查找功能，并且能够很方便的进行取值和赋值操作。查找元素最主要的是使用
选择器，可能还会需要筛选器的配合。从项目中来看，给
DOM
元素设置
id
及
name
，会比较容易实现需
求。我列一下使用得最多的几种选择器：
#id
、
.class
、
element
、
:eq
、
[attribute^=value]
、
[attribute$=value]
、
[attribute=value]
、
[attribute]
、
:checked
、
:selected
等等。另
外
jQuery
提供的属性也是强大利器：
attr
、
removeAttr
、
addClass
、
removeClass
、
html
、
val
等，在实际中，大量的被应用。在文档处理及
CSS
中
append
、
clone
、
empty
、
css
、
height
、
width
也是使用频率很高的。关于这部分的知识很复杂，精髓我可写不出来，我只能把我在项目中的体会、感悟、
想法记录下来，给需要的人一点帮助就很开心了。下面来看几个例子。

$("#ctr_id").val(id);
//
给合同
ID
赋值

$("#ctr_id").val();
//
取得合同
ID
值

$("#ctr_sum").attr("disabled","disabled");
//
将合同金额输入框设为不可用

$("[name=ctrRadio]:checked").attr("checked","");
//
取消已选中的单选框

$("select[name='contract_kind'] option:eq(0)").attr("selected","selected");
//
选中第一条记录

$("[name='btndel']").index(obj);
//obj
是一个按钮对象，
这表示该按钮位于相同名称按钮的第几个，
返回的索引值从
0
开始

$("ctr_advance").html("

更多信息
");
//
给
span
设置
HTML
内容，此属性类似
innerHTML