Jquery 技术小结

前记:

现在项目中经常要用到JS去操作一些事,对整个团队开发来说,JS的书写规范和正确对开发具有较大的帮助。在一个团队中常常会发生JS书写的不统一性和游览器不兼容性等情况发生。我觉的最好的方法就是有一个统一的书写规范和一个具有良好的兼容性和扩展性的JS库作为我们开发的基层,以提高我们团队的开发速度和各项性能。

对于我本人来说,从一开始的直接写Javascript方法到使用ExtJS 还有 Jquery类库,感触到以下几点:

1、  必须要有良好的JS基础,多多写基础的Javascript方法;

2、  具备良好的JS基础后,可以尝试使用Jquery、ExtJS等大师们写的类库,因为他们都是以JS为基础写的,而且都经历了兼容性、稳定性、规范性等等的测试,而且具有良好的集成和扩展性,为我们提供了一个可以规范使用,并且让我们省时省力;

3、  有了新的挑战不要怕,先分析难点,然后利用JS方法一步步解决;

我首先推荐Jquery类库,它让我们开发变的轻松容易。

优点:(网上找的)

1、              我们可以实现灵活性非常强的清晰页面代码。jQuery让JavaScript代码从HTML页面代码中分离出来,就像数年前CSS让样式代码与页面代码分离开一样。

2、              最少的代码做最多的事情,这是jQuery的口号,而且名副其实。使用它的高级selector,开发者只需编写几行代码就能实现令人惊奇的效果。开发者无需过于担忧浏览器差异,它除了还完全支持Ajax,而且拥有许多提高开发者编程效率的其它抽象概念。jQuery把JavaScript带到了一个更高的层次。

3、              在大型JavaScript框架中,jQuery对性能的理解最好。尽管不同版本拥有众多新功能,其最精简版本只有18KB大小,这个数字已经很难再减少。jQuery的每一个版本都有重大性能提高。如果将其与新一代具有更快JavaScript引擎的浏览器(如火狐3和谷歌Chrome)配合使用,开发者在创建富体验Web应用时将拥有全新速度优势。

4、              JS”””” 标准”,之所以使用引号,是以为jQuery并非一个官方标准。但是业内对jQuery的支持已经非常广泛。谷歌不但自己使用它,还提供给用户使用。另外戴尔、新闻聚合网站Digg、WordPress、Mozilla和许多其它厂商也在使用它。微软甚至将它整合到Visual Studio中。如此多的重量级厂商支持该框架,用户大可以对其未来放心,大胆的对其投入时间。

5、              基于jQuery开发的插件目前已经有大约数千个。开发者可使用插件来进行表单确认、图表种类、字段提示、动画、进度条等任务。jQuery社区已经成长为一个生态系统。这一点进一步证明了上一条理由,它是一个安全的选择。而且,jQuery正在主动与“竞争对手”合作,例如Prototype。它们似乎在推进JavaScript的整体发展,而不仅仅是在图谋一己之私。

6、              要想真正学习jQuery,开发者还是需要投入一点时间,尤其是如果你要编写大量代码或自主插件的话,更是如此。但是,开发者可以采取“各个击破”的方式,而且jQuery提供了大量示例代码,入门是一件非常容易的事情。我建议开发者在自己编写某类代码前,首先看一下是否有类似插件,然后看一下实际的插件代码,了解一下其工作原理。简而言之,学习jQuery不需要开发者投入太多,就能够迅速开始开发工作,然后逐渐提高技巧

7、              我发现使用jQuery是一件充满乐趣的事情。它简洁而强大,开发者能够迅速得到自己想要的结果。它解决了许多JavaScript问题和难题。我过去曾讨厌JavaScript编程,但现在却非常喜欢它。通过一些基础性的改进,开发者可以真正去思考开发下一代Web应用,不再因为语言或工具的差劲而烦恼。我相信它的“最少的代码做最多的事情”口号

为了节约开发和查找使用Jquery方法时间,以下将经常用到的一些Jquery 方法和注意点记录,以备大家查询和自己的查询。

一、查找对象()

JS:document.getElementById(“divID”)

