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 的强大。