### 八天学会jQuery之新手篇 #### 一、了解`window.onload()`与`$(document).ready()` 在传统的JavaScript中,`window.onload()`方法一直被广泛用于处理页面加载完毕后执行的操作。这是一种非常实用的方法,能够确保所有的资源(如图片、样式表等)都已加载完成后再执行特定的脚本。然而,在某些情况下,特别是当页面包含大量资源时,`window.onload()`可能会导致较长的延迟时间。 为了解决这一问题,jQuery引入了一个更为高效的方法——`$(document).ready()`。这个方法可以在DOM(文档对象模型)完全加载完毕后立即执行回调函数,而无需等待所有其他资源加载完成。这样做的好处是,页面的交互功能可以更快地变得可用,从而提升用户体验。 #### 二、使用`$(document).ready()`示例 为了更好地理解`$(document).ready()`的工作原理,我们可以通过一个简单的示例来进行学习: ```javascript $(document).ready(function(){ alert("页面已加载完成!"); }); ``` 这段代码会在页面DOM加载完成后弹出一个提示框,显示"页面已加载完成!"的信息。相比于使用`window.onload()`,这种方式可以让用户更快地看到页面的交互效果。 #### 三、实现表格行的高亮效果 接下来,我们将通过一个具体的例子来展示如何使用jQuery来增强网页的功能性。在这个例子中,我们将为表格中的每一行添加鼠标悬停高亮的效果。具体步骤如下: 1. **HTML结构**: - 我们需要一个基本的HTML表格结构。 - 表格中的每一行都将拥有一个特定的类名,例如`stripetr`,以便于后续的jQuery选择器使用。 2. **jQuery脚本**: - 使用`$(document).ready()`确保DOM加载完成后执行脚本。 - 当鼠标悬停在类名为`stripetr`的表格行上时,为其添加一个新的CSS类`over`。 - 当鼠标离开这些行时,则移除这个类。 - 对于所有的偶数行,我们可以预先设置一个不同的背景颜色,通过添加类`alt`来实现。 3. **CSS样式**: - 定义`over`和`alt`这两个类的样式,以便在鼠标悬停或偶数行时应用不同的背景颜色。 以下是一个完整的示例代码: ```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=gb2312"/> <title>Striping Table</title> <script src="jquery-latest.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ // 鼠标悬停事件 $(".stripetr").mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){ $(this).removeClass("over"); }); // 偶数行样式 $(".stripetr:even").addClass("alt"); }); </script> <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.over td { background: #bcd4ec; /* 高亮行背景色 */ } </style> </head> <body> <table width="50%" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th>名称</th> <th>网址</th> <th>QQ</th> <th>Email</th> </tr> </thead> <tbody> <tr class="stripetr"> <td>ajax之家</td> <td>www.ajaxa.cn</td> <td>274430124</td> <td>admin@ajaxa.cn</td> </tr> <!-- 更多行 --> </tbody> </table> </body> </html> ``` 以上代码展示了如何使用jQuery来简化和增强Web开发的过程。通过`$(document).ready()`函数,我们能够在页面加载完成后立刻为用户提供交互性的体验。同时,通过简单的CSS和jQuery结合,我们可以轻松实现美观的表格行高亮效果。这对于提高用户体验和网站的专业度都有着重要的意义。
剩余20页未读,继续阅读
- 粉丝: 0
- 资源: 4
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助