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）
<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收缩实例
<!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
（本人写的有什么不对的地方，请大家指正，一起探讨，谢谢）
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器