用户体验设计理念与技术网站 - 探索 · 分享 · 收获     注册账号 忘记密码 QQ一键登录

用户体验设计学院|UED学院

当前位置: 首页 > 脚本技术 > AJaX >

jquery新手教程(全)

时间:2011-03-08 08:36来源:www.ajaxa.cn 作者:丝路野草 阅读:
这篇文章是第一个 jquery 教程,如果对这个 ajax 框架不熟悉,请先看看 上一篇文章 window.onload()是传统javascript里一个能吃苦耐劳的家伙。 它长久以来一直被程序员们作为尽快解决客户端页面载入问题的捷径。 但有时候等待页面载入还是不够快。 只有少数

这篇文章是第一个jquery教程,如果对这个ajax框架不熟悉,请先看看上一篇文章

window.onload()是传统javascript里一个能吃苦耐劳的家伙。

它长久以来一直被程序员们作为尽快解决客户端页面载入问题的捷径。

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

只有少数大型的图片文件会被快速的载入,而大部分大型的图片文件会使window.onload()载入的很慢。所以当我为最近的网络营销创建一个 web应用程序的时候我不得希望更快一点。有一些围绕window.onload()的新研究(比如brother cake)的代码是一种快速的方式。如果你需要,可以试试。

但是如果你要做一些DOM(文档对象模型)javascript的编程,那么你为什么不试试jQuery,它就像你自己亲自制作一个蛋糕,并品尝 它。

jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready… 他在页面加载完成之后执行。

$(document).ready(function(){
// Your code here...
});

你可以用他来载入任何你想要载入的javascript,并不一定要保留jQuery的编码风格。让jQuery同时去执行多个函数也是可以的。

你以前可能见过类似于init()之类的函数,你会发现jQuery会快很多。

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

OK你现在可以尝试一下代码:(记得把jQuery引用进你的页面哦,不记得的话看看上篇。)

$(document).ready(function(){
alert("ajaxa.cn!");
});

很简单,不是吗?明天我们将要用几分钟时间做的双色表格。

对了,别说你还没下载jQuery,实在找不到就到这吧:

=================================

这次我们制作双色表格,这个jquery教程有演示,大家可以看看

这节本身没有太多的价值,重点在它提供的这个例子上。我将代码帖出来然后对重点部分注释一下:我们先来看看 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>
<. src=”jquery-latest.pack.js” type=”text/.”></.>
<!–将jQuery引用进来–>
<. type=”text/.”>
$(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
});
</.>
<style type=”text/css”>
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 width=”50%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<!color=”#008000″& gt;–用class=”stripe”来标识需要使用该效果的表格–>
<thead>
<tr>
<th>名称</th>
<th>网址</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>ajax之家</td>
<td>www.ajaxa.cn</td>
<td>274430124</td>
<td>admin@ajaxa.cn</td>
</tr>
<tr>
<td>ajax之家</td>
<td>www.ajaxa.cn</td>
<td>274430124</td>
<td>admin@ajaxa.cn</td> (责任编辑:uedtech。本文版权归作者所有,转载请注明来自UED学院,并保留原文作者与链接!)

顶一个
(1)
100%
踩一个
(0)
0%
------分隔线----------------------------
推荐内容