zoukankan      html  css  js  c++  java
  • jQuery学习记录1

    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>
  • 相关阅读:
    Docker容器常用操作命令(镜像的上传、下载、导入、导出、创建、删除、修改、启动等)详解
    [20191213]toad 12下BIND_AWARE提示无效.txt
    [20191206]隐含参数_db_always_check_system_ts.txt
    [20191127]表 full Hash Value的计算.txt
    [20191127]探究等待事件的本源4.txt
    [20191126]探究等待事件的本源2.txt
    [20191125]oracel SQL parsing function qcplgte 2.txt
    [20191125]探究等待事件的本源.txt
    [20191122]oracel SQL parsing function qcplgte.txt
    [20191119]探究ipcs命令输出2.txt
  • 原文地址:https://www.cnblogs.com/mitang/p/3720180.html
Copyright © 2011-2022 走看看