[第七季]4.控制DIV的选取

最新推荐文章于 2022-11-21 14:03:40 发布

低调的嚣张的程序员

最新推荐文章于 2022-11-21 14:03:40 发布

阅读量313

点赞数

分类专栏： 009 JQuery

本文链接：https://blog.csdn.net/zeephom/article/details/77130787

版权

009 JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

(1)设置四个div,宽度为200,高度为500,边框宽度为1,形式为实线,颜色是黑色,设置往右边堆积
(2)编程控制在div里面,div变成另外一个颜色,出来变成另外一个颜色
(3)用hover()进行

5.自测代码

2.课堂笔记

(1)设置四个div,宽度为200,高度为500,边框宽度为1,形式为实线,颜色是黑色,设置往右边堆积
<style type="text/css">
    div[id^="div"]
    {
        width:200px;
        height:500px;
        border:1px solid black;
        background-color:#FF6;
        float:left;
        margin-left:5px;
    }
</style>
</head>

<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
</body>
</html>
(2)编程控制在div里面,div变成另外一个颜色,出来变成另外一个颜色
<script language="javascript">
    $(function(){
        $("div[id^='div']").mouseover(function(){
            $(this).css("background-color","red");
        });
        $("div[id^='div']").mouseout(function(){
            $(this).css("background-color","#FF6");
        })
    }
    )
</script>
(3)用hover()进行
<script language="javascript">
    $(document).ready(function(e) {
        $("div[id^='div']").hover(function(e){
            $(this).css("background-color","blue");
        },function(e){
            $(this).css("background-color","#FF6");
        })
    });
</script>