标签：可靠 对象模型 华丽 完成后 文件的 获取元素 事件处理 on() show
一、jQuery的发展 随着javascript的不断发展，延伸出了多种JS程序库，当前比较流行的js库有：1）Prototype 成型较早，从整体上对面向对象的编程思想把握的不是很到位。 2）Dojo 学习曲线陡，文档不齐全，最严重的的是APE不稳定，每次升级都可能导致已有程序失效。 3）YUI Yahoo公司出品，比较完善，编写规范。 4）Ext JS 原本是对YUI的扩展，主要用于构建前端用户界面，后期发展可以用来开发富有华丽外观的富客户端应用，商业用途并不免费。 5） MooTools 轻量，简洁，模块化和面向对象的JS库，非常不错。6）jQuery 同样是轻量级的库，拥有强大的选择器，出色的DOM操作，可靠的事件处理，完善的兼容性及链式操作等功能，也是我们即将学习的重点。
二、jQuery 的优势：写的少，做的多。jQuery独特的选择器，链式操作，事件处理机制和封装完善的Ajax都是其他JS库望尘莫及的。
1）轻量级 目前使用UglifyJS进行压缩后只有30KB左右。2）强大的选择器 允许使用CSS1-3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。 3）出色的DOM操作的封装。 4）可靠的事件处理机制 5）完善的Ajax jQuery将所有的Ajax操作封装到一个函数$.ajax()里面，无需关心复杂的浏览器兼容性和对象的创建与使用。 6）不污染顶级变量 7） 出色的浏览器兼容性。 8）链式操作方式 9）隐式迭代 10）行为层和结构层的分离 11）丰富的插件支持。12）完善的文档 13）开源
三、jQuery代码的编写。
1）进入官方网站获取最新的jQuery版本。 http://jquery.com ,右键保存链接得到jquery库。 jquery 库分为两种：生产版 jquery.min.js和开发版jquery.js.
2）环境配置 jQuery不需要安装，使用的时候直接在html文档中引入该库文件的位置即可。eg： <script src="../scripts/jquery.js" type="text/javascript"></script>
3）编写第一个jquery 代码 $ 就是jQuery 的简写 。 $(document).ready(functiong(){ }) 这段代码类似于传统的JS的 window.onload=function(){ }, 区别：1》window必须在全部加载之后才可以执行， $(document) 则是网页中所有的DOM结构绘制完成后就可以执行。2》window.onload=funciton(){} 不能同时编写多个，只能输出最后一个，$(function).ready(funcitong(){ })能够同时编写多个。输出结果是多次输出。3》 window.onload=funciton(){}没有简写的形式，$(document).ready(function(){ })则可以简写成 $(funciton(){ })
4)链式操作风格
eg $(" .level1>a").click(function(){
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;
})
翻译： 当鼠标单击到level下面的a元素时，给其添加current的class，然后将其紧邻后面的元素显示出来，同时将他的父辈的同辈元素内部的子元素a都去掉一个current的class，然后将紧邻它们后面的元素都隐藏。 即一键完成了导航栏的功能。
代码风格推荐 ：
$(".level1>a").click(function(){
$(this).addClass("current") //给当前元素增加current样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素a移除 current样式
.next().hide(); //它们的下一个元素隐藏
return false;
})
四、jQurey对象和DOM对象
1）DOM对象即文本对象模型 document object model 构建网页的DOM树，子节点都DOM元素节点。可以通过js中的getElementsByTagName 和getElementById 来获取元素节点，这样得到的DOM元素就是DOM对象。
2）jQuery 对象 就是通过jQuery包装DOM对象后产生的对象。是独有的，一个对象如果是jQuery对象，那么就可以使用jQuery的方法。
eg： $("#fool").html() 等同于 document.getElementById("fool").innerHTML . 在jQuery对象里面无法使用DOM对象的任何方法。同样DOM对象也不可以使用jQuery的方法。
3）DOM对象和jQuery对象的相互转换。
在相互转化之前需要预定好定义变量的风格，如果获取的对象是jquery对象，则在变量前面加$ var $varible=jQuery 对象 var varible=DOM对象。
1》jQuery对象转换成DOM对象。 利用 [index] 或者 get（index） eg：var $cr= $("#cr") var cr=$cr[0] 或者 var cr=$cr.get(0)
2》DOM对象转化成jQuery 对象，先将DOM对象进行包装，然后获取jQuery对象 eg: var cr=document.getElementById（“cr”） var $cr= $(cr) 即 $(DOM对象)
五、 解决jQuery和其他库的冲突的办法
1）jQuery的库在其他库后面进行导入，且可以在任何时候使用 jQuery.noConflict() 函数来将变量$ 的控制权移交给其他的js库。
2）在其他库之后进行导入，可以直接使用 “jQuery” 做jQuery的工作，其他库的快捷方式则为$() ，无需调用jQuery.noConflict()函数。
标签：可靠 对象模型 华丽 完成后 文件的 获取元素 事件处理 on() show
原文地址：https://www.cnblogs.com/hanggedege/p/11614689.html
