jQuery在项目中的应用

版权声明：本文为博主原创文章，未经博主允许不得转载。（转载需注明出处 http://www.cnblogs.com/yanfei1819/p/7743661.html）

【摘要】

  最近在项目中应用到了jQuery，对于jQuery的强大的选择器，出色的DOM操作的封装，可靠的事件处理机制、完善的Ajax交互，优雅的链式操作方式等等方面的优点有了很大的体会，本文将就这些方面进行展开。

【关键词】

javaScript，jquery

【引言】

  jQuery是继Prototype之后又一个优秀的轻量级的JavaScript库，它拥有强大的选择器，出色的DOM操作的封装，可靠的事件处理机制、出色的浏览器兼容性，完善的Ajax交互，不污染顶级变量，优雅的链式操作方式等等，

这些优点吸引了一批批JavaScript开发者去学习和研究它。正文将就jQuery的这几个特点详细说明。

【正文】

1.强大的选择器，可以便捷的访问页面的任意部分

  jQuery最有特色的语法特点就是与CSS语法相似的选择器，它可以让操作者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。

CSS语法类似的选择器，如

• 元素选择器($(“body”))
• 分组选择器($(“div,span”))
• 类选择器($(“.classNameA”))
• ID选择器($(“#deviceId”))
• 属性选择器($("input[name^='news']"), $("input[name~=man]"))
• 后代选择器($("form input"))
• 子元素选择器($("ul.topnav > li"))
• 相邻兄弟选择器($("label + input"))
• 一般兄弟选择器($("label ~ input"))
• 伪类选择器($(“input: focus”))等。

表单元素选择器,常用的表单元素可以很方便的定位，比如：

• 按钮$(":button")
• 复选框$(':checkbox')
• 文件$(":file")
• 标题$(":header")
• 图像$(":image")
• 密码$(":password")
• 单选框$(":radio")
• 重置$(":reset")
• 提交$(":submit")
• 文本$(":text")等

索引选择器，

• 同类型元素多个存在时，可以用索引来定义元素位置。
  
  如找类ui-dialog-buttonpane下面的第一个按钮，
  
  $('.ui-dialog-buttonpane').find('button:eq(0)')

2.出色的DOM操作的封装

  jQuery封装了大量常用DOM操作，使你编写DOM操作相关程序的时候能够得心应手，优雅的完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。

2.1.节点操作

• 创建并追加节点,如在某元素之前插入一个表格

$("<table width='100%'><tr><td></td></tr></table>").insertBefore(div);

• 删除节点，如删除页面的第一排按钮

target.find(".page-title-button-area:eq(0)").remove();

• 复制节点,如将父窗口的元素复制一下添加到某元素内

$(“#id”).append($(window.parent.document).find(“#id”).clone());

• 替换节点,如将元素用户新的数据替换

$(“#id”).replaceWith($data.find(“#id”));

• 包裹节点,如在某元素外包一层div

sideBar.find(".sidebar-desc").wrap("<div class=sidebar-middle></div>");

2.2.属性操作

• 获取属性，如获取某按钮可用否

$("button").attr("disabled ");

• 设置属性,如将某按钮设为不可用状态

$("button").attr("disabled","disabled");

• 删除属性，如删除某按钮不可用状态

$("button").removeAttr("disabled");

2.3.样式操作

• 添加删除样式，如

$(".ui-dialog-titlebar").removeClass("fxWarnTitleDiv").addClass("ui-widget-header");

• 判断是否存在某样式

$(obj).hasClass("sidebar-title");

2.4.内容操作

• html() 获取或设置元素的html内容，如将返回的数据填入到某元素

$('#main-container').html($data);

• siblings() 获取元素前后紧邻的同辈节点，如检查元素是否存在同辈节点

if($('#main-container'). siblings ().length > 0){}

2.5.css-dom技术

例如

修改某个按钮的鼠标样式

$("button").css("cursor","default");

3.可靠的事件处理机制

  jQuery的事件处理机制吸取了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery处理事件绑定的时候相当的可靠。在预留退路方面，jQuery也做的非常不错.

3.1..trigger事件触发

  如有两个一样的下拉框，希望下拉框1点击的同时，下拉框2能够同步，那么就用trigger进行触发下拉框2的事件。

$(“#sel1”).bind('change',function(e){
    $(“#sel2”).val($(e.target).val());
    $(“#sel2”).trigger('change');
});

3.2.live事件绑定

  如有一个按钮，它点击时会生成另外一个同样的按钮，新生成的按钮需要添加事件，但是每生成一个按钮就多一个添加事件的动作，比较麻烦，此时用live比较省事。

$(“button”).live('click',function(e){
…
});

这样，只要是按钮，不管是已经生成的，还是没有生成的，它都会添加一个上面的事件。

3.3. toggle点击切换事件

有一个按钮，希望点击奇数次弹出1，点击偶数次弹出2，就用toggle：

target.toggle(function() {
    alert("1");
}, function() {
    alert("2");
});

4.完善的Ajax交互

  jQuery将所有的Ajax操作封装到一个函数$.ajax里，使得我们处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题.

使用Ajax实现局部刷新，如点击一个按钮，希望重新加载页面标题

$.ajax({
    type: 'POST',
    url: url,
    data: submitData,
    dataType: "html",
    success: function (data) {
        $(“.page-title”). replaceWith($(data).find(“.page-title”));
    }
});

还可用通过指定 beforeSend、error、success 或者 complete 等回调函数，向用户提供更多有关 Ajax 体验的反馈。

5.优雅的链式操作方式

  jQuery强大的链式操作，简单说就是允许将所有操作连接在一起，以链条的形式写出来，这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

$("has_children").click(function(){
    $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
});

jQuery还提供了.end()方法，使得结果集可以后退一步：

$('div').find('h3').eq(2).html('Hello')
.end() //退回到选中所有的h3元素的那一步
.eq(0).html('World');

6.易扩展性

  在用户可视化组件上，jquery提供了官方的插件：jqueryUI。同时jQuery的易扩展性，吸引了来自全球的开发者来共同编写jQuery的扩展插件。我们可以自己开发一些易用，高效率的组件来扩展jquery的适用范围。

6.1、自己开发一个插件

例如

// 定义插件
(function($){
    $.fn.hoverClass = function(c) {
         return this.hover(
           function() { $(this).toggleClass(c); }
         );
    };
})(jQuery);
// 使用插件
$(‘li’).hoverClass(‘hover’);

6.2、jQuery的插件其实就是$.fn上增加的函数, 那这个fn是什么呢?

看这段源码

jQuery.fn = jQuery.prototype = {
        constructor: jQuery,
        init: function( selector, context, rootjQuery ) {…}
}

显然, $.fn其实就是jQuery.prototype的简写.

6.3、对于比较复杂的插件开发

jQuery UI提供了一个widget工厂机制

$.widget(“ui.dialog”, {
options: {
        autoOpen: true,…
       },
    _create: function(){ … },
    _init: function() {
       if ( this.options.autoOpen ) {
            this.open();
       }
    },
    _setOption: function(key, value){ … }
    destroy: function(){ … }
});

我们可以利用其使得插件的开发更加便捷。

【总结】

  以上几点是在项目中使用Jquery的体会，它不只是让我们在Web开发中基于JavaScript库的应用程序可以获得更好的浏览器兼容性和开发效率，同时可以提高更多的功能和效果，增强应用程序的功能和性能，

改善用户体验，改变了编写程序的设计方式和思路，并且它的设计思想我们可以借鉴到其他的软件开发中去。

【参考文献】

1、浅谈JavaScript库——jQuery_ExtJs的对比研究.pdf

2、http://www.zzbaike.com/wiki/JavaScript库