0%

锋利的jquery

1、认识jQuery

1.1、jQuery库类型说明

jQuery库的类型分为两种版本,如下:

名称 大小 说明
jquery-1.3.1.js 114KB 完整无压缩版本,主要用于测试、学习和开发
jquery-1.3.1.min.js 54KB/18KB 经过JSMin等工具压缩后的版本,大小为54KB。如果服务器开启Gzip压缩后,大小将变为只有18KB,成为体积最小的版本。主要应用于产品和项目

1.2、DOM对象

DOM(Document Object Model,文档对象模型),每一份DOM都可以表示成一棵树。下面来构建一个非常基本的网页,网页代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!Document html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title></title>
</head>
<body>
<h3>例子</h3>
<p title="你最喜欢的水果">你最喜欢的水果是?</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
</body>
</html>

可以把上面的HTML结构描述为一棵DOM树,如图1-14所示

在这棵DOM树中,<h3>、<p>、<ul>以及<ul>的3个<li>子节点都是DOM元素节点。可以通过javascript中的getElementsByTagName或者getElementByID来获取元素的节点。像这样得到的DOM元素就是DOM对象。DOM对象可以使用javascript中的方法,示例如下:

1
2
var domObj = document.getElementByID("id");  //获得DOM对象
var dobHTML = domObj.innerHTML; //使用javascript中的方法--innerHTML