jquery使用总结
作者:袁明勋
最近项目中前端一直使用的是jquery框架，公司平台也由Ext 换成jquery。jquery确实是使用简单、容易上手、使用灵活的好框架，难怪它现在已经成为最流行的javascript框架之一。最近的一次项目中,因为大量的使用了jquery，让我对它有了一个深刻的了解，也让我不得不为之感叹!在项目中除了使用了一些常用属性和方法外,还使用了诸如:clone()， offset()，one，unbind等一些属性和方法,以下是一些我阅读相关文档结合开发中的一些总结：
1. 整体
我们在使用jquery的时候需要这么写$(document).ready (function(){});，我一开始也是这么做的，后来在阅读jquery相关自资料的时候，发现有更简便的方法$(function(){})。也就是说$，替代了$(document).ready。其实这个$，指的就是jquery()函数，是不是很简便？网友把jquery的四种使用方式叫做四大天王，这四个使用方法分别是: jQuery(expression,[context])、jQuery(html,[ownerDocument])、jQuery(elements)、jQuery(callback)。
1). jQuery(expression,[context])：指的就是jquery的选择器了。第一个参数表达式,第二个参数作用域.具体使用我这里就不详解了。我就说明几点：在使用选择器的时候尽量使用id标识选择，使用id标识的时候；最好把作用域给写上，并且范围尽量要小。这样做的目的是为了优化我们的程序，当作用域没有指明的时候，jquery默认会对整个DOM结构进行查找。
2).jQuery(html,[ownerDocument])：用于动态创建由 jQuery 对象包装的DOM元素,元素内容为html的内容，类似于javascript中的document.createElement()功能。
3).jQuery(elements)：将javascritp elements转换为jquery元素。如:$(document.getElementById(“test”))。那么我们如何将我们的jquery元素转换为javascript元素呢?方法有两个:$(“#test”)[0]和$(“#test”).get(0)。需要指明的是jquery元素只能调用jquery的方法,javascript只能调用javascript的方法。
4). jQuery(callback)：当DOM加载完成后，执行其中的callback函数.
.大部分情况下我们使用$就行了，它的意思是在dom 加载完图片刚开始加载时候执行，但在有些时候，我们需要等图片加载完再执行呢？这个时候就可以使用$(window).ready (function(){});，不过我现在还没使用过$(window).ready (function(){});这两个的区别也很容易理解。
2. live()和bind()
页面上
$(\ $(\type='button'
看下面的例子:
class='test'
value='button'/>\
});
这句代码的意思是我们点击addbutton后，在其后面追加一个button。我们还希望追加的这个button拥有与addbutton一样的功能。
这句代码执行后，页面上已经追加了一个button但是并当我们点击这个button的时候并不是我们想要的结果。我们试着把bind换成live看看结果会怎样?结果是点击追加的这个button拥有同样的添加button功能。代码如下: $(\ $(\type='button' class='test' value='button'/>\ });
扩展：live()?die() :移除绑定在对象上的live()事件 bind()?unbind() :移除绑定在对象上的bind()事件
3.one()
我们先看看API的解释: 每一个匹配元素的特定事件（像click）绑定一个一次性的
事件处理函数。很容易理解，就是让事件执行一次，但是具体会在什么样的场合使用呢?我目前只在数据联动的时候用到过.
功能需求:实现部门与员工二级联动,要求在没有选择部门时，需要将所有员工显示出来，在选择部门时，显示部门下的员工.
实现原理:部门改变时改变员工的下拉框项.以下代码实验环境为ssh+json+jquery. 页面上:
部门:
\> value=\/> 员工: \> value=\/> 这里部门没有选择时，会显示所有员工。其实添加的时候功能实现比较简单.我这里讲下大概思路. $(\department\ // 获得部门的id var departmentId=$(\department\ // 提交post请求(把部门id作为参数提交) // 这里提交返回的是json类型, 如:{“user”:[{“id”:”1”,”name”:”袁明勋”},{“id”:”2”,”name”:”测 试”}]} //当 post 请求成功以后,我们先对部门清空 $(\department\ // 然后追加option //$(\department\ value='\这里的id和name由json返回. }); 如此一样我们的级联添加就已经完成了。我们的问题是在编辑的时候，在编辑的时候我们通过从action get数据对部门和员工进行回显. $(\department\部门标识); $(\ staff \员工标识); 我们点击编辑的时候数据确实回显了,如果你是个仔细的人你会发现:点击编辑时，部门此时已经选中，这是正确的，但是当我们点击员工时，问题出现了:该下拉选项是所有员工。造成的结果是若用户按这种方式编辑，有可能出现这个员工不属于这个部门的情况.我有想过通过脚本直接去触发部门的change事件，我也试着这么做，但是结果失败了，这样会照成其他的问题。为什么一定要直接 去触发部门的change事件呢?我们是不是可以通过员工间接触发部门事件？对，就是员工间接来改变部门.如果你能想到点击员工去间接触发部门改变事件，说明你已经离成功不远了。 $(\ staff \“click”, function(){ // ------------- $(\ staff \“change”); }); 笔者首先想到了这种方法，但是员工将永远不能选择.好了，该我们的one登场了: $(\ staff \“click”, function(){ // ------------- $(\ staff \“change”); }); 这么做对我们添加也没有一点影响,OK,大功告成! 执行过程如图: 触发部门change 员工click 部门change 部门chang改变员工