15天学会jQuery 初学
需积分: 0 180 浏览量
更新于2010-05-31
收藏 657KB PDF 举报
### 15天学会jQuery初学
#### 第0天：认识jQuery
- **What**：jQuery是一个优秀的JavaScript库，能够让我们仅用少量的代码就能创造出美观的页面效果。它的出现让JavaScript变得更加有趣和易于使用。
- **Why**：为什么应该考虑使用jQuery？原因在于其简洁性与高效性。只需少量的代码，便能实现优雅的效果。当你看到用jQuery编写的代码时，你会惊讶于其简单性。即使某些代码可能存在浏览器兼容性问题，但其独特的理念和实现方式令人耳目一新。
- **When**：当需要对DOM进行强大控制、轻松处理AJAX请求或实现基础动画效果时，jQuery是一个理想的选择。但对于复杂动画、拖放操作等需求，则可能更适合使用如Prototype这样的库。
- **Where**：可以在jQuery的官方网站上免费下载其源代码（大约10KB）。
- **Who**：jQuery由John Resig创建。
#### 第1天：更快速的页面加载
- **背景**：`window.onload()`是传统JavaScript中常用的一个方法，用于检测页面是否完全加载完毕。但在实际应用中，有时页面完全加载的时间较长，尤其是当页面包含大量大尺寸图片时。为了提高用户体验，我们需要一种更快的方法来初始化页面元素。
- **解决方案**：jQuery提供了一个名为`$(document).ready()`的函数，可以在文档结构加载完成后立即执行，无需等待所有资源加载完毕。这种方法比传统的`window.onload()`更为高效。
```javascript
$(document).ready(function(){
// 在这里写入需要在页面加载后执行的代码
});
```
- **示例**：以下是一个简单的示例，展示如何使用`$(document).ready()`函数显示一个弹窗消息。
```javascript
$(document).ready(function(){
alert("恭喜你！");
});
```
#### 第2天：简易双色表格
- **介绍**：本节介绍如何使用jQuery快速创建双色表格。通过简单的代码实现，展示了jQuery在简化DOM操作方面的优势。
- **示例代码**：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>双色表格</title>
<style type="text/css">
.even { background-color: #ccc; }
.odd { background-color: #fff; }
</style>
</head>
<body>
<table id="myTable">
<tr><td>数据1</td></tr>
<tr><td>数据2</td></tr>
<tr><td>数据3</td></tr>
<tr><td>数据4</td></tr>
</table>
<script src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myTable tr:even').addClass('even');
$('#myTable tr:odd').addClass('odd');
});
</script>
</body>
</html>
```
- **解析**：
- 首先定义了表格的基本结构。
- 使用CSS为偶数行和奇数行设置了不同的背景颜色。
- 利用jQuery的`$(document).ready()`函数，在文档结构加载完成后，通过`:even`和`:odd`选择器分别为表格的偶数行和奇数行添加了相应的CSS类。
以上就是关于15天学会jQuery初学的前三天的学习内容概览，包括了对jQuery的基本认识、更快速的页面加载方法以及简单的DOM操作示例。接下来的日子将继续深入学习jQuery的各种功能和技巧。
15
天学会
jQuery (0-5)
15 Days of jQuery(Day 0)---JQuery - What, Why, When, Where, Who
what
j
Query
是一个了不起的
javascript
库，它可以是我们用很少的几句代码就可以创建出漂亮的页面效果。从网站
的方面说，这使得
javascript
更加有趣。
如果你这样想：“孩子，我需要另外一个
javascript
库，就好比我
I need another hole in my head
”那么
加入这个俱乐部吧。这正是我第一次遇到的时候所想的。
我已经用过了
Moo.fx, Scriptaculous, TW-SACK,
和
Prototype.
我曾参与了
RICO, Yahoo YUI
和其他一些
库的开发。
没有了
PHPjavascript
和我一点也不亲近了。但是我还是尽全力保持头脑清醒，并尽量保持用
AJAX
去思考。
所以当我遇到
jQuery
的时候我想
:
“还需要另外一个
javascript
库吗
?
不了
,
谢谢…”
why
为什么我改变我我对
jQuery
的看法，以及为什么你要考虑去使用它
?
很简单
,
只要你看一眼过使用
jQuery
的页
面你就会发现它是如此的简单易用
.
只用很少的几行
,
就能表现出很优雅的效果
.
有一天当我突然看到一些用
j
Query
写的代码时我一下子豁然开朗了
.
早茶的过程中
,
我例行公务的去翻阅我的订阅
,
去看每日必看的设计博
客的时候我看到了一个用
jQuery
写的
javascript
的例子
.
事实证明
,
这些代码还是有些和浏览器关联的
bug,
不过
这些概念还是我以前从来没有见过的
.
还有那些代码…
代码看起来很简单看起来不像我以前见过的
.
但也不无道理
.
我开始通读文档
,
并且惊奇的发现用一点点代码竟然能做这么多事情
.
when
你应当在你需要的时候使用
jQuery.
给你一个小型的库文件
DOM
强大的控制能力 不费吹灰之力的工作
,
和少许的努力
.
或者
快速的通过
AJAX
没有大量无用的代码 和一些基本的动画效果
但是
如果你需要超级花式效果
,
动画
,
拖放
,
和超级平稳动画
,
那么你可能想使用
Prototype.
他是一个有大量动画效果的
类库
.
where
你可以
jQuery
的官方网站下载到他的源代码
(10K).
who
页码，1/10
更多电子书教程下载请登陆http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
剩余9页未读，继续阅读
资源评论
liusixun
- 粉丝: 1
- 资源: 10
最新资源
- 使用Python和Pygame实现圣诞节动画效果
- 数据分析-49-客户细分-K-Means聚类分析
- 企业可持续发展性数据集，ESG数据集，公司可持续发展性数据（可用于多种企业可持续性研究场景）
- chapter9.zip
- 使用Python和Pygame库创建新年烟花动画效果
- 国际象棋检测10-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar
- turbovnc-2.2.6.x86-64.rpm
- 艾利和iriver Astell&Kern SP3000 V1.30升级固件
- VirtualGL-2.6.5.x86-64.rpm
- dbeaver-ce-24.3.1-x86-64-setup.exe
