15天学会jQuery(0-5)资源-CSDN文库

需积分: 10 108 浏览量 2011-12-27 10:04:53 上传评论收藏 248KB PDF 举报

### 15天学会jQuery(0-5)：详尽解析与学习指南 #### 第0天：初识jQuery—What, Why, When, Where, Who **What：** jQuery是一个开源JavaScript库，旨在简化HTML文档遍历、事件处理、动画以及Ajax交互等常见功能的实现。它提供了一个简洁且强大的API，使开发者能够使用简洁的语法实现复杂的操作。 **Why：** 尽管有许多其他的JavaScript库如Prototype或MooTools等，但jQuery凭借其独特的优点迅速获得青睐： - **简洁性**：只需要少量代码就能实现丰富的效果。 - **广泛的浏览器兼容性**：jQuery对不同浏览器的兼容性支持做得很好，减少了开发者为此付出的努力。 - **强大的社区支持**：拥有庞大的用户群和活跃的社区，遇到问题时容易找到解决方案。 **When：** jQuery最适合用于以下场景： - 需要简洁地控制DOM元素。 - 实现快速的AJAX调用。 - 添加基本的动画效果。 - 如果需要更复杂的功能（如高级动画和拖拽），则可能会考虑其他库如Prototype。 **Where：** 可以在官方站点下载jQuery的源代码。此外，许多CDN服务也提供了jQuery的最新版本，便于快速集成到项目中。 **Who：** jQuery由John Resig创建，并且得到了广泛的支持和贡献，使其成为最流行的JavaScript库之一。 --- #### 第1天：比`window.onload`更快的页面加载 **背景：** `window.onload`是传统JavaScript中常用的函数，用于在页面所有资源完全加载完毕后执行某些操作。然而，在实际应用中，有时我们需要更灵活的加载机制，以便页面能在第一时间响应用户操作。 **方法：** jQuery提供了一个`$(document).ready()`函数，该函数在DOM树构建完成后立即执行，而不需等待图像、样式表等非核心资源加载完成。这种方式通常比`window.onload`更快。 **示例：** ```javascript $(document).ready(function(){ alert("Congratulations!"); }); ``` 此示例中的代码将在DOM准备好之后立即弹出提示框。这种方式不仅适用于简单的警告消息，还可以用于初始化复杂的页面元素和行为。 --- #### 第2天：轻松创建双色表格 **介绍：** 本节将介绍如何使用jQuery快速创建一个双色表格。相较于传统的纯JavaScript或HTML/CSS方法，使用jQuery可以让这项任务变得更加简单。 **示例代码：** ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="myTable">  </table> <script> $(document).ready(function(){ // 为每个表格行添加class $("#myTable tr").each(function(index){ if(index % 2 == 0){ $(this).addClass("even"); } else { $(this).addClass("odd"); } }); }); </script> </body> </html> ``` **分析：** 以上示例展示了如何使用jQuery的`each()`函数遍历表格中的每一行，并根据行号为它们添加不同的CSS类。这种做法非常直观，而且仅需几行代码即可实现复杂的样式变化。 ### 总结通过前三天的学习，我们已经初步了解了jQuery的核心理念及其优势，并实践了一些实用技巧，包括页面加载优化及表格样式的快速定制。随着后续的学习深入，我们将进一步掌握jQuery的更多高级特性，从而提升Web开发效率和用户体验。

资源详情

资源评论

资源推荐

天学会

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/10jquery中文指导:15天学会jquery [jQuery中文社区]

2008-11-10http://wiki.jquery.org.cn/doku.php?id=jquery%E4%B8%AD%E6%96%87%E6%...

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/10jquery中文指导:15天学会jquery [jQuery中文社区]

2008-11-10http://wiki.jquery.org.cn/doku.php?id=jquery%E4%B8%AD%E6%96%87%E6%...

剩余9页未读，继续阅读

评论收藏

内容反馈

fangjiaxing

粉丝: 2
资源: 39

15天学会jQuery(0-5)

评论0

最新资源

15天学会jQuery(0-5)

评论0

jquery-15天学会jQuery(0-5).pdf

15天学会jQuery

15天学会jQuery 15天学会jQuery

15天学会jQuery(0-15).pdf

15天学会jQuery(0-5).pdf

15天学会jQuery(10-15)

15天学会jQuery-Css.rar

15天学会JQuery

15天学会jquery

15天学会jquery.pdf

15天学会jQuery.rar

15天学会jQuery(0-5).rar

15天学会jquery(完整版)

15天学会jQuery(6-10)

15天学会jQuery 初学

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

15天学会jQuery(0~15)

15天学会jQuery 不错的教材

15天学会jQuery.pdf

15天学会jQuery完整版

15天学会jQuery(11-15).pdf

六音音源pc端js文件，版本1.2.0

echarts 全国地图json数据

notepad++免费安装版本，免激活

element-ui v2.15.13离线文档.rar

axure谷歌浏览器插件

微信小程序登录注册界面代码，包含当前界面的所有源码，使用手机验证码注册或账号登录

marktext0.17.1中文版本-【免费资源未商用不存在版权问题】-【请审核大大放过】.zip

最新资源