版权声明:本文为博主原创文章,未经博主允许不得转载。(转载需注明出处 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库

jQuery在项目中的应用的更多相关文章

  1. Jquery在项目中的总结

    1.构造对象 var _getSearchArg = function () { var argModel = {}; argModel.Txt = value; argModel.Code = va ...

  2. 转 mvc项目中,解决引用jquery文件后智能提示失效的办法

    mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法   这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...

  3. 关于Eclipse项目中加入jquery.js文件报错(missing semicolon)问题

    在使用Eclipse3.7及以后的版本的时候,加入jQuery文件会报错(missing semicolon),文件中会显示红色小X,虽然这个错误并不会影响项目的运行,但是这个却会大大的影响到开发人员 ...

  4. 九、VueJs 填坑日记之在项目中使用jQuery

    很多人学习 js 都是从 jQuery 开始的,我也不例外.有时候进行一些操作的时候,还是感觉 jQuery 比较好用,那么,我们如何在项目中使用 jQuery 呢?这篇博文带你实践. 引用 jQue ...

  5. 记录下项目中常用到的JavaScript/JQuery代码二(大量实例)

    记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="widt ...

  6. 擦他丫的,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了!

    擦 ,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了! 问题在于我使用的谷歌浏览器,默认使用了缓存,导致每次访问同一个url时,都返回的是缓存里面的东西.通过谷歌 ...

  7. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  8. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  9. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

随机推荐

  1. informix服务端口和oralce服务端口

    查找informix的服务端口1>>more .profile 找到: INFORMIXDIR=/home/informix INFORMIXSERVER=aaaa2>>cd ...

  2. [07] ServletContext上下文对象

    1.上下文的概念 我们在说到Servlet的继承关系时,提到自定义Servlet实际上间接实现了Servlet和ServletConfig两个接口,其中ServletConfig接口中定义了一个方法叫 ...

  3. Java内存分配之堆、栈和常量池

    Java内存分配主要包括以下几个区域: 1. 寄存器:我们在程序中无法控制 2. 栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中 3. 堆:存放用new产生的数据 4. 静 ...

  4. Spring Security研究(2)-高级web特性

    1, 添加 HTTP/HTTPS 信道安全 <http> <intercept-url pattern="/secure/**" access="ROL ...

  5. 【漏洞公告】CVE-2017-12615/CVE-2017-12616:Tomcat信息泄漏和远程代码执行漏洞

    2017年9月19日,Apache Tomcat官方确认并修复了两个高危漏洞,漏洞CVE编号:CVE-2017-12615和CVE-2017-12616,该漏洞受影响版本为7.0-7.80之间,在一定 ...

  6. 树莓派3 B+ 的摄像头简单使用(video-streamer)

    一.首先在某东上购买树莓派摄像头 我的买的硬件张这个样子的(CSI接口摄像头): 正视图                                                         ...

  7. Java代理和动态代理

    code from <Thinking in java> 代理模式 interface Interface { void doSomething(); void somethingElse ...

  8. org.springframework.core.io包内的源码分析

    前些日子看<深入理解javaweb开发>时,看到第一章java的io流,发觉自己对io流真的不是很熟悉.然后看了下JDK1.7中io包的一点点代码,又看了org.springframewo ...

  9. 使用jquery的方法和技巧2,点击多选框的jquery响应

    使用jquery来控制多选框的变化 功能描述: 1.第一层 当选中后台应用(App1)时,所有多选框都被选择. 当取消选中后台应用(App1)时,所有多选框都被取消选择. 第一层的逻辑如下: 2.第二 ...

  10. thinkphp的select和find的区别

    hinkphp是比较好的php开发框架,能比较快速的开发MVC架构的管理系统,我们需要用到 select()和find()方法,两个方法都能返回数据集数组,但有什么不同呢?先看一下我的代码对比:$te ...