锋利的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