1、jQuery简介：
| ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装 ● 它的设计思想是write less,do more（以更少的代码，实现更多的功能）； | |
| ●jQuery是javaScript的程序库之一，它是javaScript对象和实用函数的封装。 ●jQuery是继Prototype之后又一个优秀的javaScript库，是由美国人 Johh Resig于2006年创建的开源项目。
| |
| ●为什么要使用jQuery：与javaScript相比，使用jQuery制作交互特效的语法更为简单，代码量大大减少，不存在浏览器兼容性的问题。 | |
| ●jQuery与其他javascript库： 按照使用占比，几大javaScript库占比如下：
| 比例图：
|
2、 jQuery的用途：
| 1）访问和操作DOM元素：使用jQuery可以很方便的获取和修改页面中的制定元素，无论是删除、移动还是复制元素，jQuery都提供了一套方便快捷的方法。 2）控制页面样式：通过引入jQuery，开发人员可以很快捷的控制页面的CSS文件。 3）对页面事件的处理：引入jQuery后，可以使页面的表现层与功能开发分离，开发者更多的关注于程序的逻辑与功效；页面设计者则侧重于页面的优化与用户的体验。通过事件绑定机制，可以很轻松的实现两者的结合。（比如鼠标的点击事件） 4）方便使用jQuery插件：引入jQuery后，可以使用大量的jQuery插件来完善页面的功能和效果，如jQuery UI插件库，Form插件，Validate插件等。使得原来使用javaScript代码实现起来非常困难的功能通过jQuery插件可以轻松的实现。 Eg：3D幻灯片就是由jQuery的Slicebox插件来实现的。 5）与Ajax技术的完美结合：利用Ajax异步读取服务器数据的方法，极大的方便了程序的开发，增强了页面的交互，提升了用户的体验，引入jQuery后，通过内部对象或函数，加上几行代码就可以实现复杂的功能。 6）处理了与浏览器兼容性的问题：在jQuery库里帮我们写了兼容性的代码。 |
| ●jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率； |
3、 jQuery的优势
| 1）轻量级。jQuery的体积小，压缩之后，约等于100KB。 2）强大的选择器。jQuery支持几乎所有的CSS选择器，以及jQuery有自定义特有的选择器。 3）出色的DOM封装。jQuery封装了大量的DOM操作，使的开发者在编写DOM操作相关程序时更加得心用手。 4）可靠的事件处理机制。jQuery的事件处理机制吸收了javaScript中事件处理函数的精华，非常的可靠。 5）出色的浏览器兼容性。 6）隐式迭代。使用jQuery查找相同名称（类名、表签名等）时，会返回一个结果集合，无需用户一一遍历，并且有快捷的查找所匹配的值的方法，简化了编程。 7）丰富的插件支持。jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件，目前已有成百上千的官方支持的插件。 |
4、jQuery的版本及配置
| ●获取jQuery的最新版本：进入jQuery的官方网站（http://jquery.com）,在页面右侧的 Download jQuery区域下载最新的版本。 ★jQuery类库说明：jQuery类库一个插件分为两个版本：开发版（完整无压缩）和发布版（GZIP压缩过的版本）。 版本号为1.开头的jQuery插件才能支持IE6~IE8的兼容性。 推荐的版本是：jquery-1.8.3.min.js和jquery-1.12.4.js
| |||||||||
| ●jQuery的引用方式： 1. 页面引用（引用本地）：<script src="js/jquery-1.12.4.js" type="text/javascript"></script> 2. 引用网络存储的，引用地址实用网络存储的绝对地址。 ★注：1. 要使用jQuery的功能，需要首先引用jQuery库文件，首先引入jQuery插件文件，再引用自己的.js文件。否则可能无法识别或编译。 ★注：在一个页面中使用了多个库文件，变量冲突： 1、使用jQuery.noConflict()方法解决对变量$的jQuery的控制权，即释放jQuery对$变量的控制权。 2.如果页面仅使用jQuery的一个库文件，则不需要noConflict()方法； |
5、jQuery语法
| ●jQuery的加载： $(document).ready(function() { //执行的代码； })；
这种语法等同于javaScript代码：
Window.onload=function(){ //执行代码； }； |
| |||||||||||||||
| ●2.jQuery的语法结构： jQuery语句主要包含三大部分：$()、document和ready();它们在jQuery中分别称为：工厂函数、选择器和方法。 语法：$(selector).action(); ★工厂函数$()：在jQuery中，美元符号“$”等价于jQuery,即S()=jQuery()。 $()的作用是将DOM对象转换为jQuery对象，只有将DOM对象转换为jQuery对象后，才能使用jQuery的方法。 注：当$()的参数是DOM对象时，该对象无须使用双引号包裹起来，如果获得的是document对象，则写作$(document)； ★选择器selector： 语法：$(selector); ★方法action()：jQuery中提供了一系列的方法。在这些方法中，一类重要的方法就是事件处理方法， Eg：如许多基础的事件：鼠标事件、键盘事件和表单事件等，都可以通过事件方法进行绑定。 | ||||||||||||||||
| ●CSS样式操作的方法： 1）为元素添加新的样式 语法：jQuery 对象.addClass([样式名])； 注：样式名不用带“.”类符号，区别于选择器 2）设置新的CSS样式属性 语法：jQuery 对象.css (“属性”,”属性值”)； //设置一个css样式 jQuery 对象.css (｛“属性1”：”属性1值”，”属性N ”:”属性N的值”｝)； //设置多个css样式 3）显示/隐藏元素 语法：$(selector).show(); //显示元素 $(selector).hide (); //隐藏元素 | ||||||||||||||||
| ●CSS与addClass的区别： ★css()方法为所匹配的元素设置给定的样式； ★addClass（）方法向所匹配的元素添加一个或多个类，该方法不会删除已存在的类，尽在原有的基础上追加新的类样式； ★基于结构与样式分离的原则，通常在实际应用中，为某元素添加样式，使用addClass（）方法比css()方法的频率高很多，因此建议使用addClass()添加样式； | ||||||||||||||||
6、jQuery代码风格：
| ●“$”的使用：在jQuery程序中，使用最多的是“$”，无论是页面元素的选择器，还是功能函数的前缀，都 必须使用该符号。它“$”等同于jQuery。 Eg：$(document).ready()=jQuery(document).ready() $(function(){...})=jQuery (function(){...}) | |||||||||
| ●链式操作：对一个对象进行多重操作，只调用一个对象，并将操作结果返回给该对象 注：使用next()方法可以获得当前元素的下一个同胞元素。 | |||||||||
| Eg1： 鼠标移入和移除事件代码结构： $(“h1”).mouseover(function(){ //代码1； }).mouseout(function(){ //代码2； })； | Eg2：将标题颜色变成浅蓝色，并且单击标题显示下方的元素； $("h2").css("background-color","#ccffff").next().css("display","block"); | ||||||||
| ●1隐式迭代：在jQuery中获取一个集合后，会默认遍历内部的所有元素。 Eg：下面的代码会将所有的li变成红色： $(document).ready(function() { $("li").css({"font-weight":"bold","color":"red"}); }); | |||||||||
| ●添加注释
| |||||||||
7、jQuery对象和DOM对象：
| ●DOM模型：浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构； |
| ●DOM对象：直接使用javaScript获取的节点对象就是DOM对象。 在javaScript中，使用getElementsByTagName()或getElementById()来获取元素的节点，通过该方式得到的DOM元素都是DOM对象。 Eg：var objDOM=document.getElementById("title"); var objHTML=objDOM.innerHTML; |
| ●jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法； Eg： $("#title").html( ); 等同于 document.getElementById("title").innerHTML; |
| 注：DOM对象和jQuery对象分别拥有一套独立的方法，不能混用； |
| ●jQuery对象无法直接使用DOM对象的任何方法。 ●DOM对象也无法直接使用jQuery对象的方法。 ●jQuery对象名前缀带有“$” ●DOM对象转jQuery对象：对于一个DOM对象，只需要使用$()函数将DOM对象包装起来，就可以获得一个jQuery对象。 使用$()函数进行转化：$(DOM对象) Eg： var text=document.getElementById(“text”); //DOM对象 var $text=$(text); //jQuery对象 注：jQuery对象命名一般约定以$开头，在事件中经常使用$(this)，this是触发该事件的对象 |
| ●jQuery对象转换成DOM对象： ★jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象 Eg：var $text=$(“text”); //jQuery对象 var text=$text[0]; //DOM对象 ★通过get(index)方法得到相应的DOM对象 Eg：var $text=$(“text”); //jQuery对象 var text=$text.get[0]; //DOM对象 |