4月4号juqery作业 - 作业 - php中文网博客

首页 > 博客列表 > 4月4号juqery作业

博主信息

博文 24

粉丝 0

访问量 18775

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

4月4号juqery作业

小蚂蚁的博客

原创

777人浏览过

<!DOCTYPE html>

<html>

<head>

<title>内联样式css()</title>

.box1{

width: 300px;

height: 300px;

background-color: wheat;

position: relative;

}

.box2{

width: 100px;

height: 100px;

background-color:lightgreen;

position: absolute;

top:50px;

left: 100px;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

// css()和attr()类似，自带getter/setter

// 设置样式：css(neme[,value])

// var res =$('img').css('width','300px')

// // var res= $ ('img').css('width',200)

// var res =$('img').css('border-radius','10%')

// var res =$('img').css('box-shadow','5px 5px 5px #888')

// // 链似操作

// var res=$('img').css('width','300px')

// .css('border-radius','10%')

// .css('box-shadow','5px 5px 5px #888')

var res=$('img').css({

'width':'200px',

'border-radius':'40%',

'box-shadow':'5px 5px 5px #888'

})

// // 杰森改法

// var res=$('img').css({

// "width":"200px",

// "border-radius":"40%",

// "box-shadow":"5px 5px 5px #888"

// })

var res =parseInt($('img').css('width'))

res+=200

var res=$('img').css('width',res+'px')

var res=$('img').css('width')

// height(),width()

// var res=$('img').width(200)

// var res=$('img').width('200pt')

var res=$('img').width(200)

// 等于43行代码

// 增加wihdth长度

var res=$('img').width('+=50')

// var res=$('img').width('width','+=50')

// offset()

var res=$('img').offset()

// 获取与上边的距离想要获得的是数值请在top后面加+px

var res=$('img').offset().top

// position()

var res= $('box2').position()

var res= $('box2').position()+'px'

// 控制台输出

console.log(res)

</script>

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内联样式css()</title>
	<style type="text/css">
     .box1{
     	width: 300px;
     	height: 300px;
     	background-color: wheat;
     	position: relative;
     }
     .box2{
     		width: 100px;
     		height: 100px;
     		background-color:lightgreen;
     		position: absolute;
     		top:50px;
     		left: 100px;
     	}
     }
	</style>
</head>
<body>
<img src="../images/hg.jpg">
	<div class="box1">
    <div class="box2"></div>
	</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  // css()和attr()类似，自带getter/setter
  // 设置样式：css(neme[,value])
//   var res =$('img').css('width','300px')
// // var  res= $ ('img').css('width',200)
//  var res =$('img').css('border-radius','10%')
//   var res =$('img').css('box-shadow','5px 5px 5px #888')

// // 链似操作
//    var res=$('img').css('width','300px')
//                     .css('border-radius','10%')
//                      .css('box-shadow','5px 5px 5px #888')



  var res=$('img').css({
  	'width':'200px',
  	'border-radius':'40%',
  	'box-shadow':'5px 5px 5px #888'
  })

  // // 杰森改法
  //  var res=$('img').css({
  // 	"width":"200px",
  // 	"border-radius":"40%",
  // 	"box-shadow":"5px 5px 5px #888"
  // })
   var res =parseInt($('img').css('width'))

   res+=200
   var res=$('img').css('width',res+'px')
   var res=$('img').css('width')



// height(),width()
  
  // var res=$('img').width(200)
  // var res=$('img').width('200pt')
  var res=$('img').width(200)
  // 等于43行代码
  // 
   // 增加wihdth长度
   var res=$('img').width('+=50')  
   // var res=$('img').width('width','+=50')  
  // offset()
 var res=$('img').offset()
 // 获取与上边的距离想要获得的是数值请在top后面加+px
 var res=$('img').offset().top

// position()
  var res= $('box2').position()
  var res= $('box2').position()+'px'
// 控制台输出
  console.log(res)
  </script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内联样式css()</title>
	<style type="text/css">
     .box1{
     	width: 300px;
     	height: 300px;
     	background-color: wheat;
     	position: relative;
     }
     .box2{
     		width: 100px;
     		height: 100px;
     		background-color:lightgreen;
     		position: absolute;
     		top:50px;
     		left: 100px;
     	}
     }
	</style>
</head>
<body>
<img src="../images/hg.jpg">
	<div class="box1">
    <div class="box2"></div>
	</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  // css()和attr()类似，自带getter/setter
  // 设置样式：css(neme[,value])
//   var res =$('img').css('width','300px')
// // var  res= $ ('img').css('width',200)
//  var res =$('img').css('border-radius','10%')
//   var res =$('img').css('box-shadow','5px 5px 5px #888')

// // 链似操作
//    var res=$('img').css('width','300px')
//                     .css('border-radius','10%')
//                      .css('box-shadow','5px 5px 5px #888')



  var res=$('img').css({
  	'width':'200px',
  	'border-radius':'40%',
  	'box-shadow':'5px 5px 5px #888'
  })

  // // 杰森改法
  //  var res=$('img').css({
  // 	"width":"200px",
  // 	"border-radius":"40%",
  // 	"box-shadow":"5px 5px 5px #888"
  // })
   var res =parseInt($('img').css('width'))

   res+=200
   var res=$('img').css('width',res+'px')
   var res=$('img').css('width')



// height(),width()
  
  // var res=$('img').width(200)
  // var res=$('img').width('200pt')
  var res=$('img').width(200)
  // 等于43行代码
  // 
   // 增加wihdth长度
   var res=$('img').width('+=50')  
   // var res=$('img').width('width','+=50')  
  // offset()
 var res=$('img').offset()
 // 获取与上边的距离想要获得的是数值请在top后面加+px
 var res=$('img').offset().top

// position()
  var res= $('box2').position()
  var res= $('box2').position()+'px'
// 控制台输出
  console.log(res)
  </script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

3.21作业

2018-03-26 18:18:11