jquery 学习 五(3) 基础DOM和CSS操作
参考资料:李炎恢老师的视频 、w3cschool 、锋利的jquery、
拷上次笔记到文件夹到'5基础DOM和CSS操作3'中,
五.CSS方法
先了解一下如下表:
$(function(){
alert($('div').css('width')); //上节课想要获取DI元素宽度的做法
alert($('div').width()); //获取DIV元素宽度
//以上两种方法有什么区别呢? 加上看它们获取到类型
alert( typeof($('div').css('width')));
alert( typeof($('div').width()));
//通过观察发现前面是string ;后面是number 如果前面要想跟后面这种一样,需要强转一下
alert( typeof(parseInt($('div').css('width'))));
alert($(document).width());
alert($(window).width());
$('div').width(500); //设置网页宽度不需要加px,默认是加上的
$('div').width(function(index,value){ //通过匿名函数动态设置DIV宽度
return value/10;
});
});
2 height()
$(function(){
//alert($('div').css('height')); //上节课的做法
//alert($('div').height());
//$('div').height('500');
$('div').height(function(index,value){
return value/2;
});
});
3、内外边距和边框尺寸方法
页面上分别加上width; padding; border; margin;来观察实现效果 注意,实验的时候要一个一个的加,能更好的看出效果
index.html
<body>
<div title = 'aaa' style="width:200px;padding:100px;border:100px solid #ccc;margin:100px">
<strong> www.csdn.com</strong>
</div>
<div title = 'bbb' class='green'>
<strong> www.baidu.com</strong>
</div>
</body>
$(function(){
//页面设置200 padding border margin
alert($('div').width()); // 200 200 200 200
alert($('div').innerWidth()); // 200 400 200 400
alert($('div').outerWidth()); // 200 400 600 600
alert($('div').outerWidth(true));// 200 400 600 800 //包含外边距
});
4、元素偏移的方法:
offset();
$(function(){
//alert($('div').offset().left); //div距离左边的距离
// alert($('div').offset().top); //div距离上边的距离
//设置绝对点 index.html style = "position:absolute;top:10px"
// alert($('div').offset().top) //这里显示就为10
//strong 离视口的距离是多少呢
// alert($('strong').offset().top) //这里显示也是10,跟视频效果不一样,
// strong 设置绝对点 style = "position:absolute;top:10px"
// div 设置相对点 style = "position:relative;"
//alert($('strong').offset().top) //这里显示18 因为div距视口默认是8而strong距div是10 所以strong距视口为 18
//strong 绝对点 top改为 1px 测试效果
//alert($('strong').offset().top) //这里显示9 跟预想效果一样 距视口距离为1+8=9
});
position();
$(function(){
// alert($('div').position().top) //div距离body的距离 8
// alert($('div').offset().top) //div距离视口的距离 8 这两个是没有变化的
//看一下strong
alert($('strong').offset().top) //strong距离视口的距离9
alert($('strong').position().top) //strong距离父元素 div的距离1
});
scrollTop();
//注意,测试滚动条时,页面多加点内容出现滚动条即可
$(function(){
//滚动条是距离窗口的位置,所以这里用window来测试
alert($(window).scrollTop());
$(window).scrollTop(300);
});