jquery使用心得---杂+完美级联

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()


看下面的例子
:

页面上
<input
type="button" class="test"

value="addbutton"/>

我们对它进行这样处理

$(".test").bind("click",
function(){

$("body").append($("<input
type='button' class='test' value='button'/>"));

});

这句代码的意思是我们点击
addbutton
后，在其后面追加一个
button
。我们还希望追加的这个
button
拥有与
addbutton
一样的功能。

这句代码执行后，页面上已经追加了一个
button
但是并当我们点击这个
button
的时候并不是我们想要的结果。我们试着把
bind
换成
live
看看结果会怎样
?
结果是点击追加的这个
button
拥有同样的添加
button
功能。代码如下
:

$(".test").live("click",
function(){

$("body").append($("<input
type='button' class='test' value='button'/>"));

});

扩展：
live()
à

die() :
移除绑定在对象上的
live()
事件

bind()
à

unbind() :
移除绑定在对象上的
bind()
事件



3.one()


我们先看看
API
的解释
:

每一个匹配元素的特定事件（像
click
）绑定一个一次性的事件处理函数。很容易理解，就是让事件执行一次，但是具体会在什么样的场合使用呢
?
我目前只在数据联动的时候用到过
.

功能需求
:

实现部门与员工二级联动
,

要求在没有选择部门时，需要将所有员工显示出来，在选择部门时，显示部门下的员工
.

实现原理
:
部门改变时改变员工的下拉框项
.
以下代码实验环境为
ssh+json+jquery.

页面上
:

部门
:

<
select
name
=
"
department

"

id
=
"department"

>

<
option
value
=
""

>
--
请选择
--
</
option
>

<
s:iterator

value
=
"departmentList"
>

<
option
value
=
"<
s:property

value
=
"id"

/>
"><
s:property
value
=
"name"
/></
option
>

</
s:iterator
>

</
select
>

员工
:

<
select
name
=
"

staff

"
id
=
"staff"
>

<
option
value
=
""
>
--
请选择
--
</
option
>

<
s:iterator
value
=
"userList"
>

<
option
value
=
"<
s:property

value
=
"id"

/>
"
><
s:property
value
=
"name"
/></
option
>

</
s:iterator
>

</
select
>

这里部门没有选择时，会显示所有员工。其实添加的时候功能实现比较简单
.
我这里讲下大概思路
.

$("#

department

")

.change(function(){

//
获得部门的
id

var departmentId=$("#
department
").val();

//
提交
post
请求
(
把部门
id
作为参数提交
)

//
这里提交返回的是
json
类型
,

如
:{“user”:[{“id”:”1”,”name”:”
袁明勋
”},{“id”:”2”,”name”:”
测

试
”}]}

//
当
post
请求成功以后
,
我们先对部门清空
$("#
department
").empty();

//
然后追加
option

//$("#
department
").append("<option
value='"+id+"'>"+name+"</option>");
这里的
id
和
name
由
json
返回
.

});

如此一样我们的级联添加就已经完成了。我们的问题是在编辑的时候，在编辑的时候我们通过从
action get
数据对部门和员工进行回显
.

$("#
department
").val(get
部门标识
);

$("#
staff
").val(get
员工标识
);

我们点击编辑的时候数据确实回显了
,
如果你是个仔细的人你会发现
:
点击编辑时，部门此时已经选中，这是正确的，但是当我们点击员工时，问题出现了
:
该下拉选项是所有员工。造成的结果是若用户按这种方式编辑，有可能出现这个员工不属于这个部门的情况
.
我有想过通过脚本直接去触发部门的
change
事件，我也试着这么做，但是结果失败了，这样会照成其他的问题。为什么一定要直接去触发部门的
change
事件呢
?
我们是不是可以通过员工间接触发部门事件？对，就是员工间接来改变部门
.
如果你能想到点击员工去间接触发部门改变事件，说明你已经离成功不远了。

$("#
staff
").bind(“click”, function(){

// -------------

$("#
staff
").trigger(“change”);

});

笔者首先想到了这种方法，但是员工将永远不能选择
.
好了，该我们的
one
登场了
:

$("#
staff
").one(“click”,
function(){

// -------------

$("#
staff
").trigger(“change”);

});

这么做对我们添加也没有一点影响
,OK,
大功告成
!
执行过程如图
:

触发部门
change





员工
click

部门
change

部门
chang
改变员工



在项目中还使用的属性和方法包括
:remove(),offset(),clone()
等
,
使用的事件包括
:click,dbclick,
右击
,
拖拽等
,
这些使用起来都是非常方便的
,
足以证明
jquery
的强大。