JQuery无废话系列教程(一) 入门（转）
2009-07-01 15:35
176 查看
本文转自（http://blog.csdn.net/wansijie/archive/2009/06/22/4288036.aspx）
前言
贝壳(就是本文作者了)也属于刚刚会用点JQuery的那一类型, 在学习过程中也遇到挺多问题,特别是在开始入门的时候.一直准备写些有关JQuery的文章,但又恐自己文笔及表达能力有限而"误人子弟",最终还是鼓起勇气. 如在文章中有错误或者不合适的理解望广大朋友直接指出批评.
本文的宗旨, 授人鱼不如授人渔. 我只会讲关键部分,不可能JQuery的每个函数我都讲,因为有很多函数贝壳自己在实际应用中都从未使用过. 但当我们已经会渔了还用担心鱼吗!?
BTW:贝壳假设你已经掌了基本的JavaScript运用能力及基础的CSS知识.
JQuery是什么
JQuery只是一个JS文件
人对新鲜事业总是报着好奇与排斥的情感,贝壳刚开始学的时候也一样. 想掌握又怕自己学不会. 其实JQuery很简单.
JQuery其实就是一个工具包,很多常用的功能已经被好心人封装好,我们真要直接调用就可以了(有点类似SDK),具体内部原理和实现我们现在不去讨论. 记住JQuery很简单,很方便.
目前jQuery最新Release版本为1.32,官方下载地址为:http://docs.jquery.com/Downloading_jQuery
本系列教程基于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(){
$("#tabTest tr:even").addClass("tabEven");
$("#tabTest tr: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>
效果如下:
代码解析:
$(document).ready(function(){
$("#tabTest tr:even").addClass("tabEven");
$("#tabTest tr:odd").addClass("tabOdd");
});
$(document).ready 的作用很简单,就是等待网页全部内部载入后再执行JavaScript代码(别忘了JQuery也是JavaScript代码哟), 这个函数几乎在所有使用JQuery的代码中都用到. 因为如果我们的Javascript代码中如果有DOM操作,在网页还没完全读取完时整个DOM框架还没有真正建立起来,在这之前的DOM操作都是无效的.
$("#tabTest tr:even").addClass("tabEven"); 为id为tabTest的表格的偶数行增加名为tabEven的CSS样式
$("#tabTest tr:odd").addClass("tabOdd"); 为id为tabTest的表格的奇数行增加名为tabEven的CSS样式
最后, 初学者千万不要为陌生的代码而感到不知所措,记住JQuery很简单.
最后是相关的评论：
1.楼主这么写复杂了，jQuery本身就有.css方法 $(function() { $("#tabTest tr:even").css("background", "#ff0000"); $("#tabTest tr:odd").css("background", "#00ff00"); })
2.写的不错；不过要在加上一些与JavaScript方法的比较就更好了 如$(document).ready 就是 JavaScript中onlord()。
3.网友推荐的帖子
从零开始学习jQuery (一) 开天辟地入门篇
从零开始学习jQuery (二) 万能的选择器
从零开始学习jQuery (三) 管理jQuery包装集
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
从零开始学习jQuery (五) 事件与事件对象
从零开始学习jQuery (六) jQuery中的Ajax
从零开始学习jQuery (七) jQuery动画-让页面动起来!
从零开始学习jQuery (八) 插播:jQuery实施方案
从零开始学习jQuery (九) jQuery工具函数
从零开始学习jQuery (十) jQueryUI常用功能实战
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
4.作者的实战中已经发布：http://topic.csdn.net/u/20090629/22/d8171579-b34a-4ca3-b92d-83b92c0c29b3.html?492
前言
贝壳(就是本文作者了)也属于刚刚会用点JQuery的那一类型, 在学习过程中也遇到挺多问题,特别是在开始入门的时候.一直准备写些有关JQuery的文章,但又恐自己文笔及表达能力有限而"误人子弟",最终还是鼓起勇气. 如在文章中有错误或者不合适的理解望广大朋友直接指出批评.
本文的宗旨, 授人鱼不如授人渔. 我只会讲关键部分,不可能JQuery的每个函数我都讲,因为有很多函数贝壳自己在实际应用中都从未使用过. 但当我们已经会渔了还用担心鱼吗!?
BTW:贝壳假设你已经掌了基本的JavaScript运用能力及基础的CSS知识.
JQuery是什么
JQuery只是一个JS文件
人对新鲜事业总是报着好奇与排斥的情感,贝壳刚开始学的时候也一样. 想掌握又怕自己学不会. 其实JQuery很简单.
JQuery其实就是一个工具包,很多常用的功能已经被好心人封装好,我们真要直接调用就可以了(有点类似SDK),具体内部原理和实现我们现在不去讨论. 记住JQuery很简单,很方便.
目前jQuery最新Release版本为1.32,官方下载地址为:http://docs.jquery.com/Downloading_jQuery
本系列教程基于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(){
$("#tabTest tr:even").addClass("tabEven");
$("#tabTest tr: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>
效果如下:
代码解析:
$(document).ready(function(){
$("#tabTest tr:even").addClass("tabEven");
$("#tabTest tr:odd").addClass("tabOdd");
});
$(document).ready 的作用很简单,就是等待网页全部内部载入后再执行JavaScript代码(别忘了JQuery也是JavaScript代码哟), 这个函数几乎在所有使用JQuery的代码中都用到. 因为如果我们的Javascript代码中如果有DOM操作,在网页还没完全读取完时整个DOM框架还没有真正建立起来,在这之前的DOM操作都是无效的.
$("#tabTest tr:even").addClass("tabEven"); 为id为tabTest的表格的偶数行增加名为tabEven的CSS样式
$("#tabTest tr:odd").addClass("tabOdd"); 为id为tabTest的表格的奇数行增加名为tabEven的CSS样式
最后, 初学者千万不要为陌生的代码而感到不知所措,记住JQuery很简单.
最后是相关的评论：
1.楼主这么写复杂了，jQuery本身就有.css方法 $(function() { $("#tabTest tr:even").css("background", "#ff0000"); $("#tabTest tr:odd").css("background", "#00ff00"); })
2.写的不错；不过要在加上一些与JavaScript方法的比较就更好了 如$(document).ready 就是 JavaScript中onlord()。
3.网友推荐的帖子
从零开始学习jQuery (一) 开天辟地入门篇
从零开始学习jQuery (二) 万能的选择器
从零开始学习jQuery (三) 管理jQuery包装集
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
从零开始学习jQuery (五) 事件与事件对象
从零开始学习jQuery (六) jQuery中的Ajax
从零开始学习jQuery (七) jQuery动画-让页面动起来!
从零开始学习jQuery (八) 插播:jQuery实施方案
从零开始学习jQuery (九) jQuery工具函数
从零开始学习jQuery (十) jQueryUI常用功能实战
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
4.作者的实战中已经发布：http://topic.csdn.net/u/20090629/22/d8171579-b34a-4ca3-b92d-83b92c0c29b3.html?492
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery无废话系列教程(一) 入门
- JQuery无废话系列教程(一) 入门
- JQuery 无废话系列教程(一) jquery入门 [推荐]
- JQuery 无废话系列教程(一) jquery入门 [推荐]
- JQuery无废话系列教程(二) 实战篇上
- JQuery 无废话系列教程(二) jquery实战篇上
- JQuery无废话系列教程(三) 实战篇中
- JQuery无废话系列教程(二) 实战篇上
- JQuery无废话系列教程(四) 实战篇下
- JQuery无废话系列教程(三) 实战篇中
- JQuery 无废话系列教程(二) jquery实战篇上
- pyqt系列原创入门教程
- Angular 4入门教程系列：9：TypeScript：ECMAScript之前世今生
- NLog文章系列——入门教程（下）
- jQuery 入门教程(20): jQuery UI 基本工作过程
- jQuery中文入门指南，翻译加实例，jQuery的起点教程
- Angular 4入门教程系列：18：编译优化与nginx压缩
- jQuery 入门教程
- 无废话WCF入门教程四[WCF的配置文件]
- 易语言零基础新手入门系列教程 第一课