jquery 和 js css里面都是坑呀 this.style.backgroundColor 和 css {background:#8df;} 是冲突的，用了前者，再$(this).addClass("css class name");效果显示不出来。

http://youchenglin.iteye.com/blog/685026

前他的一些内容参见下列代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>a.html</title>
  6. <style type="text/css">
  7. div.content {
  8.     width: 300px;
  9.     border: 1px solid red;
  10. }
  11.  
  12. .divbox{
  13.     height:300px;
  14.     width:200px;
  15.     background:#ffffff;
  16.     border:solid 1px #ccc;
  17.     float:left;
  18.     margin-right:10px;
  19. }
  20. .divOver{
  21.     background:#eff8fe;
  22.     border:solid 1px #d2dce3;
  23. } 
  24.  
  25. </style>
  26. <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  27.  
  28. <script type="text/javascript">
  29.     jQuery (function ()
  30.     {
  31.         $ ("div.content").click (function ()
  32.         {
  33.             var $self = $ (this).attr ("id");
  34.             var $check = $ ("input#inputid" + $self);
  35.             if (!!$check.prop ("checked"))
  36.             {
  37.                 $check.prop ("checked", false);
  38.                 $ (this).css (
  39.                 {
  40.                     "color" : "black"
  41.                 });
  42.             }
  43.             else
  44.             {
  45.                 $check.prop ("checked", true);
  46.                 $ (this).css (
  47.                 {
  48.                     "color" : "red"
  49.                 });
  50.             }
  51.         });
  52.  
  53.         $(".color").find("tr").each(function(i){this.style.backgroundColor=['#fff','#eee'][i%2]});//一行为白色，一行为灰色
  54.  
  55.         $(".color").find("tr").mouseover(function(){
  56.             $(this).css("backgroundColor","#6699CC");
  57.         });
  58.  
  59.         $(".color").find("tr").mouseout(function(){
  60.            $("tr:even").css("backgroundColor","#fff"); //偶数行的颜色
  61.            $("tr:odd").css("backgroundColor","#eee");  //奇数行的颜色
  62.         });
  63.  
  64.                 //当鼠标滑入时将div的class换成divOver
  65.         $('.divbox').hover(function(){
  66.                 $(this).addClass('divOver');
  67.             },function(){
  68.                 //鼠标离开时移除divOver样式
  69.                 $(this).removeClass('divOver');
  70.             }
  71.         );
  72.  
  73.     });
  74. </script>
  75. </head>
  76. <body>
  77. <center>
  78.  
  79.     <input id="inputid1" type="checkbox" />aa<div class="content" id="1">1111</div>
  80.     <div id="results">11</div>
  81.     <div id="results2">23</div>
  82.  
  83.     <table width="200" border="0" cellspacing="1" bgcolor="#eeeeee" class="color">
  84.       <tr>
  85.         <td>&nbsp;</td>
  86.         <td>&nbsp;</td>
  87.       </tr>
  88.       <tr>
  89.         <td>&nbsp;</td>
  90.         <td>&nbsp;</td>
  91.       </tr>
  92.       <tr>
  93.         <td>&nbsp;</td>
  94.         <td>&nbsp;</td>
  95.       </tr>
  96.       <tr>
  97.         <td>&nbsp;</td>
  98.         <td>&nbsp;</td>
  99.       </tr>
  100.       <tr>
  101.         <td>&nbsp;</td>
  102.         <td>&nbsp;</td>
  103.       </tr>
  104.       <tr>
  105.         <td>&nbsp;</td>
  106.         <td>&nbsp;</td>
  107.       </tr>
  108.     </table>
  109. <br/><hr/><br/>
  110. </center>
  111.     <div id="menu">
  112.         <div class="divbox">区块A</div>
  113.         <div class="divbox">区块B</div>
  114.         <div class="divbox">区块C</div>
  115.     </div>
  116. </body>
  117. </html>

jQuery学习记录1的更多相关文章

  1. jquery学习记录

    1.选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") 所有 <p> 元素 $("p.intro") 所有 class=&q ...

  2. 2016.8.16 JQuery学习记录

    1.$(document).ready(function(){}); 这个函数会在浏览器加载完页面之后,尽快执行: 2.所有的JQuery函数用有个$开始表示,All jQuery functions ...

  3. jQuery Moblile Demos学习记录Theming、Button、Icons图标，脑子真的不好使。

    jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论   本文来源于www.i ...

  4. jQuery Moblile Demos学习记录Panel

    jQuery Moblile Demos学习记录Panel 11. 二 / Jquery Mobile / 没有评论   本文来源于www.ifyao.com禁止转载!www.ifyao.com 我就 ...

  5. 【jQuery】精细学习记录

    [jQuery]精细学习记录 基础 基本语法: $(选择器).action(回调函数); $/jQuery //jQuery核心函数 $(选择器) //获得的jQuery对象 jQuery核心 - j ...

  6. D3.js学习记录【转】【新】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

  8. Echarts学习记录——如何去掉网格线及网格区域颜色

    关键属性 splitLine和splitArea,可以设置相关的属性 示例代码 <!DOCTYPE html> <html lang="en"> <h ...

  9. Echarts学习记录——如何给x轴文字标签添加事件

    Echarts学习记录——如何给x轴文字标签添加事件 关键属性 axisLabel下属性clickable:true 并给图表添加单击事件 根据返回值判断点击的是哪里 感觉自己的方法有点变扭,有更好办 ...

随机推荐

  1. 从0 开始 WPF MVVM 企业级框架实现与说明 ---- 第二讲 WPF中 绑定

    说到WPF, 当然得从绑定说起,这也是WPF做的很成功的一个地方,这也是现在大家伙都在抛弃使用winform的其中一个主要原因,Binding这个东西从早说到完其实都说不完的,我先就做一些基本的介绍, ...

  2. sql server 判断是否存在数据库，表，列，视图

    1 判断数据库是否存在if exists (select * from sys.databases where name = '数据库名')    drop database [数据库名] 2 判断表 ...

  3. JavaWeb之 JSP：自定义标签

    当jsp的内置标签和jstl标签库内的标签都满足不了需求,这时候就需要开发者自定义标签. 自定义标签 下面我们先来开发一个自定义标签,然后再说它的原理吧! 自定义标签的开发步骤 步骤一 编写一个普通的 ...

  4. RMAN 完全恢复

    OS:ORACLE-LINUX 5.7 DB:11.2.0.3.0 完全恢复 查看现有的数据文件SQL> select name from v$datafile; NAME----------- ...

  5. hdu 1412 {A} + {B}

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=3282 {A} + {B} Description 给你两个集合,要求{A} + {B}.注:同一个集合 ...

  6. windows phone listbox虚拟化（下）

    之前写过一篇关于listbox虚拟化的文章,那里采用的方法都是自己早期研究的一些思路,然后发现当数据很大的时候,其实性能效果还是不太理想,下面让我们来仔细想一想到底是基于什么原因,我们回去破坏默认的虚 ...

  7. centos php-fpm nginx配置

    移除旧的软件包:yum remove httpd* php* 安装:yum install php php-fpm yum install php-gd php-mysql php-mbstring ...

  8. Karaf 依赖equinox and felix，karaf 本Apache的很多项目作为基础框架

    6月17日是Apache Karaf作为Apache顶级项目.Karaf是个运行时包,包含了一个OSGi框架(Equinox或Felix).一个命令shell(Felix Gogo)及默认情况下内置的 ...

  9. exception -----> Functions

    /* current_exception */ exception_ptr current_exception() noexcept; 返回指向当前异常(或其副本)的智能指针[具体返回对象本身还是副本 ...

  10. ggplot2 学习笔记 (持续更新.....)

    1. 目前有四种主题 theme_gray(), theme_bw() , theme_minimal(),theme_classic() 2. X轴设置刻度 scale_x_continuous(l ...