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地址】。