八天学会jQuery之新手篇资源-CSDN文库

需积分: 3 43 浏览量 2014-04-19 10:51:12 上传评论收藏 93KB DOC 举报

### 八天学会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结合，我们可以轻松实现美观的表格行高亮效果。这对于提高用户体验和网站的专业度都有着重要的意义。

资源推荐

资源详情

资源评论

八天学会  之新手篇

整理自：

jquery 新手教程（1）

　　是传统  里一个能吃苦耐劳的家伙。

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

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

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

载入的很慢。所以当我为最近的网络营销创建一个 应用程序的时候我

不得希望更快一点。有一些围绕 的新研究比如 的代码是一种

快速的方式。如果你需要，可以试试。

　　但是如果你要做一些 文档对象模型 的编程，那么你为什么不试试

，它就像你自己亲自制作一个蛋糕，并品尝它。

　　 有一个用来作为  快速载入  的得心应手的小函数，那就是 …

他在页面加载完成之后执行。

　　 !"#

　　$$%

　　&'

　　你可以用他来载入任何你想要载入的 ，并不一定要保留  的编码风格。

让  同时去执行多个函数也是可以的。

　　你以前可能见过类似于 之类的函数，你会发现  会快很多。

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

　　( 你现在可以尝试一下代码：记得把  引用进你的页面哦，不记得的话看看上

篇。

　　 !"#

　　)*)'

　　&'

　　jquery 新手教程(2)

　　+*,-%./ .0123,“4$$56,$$-78-29:-"$$/;”

“<=$$6>$-?$ 9$-$ 94"”@

　　+  A”<=$$6>$9BBB$ ”@

　　+@

　　+ <4CA”,4-”A”$ 'A>D69D″$@

　　+"@E>-+$"@

　　+A”C4”A”$”@+$@

　　+*–将  引用进来–@

　　+A”$”@

　　 !"#$$这个就是传说的 

　　“” !"#

　　$$如果鼠标移到  为  的表格的  上时，执行函数

　　,“”'& !"#

　　$$给这行添加  值为 ，并且当鼠标一出该行时执行函数

　　 ,“”'&$$移除该行的 

　　“=”,“”'

　　$$给  为  的表格的偶数行添加  值为 

　　&'

　　+$@

　　+A”$”@

　　#

　　>=F::GG'

　　=FGGGGGG'

　　4>=D:'

　　>=6:'

　　#

　　>=99'

　　4< =9FBHD'

　　"4>='

　　4>='

　　I#

　　>=99'

　　#

　　>=F!!'$I这行将给所有的  加上背景色I$

　　+$@

　　+@

　　+@ 之家+$@

　　+@+$@

　　+@DNJJ6:9DJ+$@

　　+@ O+$@

　　+$@

　　+@

　　+@ 之家+$@

　　+@+$@

　　+@DNJJ6:9DJ+$@

　　+@ O+$@

　　+$@

　　+$@

　　+$@

　　+@.E=飘飘说我的  没有+@P我知错了…+$@

　　+$@

　　+$ @

　　这里有一个  的技巧不得不提一下： 的链式操作，什么是链式操作呢？我

们来看看，本来应该写成这样子的：

　　“” !"#

　　,“”'&

　　“” !"#

　　 ,“”'&

　　但是我们写成了：

　　“” !"#

　　,“”'& !"#

　　 ,“”'&

　　在  中，执行完  或者  等方法之后，都会返回当前的对象，

所以可以进行链式操作

　　jquery 新手教程(3)

　　这个教程有点鸡肋，实际上用的不多，甚至根本就用不到，没明白作者为什么要设计

这一章……

　　今天的 C 教程是草草完成的我想把一些东西放在这 9H 天的前面简单的讲讲P这样

以来就可以使一些  新手不至于被一堆代码搞的晕头转向事实上我是在即将结尾的时候才

做出的这个决定

剩余20页未读，继续阅读

评论收藏

内容反馈

jialecheng

粉丝: 0
资源: 4

八天学会jQuery之新手篇

八天学会Ansys命令流

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

15天学会jQuery 初学

电子书 15天学会Jquery

15天学会jQuery 15天学会jQuery

15天学会jquery(完整版)

15天学会jQuery

15天学会JQuery

jquery中文指导15天学会jquery+

15天学会jquery

15天学会jquery.pdf

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

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

echarts 全国地图json数据

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

axure谷歌浏览器插件

个人网页制作 大学生个人网页设计 个人网站模板 简单静态HTML个人网页作品 个人博客

13款echarts可视化大屏源码+效果图，适用于多个行业可视化大屏，免费下载

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

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

超星学习通学习专用浏览器

仲恺ZK-信计专业《WEB程序设计》历年试卷

Axure设计之日期时间范围选择器.rp

Vue3项目练习静态资源assets

html网页做的动态爱心（超好看）

web前端网页设计作品web期末大作业web前端作业网页制作代码web大作业制作网页代码

基于SpringBoot+Vue的学生选课管理系统的毕业设计，Vue+SpringBoot+MybatisPlus+MySQL

Google Chrome浏览器下载

智能卡工具软件 - V2019野火版

2023跨年代码(烟花+背景音乐)

最新资源

个人网页制作大学生个人网页设计个人网站模板简单静态HTML个人网页作品个人博客