JQUERY的基础学习

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 359 阅读

文章标签：

#js #jquery #dom #javascript

前端框架专栏收录该内容

1 篇文章

订阅专栏

jQuery技术随着越来越广泛的使用，渐渐成为编程过程中不可或缺的一种语言。jQuery提供了相当强大的类库和功能，以供用户可以根据不同情况调整页面的美观程度。下面让我们一起来学习jQuery吧。官方下载地址：http://code.jquery.com/jquery/

首先是环境的搭建：

<--引入jQuery环境-->

<script src="/js/jquery-2.1.3.js" type="text/javascript"></script>

jQuery:库类型说明

在Download jQuery区域，一共有三种类型的jQuery:库，分别是jQuery 1.2.6 (16kb, Minified and Gzipped)、jQuery 1.2.6(97kb, Uncompressed)和jQuery 1.2.6 (30kb, Packed)，区别如表1-1所示：
表1-1 jQuery库类型对比表
名称
大小
说明
jQuery 1.2.6
(16kb, Minified and Gzipped)
16kb
经过gzip压缩，体积最小，为应用在产品、项目而准备的版本
jQuery 1.2.6
(97kb, Uncompressed)
97kb
完整无压缩版本，为测试，学习和开发而准备的版本
jQuery 1.2.6 (30kb, Packed)
30kb
经过Packer压缩，为不支持gzip的服务器而准备的版本

jQuery:库类型说明

在Download jQuery区域，一共有三种类型的jQuery:库，分别是jQuery 1.2.6 (16kb, Minified and Gzipped)、jQuery 1.2.6(97kb, Uncompressed)和jQuery 1.2.6 (30kb, Packed)，区别如表1-1所示：

表1-1 jQuery库类型对比表

名称	大小	说明
jQuery 1.2.6 (16kb, Minified and Gzipped)	16kb	经过gzip压缩，体积最小，为应用在产品、项目而准备的版本
jQuery 1.2.6 (97kb, Uncompressed)	97kb	完整无压缩版本，为测试，学习和开发而准备的版本
jQuery 1.2.6 (30kb, Packed)	30kb	经过Packer压缩，为不支持gzip的服务器而准备的版本

编写简单的jQuery代码

环境配置好后，你也许迫不及待的想试用一下jQuery。在我们开始编写第一个jQuery程序之前，先明确一点：在jQuery库中，$就是jQuery的一个简写形式，比如$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的。如果没有特别说明，程序中的$符号都是jQuery的一个简写形式。

下面我们开始编写我们第一个jQuery程序：

<html>

<head>

$(document).ready(function(){ //等待dom元素加载完毕.

alert("Hello World!"); //弹出一个框。

});

</script>

</head>

<body>

</body>

</html>

运行后，测试结果如图1-8所示：

jQuery对象和DOM对象

1.4.1 简介DOM对象和jQuery对象

第一次学习jQuery，经常会搞不清楚哪些是jQuery对象、哪些是DOM对象，所以我们在这里重点讲一下。

1 . DOM对象

文档对象模型(DOM，Document Object Model)。

每一份DOM都可以表示一棵树。下面我们构建一个非常基本的网页：

图1-14 一个非常基本的网页

对应网页代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

</head>

<body>

<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>

<ul>

</ul>

</body>

</html>

我们可以构建上面网页结构的DOM树。如图1-15所示：

图1-15 把网页元素表示为文档树

在这棵DOM树中，<h3> 、<p>、<ul> 以及<ul>的3个<li>子节点都是DOM元素节点。我们可以通过JavaScript中的getElementsByTagName来获取它们。像这样通过getElementById或者getElementsByTagName得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法，比如：

var domObj = document.getElementById("id"); // 获得DOM对象

var ObjHTML = domObj.innerHTML; //使用JavaScript中的方法 innerHTML

2 . jQuery对象

那什么是jQuery对象呢？

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法。

比如：

$("#foo").html(); // 获取id为foo的元素内的html代码。.html() 是jQuery里的方法。

这段代码等同于：

document.getElementById("id").innerHTML;

注意：jQuery对象将无法使用DOM对象的任何方法。比如$("#id").innerHTML、$("#id").checked之类的写法都是错误的。同样，DOM对象也不能使用jQuery的里方法，

比如document.getElementById("id").html()也会报错，

只能用document.getElementById("id").innerHTML;

