粱贸颂水伤挞诞徘伤保戳实感
原始结构：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="../images/jsy.jpg"> </body> </html>
执行：
1.设置样式 css(name,value) css()与attr()类似，自带获取器和设置器
设置宽度为200px,以下3种方式均可：
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
// $('img').css('width','200')
// $('img').css('width','200px')
$('img').css('width',200)
</script>
执行：
增加类样式：
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css('width','200px')
$('img').css('border-radius','10%')
$('img').css('box-shadow','5px 5px 5px #888')
</script>
执行：
链式操作：
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css('width','200px')
.css('border-radius','10%')
.css('box-shadow','5px 5px 5px #888')
</script>
执行：
使用json结构简化：
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css({
'width':'200px',
'border-radius':'10%',
'box-shadow':'5px 5px 5px #888'
})
</script>
执行：
修正，json要注意改为双引号
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css({
"width":"200px",
"border-radius":"10%",
"box-shadow":"5px 5px 5px #888"
})
</script>
执行：
获取图片的宽度，此时css()充当的是获取器
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css({
"width":"200px",
"border-radius":"10%",
"box-shadow":"5px 5px 5px #888"
})
var res=$('img').css("width")
console.log(res)
</script>
注意，此时获取的宽度是字符串
将获取的值转化为int型
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css({
"width":"200px",
"border-radius":"10%",
"box-shadow":"5px 5px 5px #888"
})
var res=parseInt($('img').css("width"))
console.log(res)
</script>
执行：
宽度加100
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css({
"width":"200px",
"border-radius":"10%",
"box-shadow":"5px 5px 5px #888"
})
var res=parseInt($('img').css("width"))
res+=100
$('img').css("width",res)
var res2=$('img').css("width")
console.log(res2)
</script>
执行：
3.width()和height()方法，获取元素宽高
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css({
"width":"200px",
"border-radius":"10%",
"box-shadow":"5px 5px 5px #888"
})
var res=$('img').width()
console.log(res)
</script>
执行：
直接设置宽度为300px
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css({
"width":"200px",
"border-radius":"10%",
"box-shadow":"5px 5px 5px #888"
})
// var res=$('img').width('300px')
// var res=$('img').width('300')
var res=$('img').width(300)
console.log(res)
</script>
执行：
在200px上加100px
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css({
"width":"200px",
"border-radius":"10%",
"box-shadow":"5px 5px 5px #888"
})
var res=$('img').width("+=100")
console.log(res)
</script>
执行：
$(‘img’).width(“+=100”)等价于$(‘img’).css(“width”,”+=100″)
除了宽高之年,获取元素当前的位置也是经常要用到的操作,jquery也定义了快捷方法
4.获取元素的位置:offset(),返回的是一个对象
查看元素距离顶部和左侧的距离
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css({
"width":"200px",
"border-radius":"10%",
"box-shadow":"5px 5px 5px #888"
})
var res=$('img').offset()
console.log(res)
</script>
执行：
可以知道距离底部和左侧都为7.986
获取距离顶部的距离：
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css({
"width":"200px",
"border-radius":"10%",
"box-shadow":"5px 5px 5px #888"
})
var res=$('img').offset().top
console.log(res)
</script>
执行：
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css({
"width":"200px",
"border-radius":"10%",
"box-shadow":"5px 5px 5px #888"
})
var res=$('img').offset().top+'px'
console.log(res)
</script>
获取带单位的值：
5.查看绝对定位元素的偏移量: position() 获取的偏移量是相对于父元素的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<img src="../images/jsy.jpg">
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('img').css({
"width":"200px",
"border-radius":"10%",
"box-shadow":"5px 5px 5px #888"
})
var res=$('.box2').position()
var res=$('.box2').position().left
var res=$('.box2').position().left+"px"
console.log(res)
</script>
执行：
类似的还有scrollLeft()返回水平滚动条位置,scrollTop()返回垂直滚动条的位置
菜遂惦练乐尸悸响半椽郴背书