码迷,mamicode.com
首页 > Web开发 > 详细

jQuery学习记录1

时间:2014-05-12 13:13:03      阅读:319      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   c   

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

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

 

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

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

 

jQuery学习记录1,布布扣,bubuko.com

jQuery学习记录1

标签:style   blog   class   code   java   c   

原文地址:http://www.cnblogs.com/mitang/p/3720180.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!