初识jQuery
一、概述
1）jQuery是JavaScript的程序之一，是JavaScript对象和实用函数的封装。
2）jQuery优点：
（1）jQuery是一个优秀的JavaScript库，使用它可大大提高Web客户端的开发效率。
（2）能使页面在各浏览器中保持统一的显示效果，即不存在浏览器兼容性问题。
3）JavaScript弊端：
（1）一个是复杂的文档对象模型。
（2）另一个是不一致的浏览器实现。
4）注意：jQuery只是JavaScript的程序库，相当于JavaScript技术的一个子集，则不能完全取代JavaScript。
二、应用场合
1）访问和操作DOM元素；可以方便地获取和修改页面中指定元素。
2）控制页面样式。如换肤功能。
3）对页面事件的处理。如搜索模块的交互效果。
4）方便地使用jQuery插件。
5）与Ajax技术的完美结合。利用Ajax异步读取服务器数据的方法，如注册表单校验。
三、优势
主旨：write less,do more(以更少的代码，实现更多的功能)
1）轻量级，体积较小。
2）强大的选择器，几乎支持所有的css选择器。
3）出色的DOM封装。
4）可靠的事件处理机制，吸收了JavaScript中的事件处理函数的精华。
5）出色的浏览器兼容性。
6）隐式迭代，当查找到相同名称的元素后隐藏它们，无须遍历。
7）丰富的插件支持，易扩展性。
四、配置jQuery环境
1、首先必须配置jQuery的开发环境。
2、jQuery库类型说明
1）开发版（未压缩版）：约268KB，完整，用于测试 、学习、开发（jquery-1.版本号.js）
2）发布版（压缩版）：约91KB，用于发布的产品和项目（jquery.-1.版本号.min.js）
3、在页面中引入jQuery
<scr="jQuery的路径" type="text/javascript"></script>
五、jQuery程序
window.onload与$(document).ready()的对比
window.onload() $(document).ready()
执行时机 必须等待网页中所有的 网页中所有DOM文档结构绘制
内容加载完毕后（包括 完毕后即刻执行，可能与DOM
图片、Flash、视频等） 元素关联的内容（图片、Flash
才能执行。 、视频）并没有加载完
编写个数 只能在同一个页面编写 同一个页面能同时编写多个
一次，否则只输出一个
结果。
简写法 无 $(document).ready(function(){})或$(function(){})
相同点：都是页面载入事件的方法，都意味着页面加载完成时执行事件。
六、语法结构
1、三大部分组成：$()：工厂函数；document：选择器；ready()：方法；$(selector).action();
2、$()：工厂函数
"$"美元符号等价于jQuery，即$()=jQuery();
作用：将DOM对象转换为jQuery对象（只有这样，才能使用jQuery的方法）
注意：
1)当$()的参数是DOM对象，该对象不需要用双引号包裹起来，如果获取的是document对象，则写作$(document)
2)当$()函数将DOM对象包裹起来时，就变成了一个jQuery对象，可以使用jQuery的ready()方法。
3、selector选择器
jQuery支持css.1.0到css.3.0规则中几乎所有的选择器。
作用：jQuery选择器和$()工厂函数可以非常方便地获取需要操作的DOM元素。
语法：$(selector)
4、方法action()
事件处理方法
作用：用来绑定DOM元素的事件和事件处理方法
addClass()：用于css操作的方法之一
作用：向被选元素添加一个或多个类样式
语法：jQuery对象.addClass([样式名]);//样式名可以是一个也可以是多个，多个样式名需要用空格隔开。
注意：与使用选择器获取不同，若获取id为"current"的元素时，"current"前需加id的符号"#"，如$("#current"),而使用addClass()方法添加class为current的类样式，不需要添加符号；如：addClas("current");
七、jQuery程序的代码风格
代码风格：程序开发人员所编写源代码的书写风格，良好的代码风格使代码具有可读性。
1、“$”的使用
是jQuery程序的标志
2、操作连缀书写：为了避免过度使用临时变量或不必要的重复代码。
可以对一个对象进行多重操作并将操作结果返回给对象。以便于将返回结果应用于该对象的下一次操作。
css()方法：jQuery中用于进行css操作的方法之一。
作用：为匹配的元素添加css样式。
语法：
单个：css("属性","属性值"); 多个：css({"属性":"属性值","属性":"属性值",.....});
css()与addClass()方法的区别：
1）css()方法所匹配的元素设置给定的css样式。
2）addClass()方法向所有匹配的元素添加一个或多个类，该方法不会移除已经存在的类，仅在原有基础追加新的类样式。
3）基于结构和样式分离，通常在实际应用中，为某元素添加样式，建议使用addClass();
next()：获得所匹配元素集合中每个元素其后紧邻的同辈元素。
八、DOM模型(document object model文档对象模型)
每个（X）HTML页面都具有一个DOM，如果没有document,DOM就无从谈起，类似于（X）HTML、XML等属于文档类型的语言。
1、DOM节点：元素节点、文本节点和属性节点
1）元素节点：在DOM树中，<html>元素是根元素，其他元素都是其子元素。
2）文本节点：在HTML DOM中，内容是由文本节点提供的，文本节点就是HTML中的文本内容。
文本节点与元素节点的关系：
在HTMLDOM文档中，文本节点总包含在元素元素节点内，但并非所有元素节点都包含文本节点，如“<ul>”元素内部就不包含内容，包含文本内容的是它的子节点 <li>
3)属性节点：对元素做出更具体的描述。
如<p>元素的titile属性和<img>元素的src和alt属性。
属性节点与元素节点的关系：
(1）属性节点都是元素节点的子节点。
(2）属性节点总被放在元素节点的起始标签内，不是所有元素节点都必须包含属性节点，如<h2>
2、DOM对象
在JavaScript中，可以使用getElementsByTagName()或getElementById()来获取元素节点，通过该方法得到的DOM元素，就是DOM对象。
3、jQuery对象
就是通过jQuery包装DOM对象后产生的对象。如：$("#title").html();同等于document.getElementById("title").innerHTML;
4、相互转换：
原因：DOM对象包含了一些jQuery对象没有包含的成员（如：outHTML属性是DOM对象特有的成员，可以输出相应的DOM对象元素的完整的HTML代码）。但jQuery对象的成员要丰富得多通常把DOM对象转换为jQuery对象，在相互转之前，先约定定义变量的风格，可获取的对象是jQuery对象，在变量前加$.
1）jQuery对象转换成DOM对象
（1）[index]：jQuery对象是一个类似数组的对象。可通过下标去查找。
如：var $txtName = $("#txtName"); var txtName = $txtName[0];
（2）get(index)：var $txtName = $("#txtName"); var txtName = $txtName.get(0);
2）DOM对象转换成jQuery对象
只要用$()函数将DOM对象包装起来。
注意：DOM对象只能使用DOM中的方法，jQuery对象不可以直接使用DOM中的方法。
一、概述
1）jQuery是JavaScript的程序之一，是JavaScript对象和实用函数的封装。
2）jQuery优点：
（1）jQuery是一个优秀的JavaScript库，使用它可大大提高Web客户端的开发效率。
（2）能使页面在各浏览器中保持统一的显示效果，即不存在浏览器兼容性问题。
3）JavaScript弊端：
（1）一个是复杂的文档对象模型。
（2）另一个是不一致的浏览器实现。
4）注意：jQuery只是JavaScript的程序库，相当于JavaScript技术的一个子集，则不能完全取代JavaScript。
二、应用场合
1）访问和操作DOM元素；可以方便地获取和修改页面中指定元素。
2）控制页面样式。如换肤功能。
3）对页面事件的处理。如搜索模块的交互效果。
4）方便地使用jQuery插件。
5）与Ajax技术的完美结合。利用Ajax异步读取服务器数据的方法，如注册表单校验。
三、优势
主旨：write less,do more(以更少的代码，实现更多的功能)
1）轻量级，体积较小。
2）强大的选择器，几乎支持所有的css选择器。
3）出色的DOM封装。
4）可靠的事件处理机制，吸收了JavaScript中的事件处理函数的精华。
5）出色的浏览器兼容性。
6）隐式迭代，当查找到相同名称的元素后隐藏它们，无须遍历。
7）丰富的插件支持，易扩展性。
四、配置jQuery环境
1、首先必须配置jQuery的开发环境。
2、jQuery库类型说明
1）开发版（未压缩版）：约268KB，完整，用于测试 、学习、开发（jquery-1.版本号.js）
2）发布版（压缩版）：约91KB，用于发布的产品和项目（jquery.-1.版本号.min.js）
3、在页面中引入jQuery
<scr="jQuery的路径" type="text/javascript"></script>
五、jQuery程序
window.onload与$(document).ready()的对比
window.onload() $(document).ready()
执行时机 必须等待网页中所有的 网页中所有DOM文档结构绘制
内容加载完毕后（包括 完毕后即刻执行，可能与DOM
图片、Flash、视频等） 元素关联的内容（图片、Flash
才能执行。 、视频）并没有加载完
编写个数 只能在同一个页面编写 同一个页面能同时编写多个
一次，否则只输出一个
结果。
简写法 无 $(document).ready(function(){})或$(function(){})
相同点：都是页面载入事件的方法，都意味着页面加载完成时执行事件。
六、语法结构
1、三大部分组成：$()：工厂函数；document：选择器；ready()：方法；$(selector).action();
2、$()：工厂函数
"$"美元符号等价于jQuery，即$()=jQuery();
作用：将DOM对象转换为jQuery对象（只有这样，才能使用jQuery的方法）
注意：
1)当$()的参数是DOM对象，该对象不需要用双引号包裹起来，如果获取的是document对象，则写作$(document)
2)当$()函数将DOM对象包裹起来时，就变成了一个jQuery对象，可以使用jQuery的ready()方法。
3、selector选择器
jQuery支持css.1.0到css.3.0规则中几乎所有的选择器。
作用：jQuery选择器和$()工厂函数可以非常方便地获取需要操作的DOM元素。
语法：$(selector)
4、方法action()
事件处理方法
作用：用来绑定DOM元素的事件和事件处理方法
addClass()：用于css操作的方法之一
作用：向被选元素添加一个或多个类样式
语法：jQuery对象.addClass([样式名]);//样式名可以是一个也可以是多个，多个样式名需要用空格隔开。
注意：与使用选择器获取不同，若获取id为"current"的元素时，"current"前需加id的符号"#"，如$("#current"),而使用addClass()方法添加class为current的类样式，不需要添加符号；如：addClas("current");
七、jQuery程序的代码风格
代码风格：程序开发人员所编写源代码的书写风格，良好的代码风格使代码具有可读性。
1、“$”的使用
是jQuery程序的标志
2、操作连缀书写：为了避免过度使用临时变量或不必要的重复代码。
可以对一个对象进行多重操作并将操作结果返回给对象。以便于将返回结果应用于该对象的下一次操作。
css()方法：jQuery中用于进行css操作的方法之一。
作用：为匹配的元素添加css样式。
语法：
单个：css("属性","属性值"); 多个：css({"属性":"属性值","属性":"属性值",.....});
css()与addClass()方法的区别：
1）css()方法所匹配的元素设置给定的css样式。
2）addClass()方法向所有匹配的元素添加一个或多个类，该方法不会移除已经存在的类，仅在原有基础追加新的类样式。
3）基于结构和样式分离，通常在实际应用中，为某元素添加样式，建议使用addClass();
next()：获得所匹配元素集合中每个元素其后紧邻的同辈元素。
八、DOM模型(document object model文档对象模型)
每个（X）HTML页面都具有一个DOM，如果没有document,DOM就无从谈起，类似于（X）HTML、XML等属于文档类型的语言。
1、DOM节点：元素节点、文本节点和属性节点
1）元素节点：在DOM树中，<html>元素是根元素，其他元素都是其子元素。
2）文本节点：在HTML DOM中，内容是由文本节点提供的，文本节点就是HTML中的文本内容。
文本节点与元素节点的关系：
在HTMLDOM文档中，文本节点总包含在元素元素节点内，但并非所有元素节点都包含文本节点，如“<ul>”元素内部就不包含内容，包含文本内容的是它的子节点 <li>
3)属性节点：对元素做出更具体的描述。
如<p>元素的titile属性和<img>元素的src和alt属性。
属性节点与元素节点的关系：
(1）属性节点都是元素节点的子节点。
(2）属性节点总被放在元素节点的起始标签内，不是所有元素节点都必须包含属性节点，如<h2>
2、DOM对象
在JavaScript中，可以使用getElementsByTagName()或getElementById()来获取元素节点，通过该方法得到的DOM元素，就是DOM对象。
3、jQuery对象
就是通过jQuery包装DOM对象后产生的对象。如：$("#title").html();同等于document.getElementById("title").innerHTML;
4、相互转换：
原因：DOM对象包含了一些jQuery对象没有包含的成员（如：outHTML属性是DOM对象特有的成员，可以输出相应的DOM对象元素的完整的HTML代码）。但jQuery对象的成员要丰富得多通常把DOM对象转换为jQuery对象，在相互转之前，先约定定义变量的风格，可获取的对象是jQuery对象，在变量前加$.
1）jQuery对象转换成DOM对象
（1）[index]：jQuery对象是一个类似数组的对象。可通过下标去查找。
如：var $txtName = $("#txtName"); var txtName = $txtName[0];
（2）get(index)：var $txtName = $("#txtName"); var txtName = $txtName.get(0);
2）DOM对象转换成jQuery对象
只要用$()函数将DOM对象包装起来。
注意：DOM对象只能使用DOM中的方法，jQuery对象不可以直接使用DOM中的方法。
385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
