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>

 

posted @ 2014-05-10 11:00  忘忧般若汤  阅读(230)  评论(0)  编辑  收藏  举报