【免费】15天学会jQuery初学资源-CSDN文库

需积分: 0 117 浏览量 2010-05-31 15:23:06 上传评论收藏 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的各种功能和技巧。

资源推荐

资源详情

资源评论

天学会

jQuery (0-5)



15 Days of jQuery(Day 0)---JQuery - What, Why, When, Where, Who

what

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

的页

面你就会发现它是如此的简单易用

只用很少的几行

就能表现出很优雅的效果

有一天当我突然看到一些用

Query

写的代码时我一下子豁然开朗了

早茶的过程中

我例行公务的去翻阅我的订阅

去看每日必看的设计博

客的时候我看到了一个用

jQuery

写的

javascript

的例子

事实证明

这些代码还是有些和浏览器关联的

bug,

不过

这些概念还是我以前从来没有见过的

还有那些代码…

代码看起来很简单看起来不像我以前见过的

但也不无道理

我开始通读文档

并且惊奇的发现用一点点代码竟然能做这么多事情

when

你应当在你需要的时候使用

jQuery.

给你一个小型的库文件

DOM

强大的控制能力不费吹灰之力的工作

和少许的努力

或者

快速的通过

AJAX

没有大量无用的代码和一些基本的动画效果

但是

如果你需要超级花式效果

动画

拖放

和超级平稳动画

那么你可能想使用

Prototype.

他是一个有大量动画效果的

类库

where

你可以

jQuery

的官方网站下载到他的源代码

(10K).

who

页码，1/10

更多电子书教程下载请登陆http://down.zzbaike.com/ebook

本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。

Query was created by John Resig.

 15 Days of jQuery(Day 1)---

比

window.onload

更快一些的载入

window.onload()

是传统

javascript

里一个能吃苦耐劳的家伙。它长久以来一直被程序员们作为尽快解决客户

端页面载入问题的捷径。

但有时候等待页面载入还是不够快。

只有少数大型的图片文件会被快速的载入，而大部分大型的图片文件会使

window.onload()

载入的很慢。所以

当我为最近的网络营销创建一个

web

应用程序的时候我不得希望更快一点。有一些围绕

window.onload()

的新

研究

(

比如

brother cake)

的代码是一种快速的方式。如果你需要，可以试试。

但是如果你要做一些

DOM(

文档对象模型

)javascript

的编程，那么你为什么不试试

jQuery

，它就像你自己亲自

制作一个蛋糕，并品尝它。（双关

Brother Cake

，俏皮话）。

Query

有一个用来作为

DOM

快速载入

javascript

的得心应手的小函数，那就是

ready

…

他在页面加载完成之

后执行。

$(document).ready(function(){

// Your code here...

});

你可以用他来载入任何你想要载入的

javascript

，并不一定要保留

jQuery

的编码风格。让

jQuery

同时去执行多

个函数也是可以的。

你以前可能见过类似于

init()

之类的函数，你会发现

jQuery

会快很多。

在以后的教程里我们会一遍又一遍的用到这个函数。

你现在可以尝试一下代码：

(

记得把

jQuery

引用进你的页面哦，不记得的话看看上篇。

)

$(document).ready(function(){

alert("Congratluations!");

});

很

Easy

，不是吗？用几分钟时间做的双色表格。



15 Days of jQuery(Day 2)---

很容易的制作双色表格

这节本身没有太多的价值，重点在它提供的这个例子上。我将代码帖出来然后对重点部分注释一下：我们先来

看看

Thewatchmakerproject

传统的做法：预览地址

(

你可以查看一下源代码

)

。再来看看

jQuery

是如何用

行

代码来搞定的

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

http://www.w3.org/TR/xhtml1/DTD/xhtm

<head>

<title>StripingTable</title>

<!--

将

jQuery

引用进来

-->

$(document).ready(function(){ //

这个就是传说的

ready

$(".stripe tr").mouseover(function(){

如果鼠标移到

class

为

stripe

的表格的

上时，执行函数

$(this).addClass("over");}).mouseout(function(){

给这行添加

class

值为

over

，并且当鼠标一出该行时执行函数

页码，2/10

更多电子书教程下载请登陆http://down.zzbaike.com/ebook

本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。

剩余9页未读，继续阅读

评论收藏

内容反馈

liusixun

粉丝: 1
资源: 10

15天学会jQuery 初学

最新资源

15天学会jQuery 初学

15天学会jQuery

15天学会Jquery

15天学会jquery

15天学会jQuery 15天学会jQuery

15天学会jQuery 初学者最好的教材

15天学会JQuery

15天学会jQuery.pdf

15天学会Jquery（完整版）

15天学会jquery.pdf

15天学会jquery(完整版)

15天学会JQuery(转载)

jquery中文指导15天学会jquery+

15天学会JQuery pdf

最新资源