jquery系列教程一

最新推荐文章于 2023-05-13 00:05:32 发布

转载最新推荐文章于 2023-05-13 00:05:32 发布 · 644 阅读

本文详细介绍了JQuery的基本概念、优势以及如何在HTML文件中引用JQuery库，通过实例展示了如何使用JQuery简化DOM和CSS操作，以及实现表单中行颜色奇偶变化的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言
BTW:贝壳假设你已经掌了基本的JavaScript运用能力及基础的CSS知识.

JQuery是什么

JQuery只是一个JS文件

本系列教程基于1.32版进行讲解.

JQuery有两种版本:

一种为uncompressed版(未压缩版)主要用在开发中.

另一种为Minified(迷您版)当开发完毕了,就可以改用这个版本.

两种版本的区别

文件大小不一样, 最终用户在浏览时可以减少下载JS时的等待时间.

Uncompressed版文件大小为118KB

Minified版文件大小为56KB

JQuery能带给我们什么

一, 站在巨人的肩上

别人已经发明了轮子,我们没必要自己再去造一个.

二, 强大的BOM,DOM,CSS,事件的操作能力

我最常用的是CSS及DOM的操作,真的太方便了.

三, 更加简洁的代码

自己的亲身经历,比如表格(Table)中的TR奇偶为两种颜色的代码如果自己用JavaScript去编号得用几十行代码,JQuery只需要2行就可以了.

四, 与浏览器无关性

做过JavaScript开发的就知道JavaScript在不同的浏览器下行为表现有时不一样,我们不得不为不同的浏览器编写相应的代码. JQuery在这方法已经内部处理,我们只管去用就是了.

五, 不错的性能

我自己有自知之明, 至少我写的JavaScript代码的运行效率不如JQuery的高.

如何使用JQuery

万年开头难,我在第一次使用JQuery时被吓到过,不知道怎么使用,其实很简单,下面我们用一个例子来说明. : )

建立一个html文件,比如index.html 并与JQuery库文件jquery-1.3.2.js放到同目录下(其实放那都可以)

首先我们解决JQuery的引用. 代码如下:

<html>

<head>

<title>JQuery测试</title>

<script language="javascript" src="jquery-1.3.2.js"></script>

</head>

<body>

</body>

</thml>

红色的那一行代码就完成了JQuery的引用,简单吧!

现在我们再扩充一个功能,使 index.html显示一个表格,并且表格内各行的颜色奇偶不同.也就是奇数行是一种颜色,偶数行又是另一种颜色.

index.html代码结构:

<html>
< head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery测试</title>
<style type="text/css">

/*table中偶数行*/

.tabEven{
background: #ff0000;
}

/*table中奇数行*/

.tabOdd{
background: #00ff00;
}
</style>
<script language="javascript" src="jquery-1.3.2.js">
</script>
<script language = "JavaScript" type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#tabTesttr:even").addClass("tabEven");
$("#tabTesttr:odd").addClass("tabOdd");
});
//]]>
</script>
< /head>
< body>
<table id="tabTest">
<tbody>
<tr>
<td>快购利众网_1</td>
<td>1</td>
</tr>
<tr>
<td>快购利众网_2</td>
<td>1</td>
</tr>
<tr>
<td>快购利众网_3</td>
<td>1</td>
</tr>
<tr>
<td>快购利众网_4</td>
<td>1</td>
</tr>
<tr>
<td>快购利众网_5</td>
<td>1</td>
</tr>
</tbody>
</table>
< /body>
< /thml>

效果如下:
[img=https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/wansijie/EntryImages/20090622/JQuery_chapter1.jpg] [/img]

代码解析:

$(document).ready(function(){
$("#tabTesttr:even").addClass("tabEven");
$("#tabTesttr:odd").addClass("tabOdd");
});

$(document).ready 的作用很简单,就是等待网页全部内部载入后再执行JavaScript代码(别忘了JQuery也是JavaScript代码哟), 这个函数几乎在所有使用JQuery的代码中都用到. 因为如果我们的Javascript代码中如果有DOM操作,在网页还没完全读取完时整个DOM框架还没有真正建立起来,在这之前的DOM操作都是无效的.

$("#tabTesttr:even").addClass("tabEven"); 为id为tabTest的表格的偶数行增加名为tabEven的CSS样式
$("#tabTesttr:odd").addClass("tabOdd"); 为id为tabTest的表格的奇数行增加名为tabEven的CSS样式

最后, 初学者千万不要为陌生的代码而感到不知所措,记住JQuery很简单.