特别要注意，用#id作为选择符取得的是jQuery对象而并非document.getElementById("id")所得到的DOM对象，两者并不等价。关于“#”选择符的运用，可以参考下一章。

从学习jQuery一开始就应当树立正确的观念，认识jQuery对象和DOM对象之间的区别，一旦能够跨越这道坎，之后学习jQuery之路就轻松多了。

1.4.2 jQurey对象和DOM对象的相互转换

在讨论jQurey对象和DOM对象的相互转换之前，我们先约定定义变量的风格。

约定：如果一个获取的是jQuery对象，那么我们在变量前面加上$，如：

var $variable = jQuery 对象 ;

如果获取的是DOM对象，则这么定义：

var variable = DOM对象;

本书中的例子均会以这种方式呈现，以方便读者阅读。

l jQuery对象转成DOM对象

前面说了，jQuery对象不能使用DOM中的方法，但如果你对jQuery对象所提供的方法不熟悉，或者jQuery没有封装你想要的方法，这时你不得不用一下DOM对象的时候，你该怎么办呢？

在这里提供两种方式来将一个jQuery对象转换成DOM对象：

[ index ] 和 .get( index ) ；

（1）jQuery对象是一个数组对象，可以通过 [index] 的方式，来得到相应的 DOM 对象。

比如：

var $cr = $("#cr"); // jQuery对象

var cr = $cr[0]; // DOM对象

alert(cr.checked) //检测这个checkbox是否被选中了

（2）另一种方式是jQuery本身提供的，通过.get(index) 方式，来得到相应的 DOM 对象。

比如：

var $cr = $("#cr"); // jQuery对象

var cr = $cr.get(0); // DOM对象

alert(cr.checked) //检测这个checkbox是否被选中了

l DOM对象转成jQuery对象

对于已经是一个DOM对象的，我们只需要用$( ) 把 DOM对象包装起来，就可以获得一个如假包换的jQuery对象了。比如：$( DOM对象) ;

var cr = document.getElementById("cr"); //DOM对象

var $cr = $(cr); // jQuery 对象

转换后，就可以任意使用jQuery中的方法了。

通过以上提供的方法，我们可以任意的相互转换 jQuery对象和DOM对象。最后再次强调下，DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法的，但jQuery对象提供了一套更加完善的工具用于操作DOM，可以参考第三章。

解决jQuery和其它库的冲突

如果你的项目中有多种JavaScript库，比如同时存在prototype.js和jquery.js。为了避免$对象的冲突，我们可以使用jQuery中的.noConflict()来解决冲突，需要注意引入JavaScript库的顺序。

写法1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

jQuery.noConflict(); //将变量$的控制权让渡给prototype.js

jQuery(function(){ //使用jQuery

jQuery("p").css("color","red"); //使用jQuery

$("pp").style.display = "none"; //这里的$符号是Prototype的方法

});

</script>

</head>

<body>

<p id="pp">testpp<p>

</body>

</html>

写法2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

jQuery.noConflict(); //将变量$的控制权让渡给prototype.js

jQuery(function(){ //使用jQuery

jQuery("p").css("color","red"); //使用jQuery

$("pp").style.display = "none"; //这里的$符号是Prototype的方法。

});

</script>

</head>

<body>

<p id="pp">testpp<p>

</body>

</html>

切记不要把顺序弄错！

还有两种不使用.noConflict()来避免冲突常见方式。

一种是如果你的jQuery(function(){…})内部不使用其它库的代码，通过如下形式构建代码，先引入jQuery，再引入其它库，之后，继续使用$作为jQuery的简写形式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

jQuery(function($){

$("p").css("color","red"); //函数内部的$还是jQuery的$。

});

$("pp").style.display = "none"; //函数外部的$是Prototype的$。

</script>

</head>

<body>

<p id="pp">testpp<p>

</body>

</html>

另一种是利用闭包的特性，你在任意地方建立一个闭包，在其内部，可以既使用$作为jQuery的缩写，又不用担心冲突，通常jQuery的插件都是采用这种形式来写的。当然也是先引入jQuery，再引入其它库：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

(function($){

$("p").css("color","red"); //函数内部的$还是jQuery的$。

})(jQuery);

$("pp").style.display = "none"; //函数外部的$是Prototype的$。

</script>

</head>

<body>

<p id="pp">testpp<p>

</body>

</html>

这是最简单的解决冲突的方法，当然还有其它方式，但换汤不换药。