认识jQuery
1.jQuery简介
jQuery是继Prototype之后又一个优秀的JavaScript库，是由美国人John Resig于2006年创建的开源项目。目前，jQuery团队主要包括核心库，UI，插件和jQuery Mobile等开发人员，推广人员，网站设计人员及维护人员。随着人们对它的日渐熟知，越来越多的程序高手加入其中，完善并壮大其项目内容，这促使jQuery逐步发展成为如今集JavaScript，CSS，DOM和Ajax于一体的强大框架体系。
作为JavaScript的程序库，jQuery凭借简洁的语法和跨浏览器兼容性，极大简化了遍历HTML文档，操作DOM，处理事件，执行动画和开发Ajax的代码，从而广泛应用于Web应用开发，如导航菜单，轮播广告，网页换肤和表单验证等方面。
总之无论是网页设计师，后台开发者，业余爱好者，还是项目管理者，无论是JavaScript菜鸟，还是JavaScript大侠，都有足够的理由学习JQuery。
2.JQuery的用途
1.访问和操作DOM元素
使用jQuery可以很方便地获取和修改页面中的指定元素，无论是删除，移动还是复制元素，jQuery都提供了一整套方便，快捷的方法，既减少了代码的编写，又大大提高了用户对页面的体验度，如添加，删除商品，留言，个人信息等。
2.控制页面样式
通过引入jQuery，程序开发人员可以很便捷的控制页面的CSS文件。浏览器对页面文件的兼容性，一直以来都是页面开发者最头痛的事情，而使用jQuery操作页面的样式可以很好地兼容各种浏览器。最典型的有微博，博客，邮箱等的换肤功能。
配置jQuery环境
1.获取jQuery的最新版本
进入jQuery的官方网站（http://jquery.com）。在页面右侧的Download JQuery区域，下载最新版的jQuery库文件。
2.jQuery库类型说明
jQuery库的类型分为两种，分别是开发版(未压缩版)和发布版(压缩版),
3.jQuery环境配置
jQuery不需要安装，把下载的jquery.js放到网站的一个公共位置，想在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件即可。
4.在页面中引入jQuery
<html>
<head lang="en">
<meta charset="UTF-8">
<title>在页面中引入jQuery库文件</title>
</head>
<body>
<script src="js/jquery-1.12.4.js"></script>
</body>
</html>
jQuery语法
示例
<html>
<head lang="en">
<meta charset="UTF-8">
<title>弹出窗口特效</title>
</head>
<body>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
alert("我欲乘风波浪踏遍黄沙海洋。")
})
</script>
</body>
</html>
这段代码中 ( d o c u m e n t ) . r e a d y ( ) 语 句 中 的 r e a d y ( ) 方 法 类 似 于 传 统 J a v a S c r i p t 中 的 o n l o a d ( ) 方 法 ， 它 是 j Q u e r y 中 页 面 载 入 事 件 的 方 法 。 (document).ready()语句中的ready()方法类似于传统JavaScript中的onload()方法，它是jQuery中页面载入事件的方法。 (document).ready()语句中的ready()方法类似于传统JavaScript中的onload()方法，它是jQuery中页面载入事件的方法。(document).ready()与在JavaScript中的window.onload非常相似，他们都意味着在页面加载完成时，执行事件，例如，如下jQuery代码：
$(document).ready(function(){
//执行代码
});
类似于如下javascript代码:
window.onload=function(){
//执行代码
};
两者在功能上可以互换，但它们之间又存在一些区别。
在实际开发中，通常需要在页面加载后立即使用JavaScript执行一些初始化工作，这通常涉及DOM元素的访问和操作，因此必须确保这些DOM元素已经加载完成，否则将得不到这些DOM对象。一般的做法是$(document).ready()方法中执行这些工作。
document语法结构
通过 ( d o c u m e n t ) . r e a d y ( . . . . . . . . ) ； 不 难 发 现 ， 这 条 语 句 包 含 三 大 部 分 (document).ready(........)；不难发现，这条语句包含三大部分 (document).ready(........)；不难发现，这条语句包含三大部分()，document和ready()。这三大部分在jQuery中分别被称为工厂函数，选择器和方法，将其语法后结构如下：
$(selector).action();
1.工厂函数
在jQuery中，美元符号“
”
等
价
于
j
Q
u
e
r
y
，
即
”等价于jQuery，即
”等价于jQuery，即()=jQuery()。$()的作用是将DOM对象转化为jQuery对象，只有将DOM对象转化为jQuery对象后，才能使用jQuery的方法。
规范：当$()参数是DOM对象时，该对象无须使用双引号包裹起来，如果获取的时document对象，则写作美元符号(document)。
2.选择器selector
jQuery支持CSS1.0到CSS3.0规则中几乎所有的选择器，如标签选择器，类选择器，ID选择器和后代选择器等，使用jQuery选择器和$(）工厂函数可以非常方便的获取需要操作的DOM元素，语法格式如下：
$(selector);
ID选择器，标签选择器，类选择器的用法如下所示:
$("#userName"); //获取DOM中id为userName的元素
$("div") //获取DOM中所有的div元素
$(".content"); //获取DOM中calss为content的元素
3.方法action()
jQuery中提供了一系列方法。在这些方法中;一类重要的方法就是事件处理方法，主要用来绑定DOM元素的事件和事件处理方法。在jQuery中，许多基础的零件，如鼠标点击事件，键盘事件和表单验证事件等，都可以通过这些事件方法进行绑定，对应的在jQuery中则写作ciick(),mouseover()和mouseout()等。
示例：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>左导航菜单</title>
<style type="text/css">
li{list-style: none; line-height: 22px; cursor: pointer;}
.current{background: #6cf; font-weight: bold; color: #fff;}
</style>
</head>
<body>
<ul>
<li id="current">jQuery简介</li>
<li>jQuery语法</li>
<li>jQuery选择器</li>
<li>jQuery事件与动画</li>
<li>jQuery方法</li>
</ul>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("li").click(function(){
$("#current").addClass("current")
});
});
</script>
</body>
</html>
在上面的示例中出现的addClass()方法是jQuery中用于进行CSS操作的方法之一，它的作用是向被选中的元素添加一个或多个类样式，它的语法如下：
jQuery对象.addClass([样式名]);
其中，样式可以是一个，也可以是多个，多个样式名需要用空格隔开。
需要注意的是 ，与使用选择器获取DOM元素不同，获取id为current的元素时，“current”前需要加id符号“#”，而使用addClass()方法添加class为current的类样式时，该类名前面不带有类符号“.”。
jQuery中还有用于CSS操作的另一种方法，它的作用是为匹配的元素添加CSS样式，语法如下：
css("属性","属性值"); //设置一个CSS属性
css({"属性1":"属性值1","属性2":"属性值2".....});//同时设置多个css属性
若要使用css()方法为页面中的p元素设置文本颜色为蓝色，可以写作：$(“p”).css(“color”,“blue”)。
注意：
- css()方法为所匹配的元素设置给定的CSS样式。
- addClass()方法向所有匹配的元素添加一个或多个类，该方法不会删除已经存在的类，仅在原有的基础上追加新的样式。
- 基于结构与样式分离的原则，通常在实际应用中，为某元素添加样式，使用addClass()方法比css()方法的频率要高很多，因此建议使用addClass()方法为元素添加样式。
children()方法jQuery中遍历后代的一种方法，用作查找被选元素的所有直接子元素。show()和hide()在jQuery中经常用到，分别用来显示，隐藏HTML元素，语法如下：
$(selector).show();
$(selector).hide();
jQuery程序的代码风格
代码风格即程序开发人员所编写的源代码的书写风格，良好的代码风格使代码具有可读性。
1.“美元符号的使用
在jQuery程序中，使用最多的就是美元符号“$”，无论是页面元素的选择器，还是功能函数的前缀，都必须使用该符号，它的jQuery程序的标志，即美元符号等同于jQuery。
2.链式操作
在对DOM元素进行多个操作时，为了避免过度使用临时变量或不需要的重复代码，在大多数jQuery代码中采用一种链式编程模式。它可以对一个对象进行多重操作，并将操作结果返回给该对象，以便于将返回结果应用于该对象的下一次操作。
示例
<head lang="en">
<meta charset="UTF-8">
<title>问答特效</title>
<style type="text/css">
h2{padding: 5px;}
p{display: none;}
</style>
</head>
<body>
<h2>什么是受益人?</h2>
<p>
<strong>解答：</strong>
受益人是指人身保险中由被保险人或者投保人指定的
享有保险金请求权的人，投保人、被保险人可以为受益人。
</p>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function(){
$("h2").click(function(){ //单击h2比标题，增加背景颜色和显示p标签
$("h2").css("background-color","#ccffff").next().css("display","block");
});
});
</script>
</body>
</html>
next()方法，其作用是匹配元素集合中的每个元素其后紧邻的同辈元素。
3.隐式迭代
在jQuery编写中，除了链式操作外，还用一种方式，即隐式迭代，在如下示例中为每个li标签中的字体设置样式。代码如下：
<body>
<ul>
<li>数码产品</li>
<li>家用电器</li>
<li>妇幼保健</li>
<li>时尚丽人</li>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
//加载页面，设置所有li标签中的字体颜色为红色并加粗显示。
$("li").css({"font-weight":"bold","color":"red"});
});
</script>
</body>
在上述代码中，获取所有li标签，并设置字体样式。如果在传统的JavaScript写法中，需要使用getElementsByTagName()获取li标签集合，然后使用for循环一个一个的设置字体样式，而这里使用jQuery就不一样了，它不需要遍历所有元素，可以直接设置元素样式，这就是隐式迭代。
4.添加注释
DOM对象和jQuery对象
1.DOM对象
大家都知道DOM是"Document object Model（文档对象模型）"的英文单词首字面的缩写，如类似HTML，XML等属于文档类型的语言，才具有DOM。
每个HTML页面，都具有一个DOM，每个DOM都可以表示成一棵树，在这棵树里存在许多不同类型的节点，有些DOM节点还包含其他类型的节点。DOM里的节点通常分为三种类型，即元素节点，文本节点，属性节点。
2.jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象，他能够使用jQuery中的方法，例如：
$("#title").html(); //获取id为title的元素内的html代码；
这段代码等同于如下代码：
document.getElementById("title").innerHTML;
在jQuery对象中无法直接使用DOM对象的任何方法。例如，$("#id").innerHTML和￥（"#id"）.checked之类的写法都是错误的，可以使用，￥("#id").html()和￥("#id").arrt(“checked”)之类的jQuery方法来代替。同样DOM对象也不能只有jJQuery里的方法，例如，document.getElementById(“id”).html()也会报错，只能有document.getElementById(“id”).innerHTML语句。
jQuery对象与DOM对象的互相转换
在实际使用jQuery开发过程中，jQuery和DOM对象互相转换是非常罕见的。在学习jQuery对象和DOM对象相互转换之间先定义好变量的风格。如果获取的对象是JQuery对象，那么在变量前面加上$，例如：
var $variable=jQuery对象;
如果获取的对象是DOM对象，则定义如下：
var variavle=DOM对象;
1.jQuery对象转换为DOM对象
jQuery提供了两种方法将一个jQuery对象转换成一个DOM对象，即[index]和get(index);
(1).jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。例如：
var $txtName=$("#txtName");//jQuery对象
var txtName=$txtName[0] //DOM对象
alert(txtName.checked) //检测这个checked是否被选中了
(2).通过get(index)方法得到相应的DOM对象，语法如下：
var $txtName=$("txtName"); //jQuery对象
var txtName=$txtName.get(0); //DOM对象
alert(txtName.checked) //检测这个checked是否被选中了
jQuery对象转换成DOM对象在实际开发中并不多见，除非希望使用DOM对象特有的成员，如outerHTML属性，通过该属性可以输出相应的DOM元素的完整的HTML代码，而jQuery并没有直接提供该功能。
2.DOM对象转换成jQuery对象
对于一个DOM对象，只需要用$()函数将DOM对象包装起来，就可以获得一个JQuery对象。其方式为￥(DOM对象)，jQuery代码如下。
var txtName=document.getElementById("txtName"); //DOM对象
var $txtName=$(txtName); //jQuery对象
转换后可以任意使用JQuery中的方法。
在实际开发中，将DOM对象转换为jQuery对象，多见于jQuery事件方法的调用中。
最后再次强调：DOM对象只能用DOM中的方法，jQuery对象只能使用jQuery中的方法，但jQuery对象提供了一套更加完善的对象成员用于操作DOM，关于jQuery操作DOM将在后续章节中 详细讲解。
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
