jQuery学习（一）
jQuery是一个非常优秀的JavaScript框架，它对CSS和XPath的至此，使我们写js变得更加方便。
那么它是如何实现它的声明的呢？
1）查找（创建）jQuery对象：$('selector');
2）调用jQuery对象的方法完成我们需要完成的工作:$('selector').do();
jQuery就是以这种可以说最简单的编码逻辑来改变JavaScript编码方式的。这两个步骤是JavaScript的核心。
我们用一个简单的jQuery实例来看它是如何工作的（由于vs2008sp1中文版的jQuery智能提示环境我没调好，jQuery1.3.2用不了，就先用jQuery1.2.6）
1
<html xmlns="http://www.w3.org/1999/xhtml">
2<head>
3 <title></title>
4 <script type="text/javascript" src="Scripts/jquery-1[1].2.6-vsdoc.js"></script>
5
<script type="text/javascript">
6
$(function() {
7
//$('a')查找所有的超链接,click是jQuery的事件,hide()是jQuery对象的方法
8 $('a').click(function() {
9 $(this).hide('slow');
10 return false;
11
});
12 });
13
</script>
14</head>
15<body>
16 <a href="http://www.google.cn">谷歌</a>
17</body>
18</html>
<html xmlns="http://www.w3.org/1999/xhtml">2
<head>3
<title></title>4
<script type="text/javascript" src="Scripts/jquery-1[1].2.6-vsdoc.js"></script>5
<script type="text/javascript">
6
$(function() {
$(7
//$('a')查找所有的超链接,click是jQuery的事件,hide()是jQuery对象的方法8
$('a').click(function() {9
$(this).hide('slow');10
return false;11
});12
});13
</script>14
</head>15
<body>16
<a href="http://www.google.cn">谷歌</a>17
</body>18
</html>需要理解的是$('selector')始终返回的是一个jQuery对象。如上面的$('a')它的含义就相当于：
var obj = document.getElementsByTagName('a');
另外一点就是jQuery总是以集合的形式工作，上面jQuery对象的hide()方法操作的是a元素的集合，而不是单个a元素。
三个问答:
- 1)问:为什么$(selector)之后,返回的是jQuery对象?
答:从jQuery的源代码中,我们可以知道:var $ = jQuery.因此当我们$(selector)操作时,其实就是jQuery(selector),创建的是一个jQuery对象.当然正确的写法应该是这样的:var jq = new $(selector);而jQuery使用了一个小技巧在外部避免了new,在jquery方法内部:if ( window == this ) return new jQuery(selector); - 2)问:为什么创建一个jQuery对象之后,我们可以这样写$(selector).each(function(index){...});进行遍历操作呢?
答:其实jQuery(selector)方法调用时,在jQuery(selector)方法内部,最后返回的是一个数组:return this.setArray(a);而each方法体内部是一个for循环,在循环体内是这样调用的:method.call(this[ i],i). - 3)问:为什么jQuery能做到jQuery对象属性/方法/事件的插件式扩展?
答:如果您有一些javasciprt的面向对象方面的知识,就会知道,jQuery.prototype原型对象上的扩展属性/方法和事件,将会给jQuery的对象"扩展".基于这一点,jQuery是这样写的:jQuery.fn = jQuery.prototype.
1//所以,当我们扩展一个插件功能时,如下:
2jQuery.fn.check = function() {
3 return this.each(function() {
4 this.checked = true;
5 });
6};
7//其实就是:
8jQuery.prototype.check = function() {
9 return this.each(function() {
10 this.checked = true;
11 });
12};
13
综上所述,jQuery给我们带来了一个简洁方便的编码模型(创建jQuery对象;直接使用jQuery对象的属性/方法/事件),一个强悍的dom元素查找器($),插件式编程接口(jQuery.fn),以及插件初始化的"配置"对象思想。
下面看一个简单的jQuery收缩实例
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head>
5 <title></title>
6 <style type="text/css">
7 body
8 {
9 font-family: Verdana, Arial, Helvetica, sans-serif;
10 font-size: 12px;
11 color: #666666;
12 }
13 a
14 {
15 color:#993300;
16 text-decoration:none;
17 font-size:12px;
18 }
19 #title
20 {
21 display:block;
22 padding:5px;
23 width:200px;
24 border:solid 1px #D0E8F4;
25 background:#ECF8FD;
26 }
27 #content
28 {
29 width:200px;
30 padding:5px;
31 display:none;
32 border:1px solid #FADDA9;
33 background:#FDF4E1;
34 }
35 </style>
36 <script type="text/javascript" src="Scripts/jquery-1[1].2.6-vsdoc.js"></script>
37 <script type="text/javascript">
38 $(function() {
39 $('#title').click(function(event) {
40 event.preventDefault();//阻止对象的默认行为，这里是超链接，就是让它不跳转,也可以用return false
41 $('#content').slideToggle("slow");//slideToggle()：jQuery对象的方法，可以使匹配的元素以“滑动”的方式隐藏或显示。
42 });
43 $('#content a').click(function(event) {
44 event.preventDefault();
45 $('#content').slideUp("slow");//这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
46 });
47 });
48 </script>
49</head>
50<body>
51<a href='http://www.google.cn' id="title">谷歌搜索</a>
52<div id="content">
53<a href="#" id="close">[关闭]</a>
54<p>
55一个很简单的jQuery收缩效果
56</p>
57</div>
58</body>
59</html>
60
61
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
3
<html xmlns="http://www.w3.org/1999/xhtml">4
<head>5
<title></title>6
<style type="text/css">7
body 8
{9
font-family: Verdana, Arial, Helvetica, sans-serif;10
font-size: 12px;11
color: #666666; 12
}13
a14
{15
color:#993300;16
text-decoration:none;17
font-size:12px;18
}19
#title20
{21
display:block;22
padding:5px;23
width:200px;24
border:solid 1px #D0E8F4;25
background:#ECF8FD;26
}27
#content28
{29
width:200px;30
padding:5px;31
display:none;32
border:1px solid #FADDA9;33
background:#FDF4E1;34
}35
</style>36
<script type="text/javascript" src="Scripts/jquery-1[1].2.6-vsdoc.js"></script>37
<script type="text/javascript">38
$(function() {39
$('#title').click(function(event) {40
event.preventDefault();//阻止对象的默认行为，这里是超链接，就是让它不跳转,也可以用return false41
$('#content').slideToggle("slow");//slideToggle()：jQuery对象的方法，可以使匹配的元素以“滑动”的方式隐藏或显示。42
});43
$('#content a').click(function(event) {44
event.preventDefault();45
$('#content').slideUp("slow");//这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。46
});47
});48
</script>49
</head>50
<body>51
<a href='http://www.google.cn' id="title">谷歌搜索</a>52
<div id="content">53
<a href="#" id="close">[关闭]</a>54
<p>55
一个很简单的jQuery收缩效果56
</p>57
</div>58
</body>59
</html>60
61
（本人写的有什么不对的地方，请大家指正，一起探讨，谢谢）
浙公网安备 33010602011771号