[第七季]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.代码