重点:
1、基础的jquery写法,格式为:$('标签').css('值')
2、链式写法:
var res=$('img')
.css('width','200px')
.css('height','200px')
.css('border-radius','50%')
3、parseInt(包裹),parseInt是用于转化整个索引元素为数值的函数方法
4、字符串拼接: var res=$('img').css('width',res+'px')
5、+=,X+=2是等价于X=X+2
6、offset()用于获取某个元素的偏移
7、pisition()用于获取某个函数的定位
-
-
-
以下为代码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<img src="img/001.jpg"/>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('img').css('width','300px')
// 最基础的内联样式修改方法,格式为:$('标签').css('值')
var res=$('img').css('width','200px')
// var res=$('img').css('width')
//以下为链式操作方法
var res=$('img')
.css('width','200px')
.css('height','200px')
.css('border-radius','50%')
//以下为js结构操作方法
// var res=$('img').removeAttr('style')
var res=$('img').css({
'border-radius':'50%',
'width':'200px',
'box-shadow':'2px 2px 2px black',
})
var res=$('img').removeAttr('style')
var res=parseInt($('img').css('width'))
//parseInt写法主要包裹了某个索引,并将索引转化为数值
res+=100
//数值res为200,res+=100等价于res=res+100(res=200+100)
var res=$('img').css('width',res+'px')
//增加宽度并使宽度赋上单位Px
console.log(res)
//
var res=$('img').width(100)
//函数 width()写法,简单的获取到width
res+=200
//res赋值了100,此处=300
var res=$('img').width(res+500,'px')
console.log(res)
</script>
</html>