jQuery在项目中的应用

摘要：最近在项目中应用到了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%E5%BA%93

jQuery在项目中的应用

【摘要】

最近在项目中应用到了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%E5%BA%93