JQuery代码学习巩固

最新推荐文章于 2024-04-19 15:17:03 发布
最新推荐文章于 2024-04-19 15:17:03 发布
阅读量277 收藏
点赞数
分类专栏： Javascript、Jquery 
<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.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>
    <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>
</tbody>
</table>
<p>PS: 飘飘说我的table没有<thead>,我知错了...</p>
</body>
</html>

sihillver
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery综合案例小练习——巩固jquery基础知识
春和的博客
03-07 1180
学习玩jquery的基础知识 做一些小的案例练习巩固一下基础知识的运用 在学了jquery后对比发现jquery的功能十分的强大！ 一、隔行换色 1.1、原生js实现隔行换色 原生js实现隔行换色 首先要获取到表格 在获取到表格中的每一行 通过%2判断是奇数行还是偶数行 再通过控制样式实现背景色的变换 准备一个表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g.
jQuerySourceCode:阅读和分析jQuery源代码，以巩固JS知识并学习一些奇妙的技术-jquery source code
03-24
阅读并分析jQuery源代码，以巩固JS知识并学习一些奇妙的技术。 2017.7.5 jQuery源代码（一） 顺一遍jQuery源码的大体逻辑： 一些变量和函数jQuery继承即扩展方法jQuery.extend方法，即jQuery的静态方法，也可以...
jQuery的学习过程
m0_64351096的博客
09-21 547
jQuery
【前端】jQuery 基础复习、巩固
编程学习集装箱
08-11 319
JQuery 基础 1.概念 1. 概念： 一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。 * jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 * 它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 *
前端学习——jQuery入门篇
m0_46084075的博客
04-05 244
一. jQuery入门 1.1 初步感受jQuery 使用jquery简单写个tab切换小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 200px; width: 20
jQuery中ajax学习记录
Maha
11-09 228
jquery中ajax知识总结
jQuery轮播图学习
ArrowKang的博客
11-29 588
学习前端有了一段时间了，慢慢的有了一些自己的体会，于是想写个博客记录一下自己的学习，巩固自己知识的同时，还能拿来复习用。进入正题，今天学习jQuery的时候，正好看到了轮播图这一块，在这里记录一下。 废话不多说，先上代码。 html部分： <div class="slideShow"> <ul> <li><a href=""><img src="1F.jpg"></a></l
第三章 jQuery
weixin_43352648的博客
11-24 261
第三章 JQuery 个人理解为动态操作
jQuery事件
2401_84153102的博客
04-19 348
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
基础学习之JQuery技术入门
11-19 159
　　一 jQuery概述 　　jQuery就是一个js库，里面封装了很多js的方法，相当于是一个外部的js文件。 　　1.快速入门 　　1) 导库 　　2)在scrpit中直接使用jquery即可。 　　2.jquery的页面加载函数(当页面加载完后执行的函数) 　　window.onload只能出现一个，并且后面的会覆盖前面的，但jquery的多个页面加载函数不会覆盖 　　jquery页面加载函数 　　//方式一 　　jQuery(document).ready(function()
tetris.js:通过重新构建俄罗斯方块来学习 Javascript 和 JQuery
07-08
通过重新构建俄罗斯方块来学习 Javascript 和 JQuery 在准备作为编程新手的 Hack Reactor 入学面试时，我挑战自己使用 Javascript 和一些 JQuery 重新构建经典游戏俄罗斯方块。 我发现这个练习对巩固我的 ...
javaScript与jQuery第十二章上机作业.zip
05-15
18级在校生,学习javascript与jQuery,第十二章上机作业,广安职业技术学院。 记录学习的点点滴滴,加强巩固练习。
用js实现放大镜的效果的简单实例
11-23
第一次发博客，还有点小激动，本人现在正在天津上大学，希望以后从事前端这一...由于我还没有好好的学习过JQuery，但是那些基本的代码还是可以看懂的，所以就想拿现在正在学习的js练一下手，最后还是成功的实现了这个效
android手机应用源码Imsdroid语音视频通话源码.rar
最新发布
05-20
android手机应用源码Imsdroid语音视频通话源码.rar
营销计划汇报PPT，市场品牌 推广渠道 产品 营销策略tbb.pptx
05-20
营销计划汇报PPT，市场品牌 推广渠道 产品 营销策略tbb.pptx
JavaScript_超过100种语言的纯Javascript OCR.zip
05-20
JavaScript
JavaScript_跨平台React UI包.zip
05-20
JavaScript
web前端开发技术课本代码
05-16
在这些线上线下的教程和课本中，大多数都会附带代码样例，通过这些代码样例来让学习者快速入手或巩固知识。 这些代码样例通常会从最基础的HTML标签开始，通过给出样例，学习者可以掌握HTML标记的基本语法和规范。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值