没有合适的资源?快使用搜索试试~ 我知道了~
15天学会jquery(完整版)
5星 · 超过95%的资源 需积分: 10 13 下载量 185 浏览量
2011-12-20
14:45:23
上传
评论
收藏 275KB PDF 举报
温馨提示
试读
38页
从其他网站下载的入门时的参考资料,15天学会jquery(完整版),请参考。
资源推荐
资源详情
资源评论
Jquery 15 天教程
第一章 15 Days of jQuery What, Why, When, Where, Who
what
jQuery 是一个了不起的 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 的页面你就会发现它是如此的简单易用.只用很少
的几行,就能表现出很优雅的效果. 有一天当我突然看到一些用 jQuery 写的代
码时我一下子豁然开朗了. 早茶的过程中,我例行公务的去翻阅我的订阅,去看
每日必看的设计博客的时候我看到了一个用 jQuery 写的 javascript 的例子.事
实证明,这些代 码还是有些和浏览器关联的 bug,不过这些概念还是我以前从来
没有见过的.
还有那些代码…
代码看起来很简单看起来不像我以前见过的.但也不无道理.
我开始通读文档,并且惊奇的发现用一点点代码竟然能做这么多事情.
when
你应当在你需要的时候使用 jQuery.
给你一个小型的库文件 DOM 强大的控制能力 不费吹灰之力的工作,和少许的努
力.
或者
快速的通过 AJAX 没有大量无用的代码 和一些基本的动画效果
但是
如果你需要超级花式效果,动画,拖放,和超级平稳动画,那么你可能想使用
Prototype.他是一个有大量动画效果的类库.
where
你可以 jQuery 的官方网站下载到他的源代码(10K).
who
jQuery was created by John Resig.
第二章 15 Days of jQuery 比 window.onload 更快一些的载入
window.onload()是传统 javascript 里一个能吃苦耐劳的家伙。它长久以来一直
被程序员们作为尽快解决客户端页面载入问题的捷径。
但有时候等待页面载入还是不够快。
只 有少数大型的图片文件会被快速的载入,而大部分大型的图片文件会使
window.onload()载入的很慢。所以当我为最近的网络营销创建一个 web 应 用程
序的时候我不得希望更快一点。有一些围绕 window.onload()的新研究(比如
brother cake)的代码是一种快速的方式。如果你需要,可以试试。
但是如果你要做一些 DOM(文档对象模型)javascript 的编程,那么你为什么不试
试 jQuery,它就像你自己亲自制作一个蛋糕,并品尝它。(双关 Brother Cake,
俏皮话)。
jQuery 有一个用来作为 DOM 快速载入 javascript 的得心应手的小函数,那就是
ready… 他在页面加载完成之前执行。
$(document).ready(function(){
// Your code here...
});
你可以用他来载入任何你想要载入的 javascript,并不一定要保留 jQuery 的编
码风格。让 jQuery 同时去执行多个函数也是可以的。
你以前可能见过类似于 init()之类的函数,你会发现 jQuery 会快很多。
在以后的教程里我们会一遍又一遍的用到这个函数。
OK 你现在可以尝试一下代码:(记得把 jQuery 引用进你的页面哦,不记得的话
看看上篇。)
$(document).ready(function(){
alert("Congratluations!");
});
很 Easy,不是吗? 用几分钟时间做的双色表格。
第三章 15 Days of jQuery(Day 2)---很容易的制作双色表格
这节本身没有太多的价值,重点在它提供的这个例子上。我将代码帖出来然后对
重点部分注释一下:我们先来看看 Thewatchmakerproject 传统的做法:预览地
址(你可以查看一下源代码)。再来看看 jQuery 是如何用 5 行代码来搞定的:
<!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=gb2312" />
<title>StripingTable</title>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<!--将 jQuery 引用进来-->
<script type="text/javascript">
$(document).ready(function(){ //这个就是传说的 ready
$(".stripe tr").mouseover(function(){
//如果鼠标移到 class 为 stripe 的表格的 tr 上时,执行函数
$(this).addClass("over");}).mouseout(function(){
//给这行添加 class 值为 over,并且当鼠
标一出该行时执行函数
$(this).removeClass("over");}) //移除该行的 class
$(".stripe tr:even").addClass("alt");
//给 class 为 stripe 的表格的偶数行添加 class 值为 alt
});
</script>
<style>
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*这行将给所有的 tr 加上背景色*/
}
tr.over td {
background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
}
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellspacing="0"
cellpadding="0">
<!--用 class="stripe"来标识需要使用该效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
剩余37页未读,继续阅读
资源评论
- xiaoxixiwa2012-06-11很清晰的pdf,有实例,有代码,很好。
阿*呆
- 粉丝: 1167
- 资源: 19
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功