JQ:$(“#divID”)

JS: document.getElementsByTagName(“input”)

JQ:$(“input”)

JS:暂无取className

JQ: $(“.className”)

当取得对象后,可以操作他们的属性;当存在多个对象时可以利用.eq(i)的方法取得各个对象。取各项值为:.text() 取innerText值 .html() 取innerHTML内容 .val()取值

二、判断对象是否为空

JS:if(document.getElementById(‘ID’)==null)

Jq: if($(“#ID”). length==0)

三、Jquery Ajax 使用方法

JQuery提供了一系列的全局方法对XMLHttpRequest对象进行了封装,在进行Ajax开发过程中再也不用担心浏览器客户端的不致性问题了。

一、$.ajax(options)
它是最根本的JQuery Ajax方法,它只有一个参数options,该options参数中包含了请求信息和回调函数的信息。参数内容都是key:value对形式出现,并且都是可选的。
语法:
$.ajax({options});
url:(string)发送请求的地址,可以是服务器页面也可以是WebService动作。
type:(string)请求方式,POST或GET
data:(object)向服务器发送请求时带去的数据。是key:value对形式,如:{name:"grayworm",sex:"male"},如果是数组{works:["work1","work2"]}
dataType:(string)预期返回的数据类型。xml,html,json,text等
beforeSend:(Function)发送ajax请求前被触发,如果返回false则取消本次请求。如果异步请求需要显示gif动画,那应当在这里设置相应<img>的可见。
function(XMLHttpRequest){ }

complete:(Function)请求调用完成后的回调函数(请求成功或失败时均调用),如果异步请求显示gif动画,那应当在这里设置相应的<img>不可见。
function(XMLHttpRequest,textStatus){ 
   //textStatus是描述返回状态的字符串
}

success:(Function)请求执行成功时的回调函数
function(data,textStatus){ 
   //data是服务端返回的数据可以是xml、json、text等格式
   //textStatus是描述返回状态的字符串
}

error:(Function)请求执行失败时的回调函数 
function(XMLHttpRequest,textStatus,errorThrown){ 
   //data是服务端返回的数据可以是xml、json、text等格式
   //textStatus,errorThrown是描述返回状态的信息
}

四、Jquery 设置对象属性

Jq:$(“#ID”).attr(“html”,”<b>我要加粗</b>”) 用attr 这个属性来处理。

$(“#ID”).show(); $(“#ID”).hide()  对应 style=”display:none/block”;

五、  window.onload=function (){}çè$(function(){….}) onload 执行

六、事件处理,onclick hover 等事件,比较实用

click(fn)    dblclick(fn)    mousedown(fn)   mousemove(fn)
mouseout(fn)  mouseover(fn)     mouseup(fn)  hover(fn) 

七、以后有新的知识点,慢慢上传完善

 

PS:希望我们JS开发规范化,以后的JS代码统一放到JS文件中,然后作JS混淆处理,这一点我也经常偷懒,否则的话会出现安全漏洞,【暴露参数,暴露url地址】。

时间: 2024-08-11 03:37:23

Jquery 技术小结的相关文章

前端html、Javascript、CSS技术小结

简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页,只需要找找内部是否有html5的标志性标签就行了.然而平时虽然写了不少html,却没怎么关注它的发展史: GML(Generalized Marcup Language)通用标记语言 和SGML(Standard Generalized Markup Language)标准通用标记语言. 由Tim

JQuery技术详解

前面我们讲解了的J2EE的技术都是服务端的技术,下面我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简介: jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team.jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情.它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器

SVG图片技术小结

今天在公司没事,研究了一下最近流行的SVG技术,发现,随着css3的不断流行,和浏览器技术的发展,SVG将会取代网站大量图片,成为网站图片展现的主流. AI是我们常用的矢量图编辑器,现在AI可以直接另存SVG图片,SVG图片相比传统图片,占位更小,浏览更方便!而且可扩展性更强! 下面看一个SVG的例子: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//

jQuery技术内幕预览版.pdf2

第二章 构造jQuery对象 jQuery对象是一个类数组对象,含有连续的整型属性.length属性和大量的jQuery方法,$()是jQuery()的缩写 构造函数jQuery() 如果调用构造函数jQuery()时传入的参数不同,创建的jQuery对象的逻辑也会随之不同 jQuery(selector[,context]): 如果传入一个字符串参数,jQuery会检查这个字符串是选择器表达式还是HTML代码.如果是选择器表达式,则遍历文档,查找与之匹配的DOM元素,并创建一个包含了这些DOM

ATM技术小结

ATM技术小结 ATM是一种高速.低延迟的多路复用和交换技术,它可支持任何类型的用户业务,比如语音.数据和视频.ATM采用小的.固定长度的单元(称作信元),每个信元由包含于信元头部的虚电路标识符来识别,ATM网络使用这些标识符经由高速交换机对业务进行中继处理.ATM提供有限的差错检测操作,它不提供重发服务,只在小的信元头部进行很少的操作,这样做的目的是使网络具有足够快的速度以支持多兆位传输速率.在ATM层之上还有一层,称作ATM适配层,这一层对各种业务类型进行大量的会聚.分段和重装操作. ATM

jQuery技术内幕预览版.pdf3

jQuery.fn.init(selector,context,rootjQuery):构造函数 jQuery.fn.init() 负责解析参数 selector 和 context 的类型,并执行相应的逻辑,最 后返回 jQuery.fn.init() 的实例,共有12个有效分支 源码分析 定义jQuery.fn.init(selector,context,rootjQuery) init:function(selector,context,rootjQuery){ var match,ele

J2EE学习篇之--JQuery技术详解

前面我们讲解了的J2EE的技术都是服务端的技术,下面我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简介: jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情. 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏

(转)Jquery Mobile 小结

Jquery Mobile 小结 2015-05-15 06:31 by stoneniqiu, 2771 阅读, 26 评论, 收藏, 编辑 第一次做一个移动站点,当时纠结选Jquery Mobile还是Zepto,Zepto相对于JM更加轻巧,语法上面也很相似,但考虑到时间问题和JM自带了很多组件(Bootstrap惯出来的),还是选择了JM.JM主要通过data-role来定义页面控件,比如定义一个page,<div data-role="page"></div

JavaScript框架设计 pdf jQuery技术内幕 pdf

jQuery技术内幕  深入解析jQuery架构设计与实现原理 PDF电子书带目录  高清版 JavaScript框架设计  现代魔法指南 PDF电子书带目录 高清版 网络上的都是预览版,这是自制的,如有需要请联系qq:1067728292 10元一本,已然是最低价不讲价.