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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
需要理解的是$('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() {
3return this.each(function() {
4this.checked = true;
5});
6};
7//其实就是:
8jQuery.prototype.check = function() {
9return this.each(function() {
10this.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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
61![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
(本人写的有什么不对的地方,请大家指正,一起探讨,谢谢)
![](https://img2024.cnblogs.com/blog/35695/202408/35695-20240826070647288-243310440.jpg)