a毛 jquery 学习记 5 基础DOM和CSS操作3

最新推荐文章于 2022-05-04 09:51:31 发布

一平米

最新推荐文章于 2022-05-04 09:51:31 发布

阅读量467

点赞数

分类专栏： jquery学习

本文链接：https://blog.csdn.net/pymxb1991/article/details/51176919

版权

jquery学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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);    
});

一平米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
a毛 jquery 学习记 5 基础DOM和CSS操作3

jquery 学习五(3) 基础DOM和CSS操作参考资料：李炎恢老师的视频、w3cschool 、锋利的jquery、拷上次笔记到文件夹到'5基础DOM和CSS操作3'中，五．CSS方法先了解一下如下表： $(function(){ alert($('div').css('width')); //上节课想要获取DI元素宽度
复制链接

扫一扫

专栏目录