[第七季]5.常用DIV操作兼论JQuery语法

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

(1)设置两个文本框,分别为高度和宽度,然后设置两个按钮,分别为获取和设置.设置一个div1,然后样式设置为200高和宽.
(2)把JQuery链接进来,然后用选择器编辑函数,获取div1的高度和宽度放到里面去
(3)用其他方法(css)获取高度和宽度
(4)通过JQuery设置高度和宽度
(5)也可以同时设置两个属性
(6)也可以通过链式操作进行设置,并且链式操作可以设置不同的属性

5.自测代码

2.课堂笔记

(1)设置两个文本框,分别为高度和宽度,然后设置两个按钮,分别为获取和设置.设置一个div1,然后样式设置为200高和宽.
(2)把JQuery链接进来,然后用选择器编辑函数,获取div1的高度和宽度放到里面去
<script type="text/javascript">
    $(function()
    {
        //为获取按钮注册事件
        $("#get").click(function()
        {
            $("#ht").val($("#div1").height());
            $("#wd").val($("#div1").width());
        });
    });
</script>

(3)用其他方法获取高度和宽度
$(function()
    {
        //为获取按钮注册事件
        $("#get").click(function()
        {
            //$("#ht").val($("#div1").height());
            //$("#wd").val($("#div1").width());
            $("#ht").val($("#div1").css("height"));
            $("#wd").val($("#div1").css("width"));
        });
    });
(4)通过JQuery设置高度和宽度
<script type="text/javascript">
    $(function()
    {
        //为设置按钮注册时间
        $("#set").click(function()
        {
            $("#div1").height($("#ht").val());
            $("#div1").width($("#wd").val());

            //$("#ht").val($("#div1").height());
            //$("#wd").val($("#div1").width());
        });
    });
</script>
(5)也可以同时设置两个属性
$("#div1").css({height:$("#ht").val(),width:$("#wd").val()});
(6)也可以通过链式操作进行设置,并且链式操作可以设置不同的属性

3.课程效果图

1.代码