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

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>a.html</title>

<style type="text/css">

div.content {

    width: 300px;

    border: 1px solid red;

}

.divbox{

    height:300px;

    width:200px;

    background:#ffffff;

    border:solid 1px #ccc;

    float:left;

    margin-right:10px;

}

.divOver{

    background:#eff8fe;

    border:solid 1px #d2dce3;

} 

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript">

    jQuery (function ()

    {

        $ ("div.content").click (function ()

        {

            var $self = $ (this).attr ("id");

            var $check = $ ("input#inputid" + $self);

            if (!!$check.prop ("checked"))

            {

                $check.prop ("checked", false);

                $ (this).css (

                {

                    "color" : "black"

                });

            }

            else

            {

                $check.prop ("checked", true);

                $ (this).css (

                {

                    "color" : "red"

                });

            }

        });

        $(".color").find("tr").each(function(i){this.style.backgroundColor=['#fff','#eee'][i%2]});//一行为白色，一行为灰色

        $(".color").find("tr").mouseover(function(){

            $(this).css("backgroundColor","#6699CC");

        });

        $(".color").find("tr").mouseout(function(){

           $("tr:even").css("backgroundColor","#fff"); //偶数行的颜色

           $("tr:odd").css("backgroundColor","#eee");  //奇数行的颜色

        });

                //当鼠标滑入时将div的class换成divOver

        $('.divbox').hover(function(){

                $(this).addClass('divOver');

            },function(){

                //鼠标离开时移除divOver样式

                $(this).removeClass('divOver');

            }

        );

    });

</script>

</head>

<body>

<center>

    <input id="inputid1" type="checkbox" />aa<div class="content" id="1">1111</div>

    <div id="results">11</div>

    <div id="results2">23</div>

    <table width="200" border="0" cellspacing="1" bgcolor="#eeeeee" class="color">

      <tr>

        <td>&nbsp;</td>

        <td>&nbsp;</td>

      </tr>

      <tr>

        <td>&nbsp;</td>

        <td>&nbsp;</td>

      </tr>

      <tr>

        <td>&nbsp;</td>

        <td>&nbsp;</td>

      </tr>

      <tr>

        <td>&nbsp;</td>

        <td>&nbsp;</td>

      </tr>

      <tr>

        <td>&nbsp;</td>

        <td>&nbsp;</td>

      </tr>

      <tr>

        <td>&nbsp;</td>

        <td>&nbsp;</td>

      </tr>

    </table>

<br/><hr/><br/>

</center>

    <div id="menu">

        <div class="divbox">区块A</div>

        <div class="divbox">区块B</div>

        <div class="divbox">区块C</div>

    </div>

</body>

</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. 关于消除超长的case列表的一个思路

    最近项目里面涉及和低层通信的一个模块,因为需要定义通信协议,然后一大堆指令,定义一个枚举的话就能看到几十上百的数据项,匹配操作的时候,那么问题来了,尼玛,这么多的case看着就头晕,就有了一个想法:怎 ...

  2. [原创]pg_shard使用场景及功能测试

    pg_shard是一个PostgreSQL的sharding extension.可以用于Shards.Replicates tables和高可用.它可以在不修改Applications的情况下无缝分 ...

  3. Swift 中使用Nimble 库进行单元测试

    Nimble 从字面上看是 敏捷,灵活 的意思.Nimble 是一个库,一个 断言库.这个库一般用于单元测试.Xcode 6 为我们集成了 XCTest 单元测试库.在正式介绍 Nimble 之前,我 ...

  4. 55.ERROR:Place:1136 - This design contains a global buffer instance…… non-clock load pins off chip

    ISE在布局布线时,出现下图所示错误. 对于"clock_dedicated_route”错误原因有两种情况: 1.  就是有一个时钟你没有放到全局时钟或者局部时钟的引脚,布局的时候不能把它 ...

  5. JAVA类与对象（九）------多态

    多态是同一个行为具有多个不同表现形式或形态的能力.多态性是对象多种表现形式的体现. 多态存在的三个必要条件: 继承 重写 父类引用指向子类对象 例:Parent p = new Child(); 当使 ...

  6. [shell基础]——cut命令

    cut命令常见选项

  7. 团队开发——SCRUM报告（一）

    一.成员介绍 队长:胡亚宝 PM:曹美娜 成员:焦燕.袁亚姣.黄亚萍 二.sprint会议 由于之前是一五一小长假,所以距离上次会议中间隔了很长时间,这里在对上次会议做一下简单的汇总 在上次会议上我们 ...

  8. Bootstrap入门三：页面排版

    在Bootstrap中,页面的排版都是从全局的概念上出发,定制了主体文本.强调文本.标题.Code风格.按钮.表单.表格等格式,并运用CSS3的@font-face和伪元素一起实现了一套icon主题. ...

  9. Linux 硬盘分区、分区、删除分区、格式化、挂载、卸载

    Linux 虽然一直都有在玩,但是对硬盘操作确实不是很熟悉今天有空,就整理了下. 1,创建分区 先查看下是否有磁盘没有分区 fdisk -l 其中第一个框和第二个框,是已经分好区的磁盘,第三个硬盘没有 ...

  10. 【BZOJ】【4011】【HNOI2015】落忆枫音

    拓扑排序+DP 题解:http://blog.csdn.net/PoPoQQQ/article/details/45194103 http://www.cnblogs.com/mmlz/p/44487 ...