实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.属性和自定义属性的方法：attr()/removeAttr()</title>
</head>
<body>
<img src="../images/1.jpg" width="200" alt="美女" title="明星" id="pic" data-nation="中国">
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 预备知识：读取器，设置器
// 1，有一些函数，可以根据参数的不同，执行不同的功能，类似于功能重载。
// 2，传入一个参数，执行读取操作getter,读取器/获取器
// 3，传入二个参数，执行设置操作setter，设置器/修改器
//1. attr():元素属性的获取与设置
//attr():必须传参数
//传入一个参数
var res = $('#pic').attr('src')
// 传入两个参数：设置
var res = $('#pic').attr('src','../images/2.jpg')
var res = $('#pic').attr('style','border-radius:50%;box-shadow:2px 2px 2px #888')
// attr()获取自定义属性
var res = $('#pic').attr('data-nation')
// attr()第二个参数支持回调函数
$('#id').attr('width',function(){
return 200+50
})
// 2,删除元素的属性：removeAttr()
// var res = $('#pic').removeAttr('style')
// 删除多个属性，中间用空格隔开即可
var res = $('#pic').removeAttr('alt title')
//控制台输出运行结果：
console.log(res)
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.设置内联样式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/2.jpg" >
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// css()和attr()类似，自带getter/setter,相当于给元素增加了一个style属性。
// 1，设置样式：css(name[,value])
// var res = $('img').css('width',200)
// var res = $('img').css('border-radius','50%')
// var res = $('img').css('box-shadow','3px 3px 3px #888')
// 链式操作
// var res = $('img').css('width',200)
// .css('border-radius','50%')
// .css('box-shadow','3px 3px 3px #888')
// js对象操作方式
var res = $('img').css({
'width':'200px',
'border-radius':'50%',
'box-shadow':'3px 3px 3px #888'
})
// 获取当前图片的宽度
// var res = $('img').css('width')
// 获取图片宽度并且转换为数值类型
var res = parseInt($('img').css('width'))
res +=100
// 把重新得到的宽度重新设置给图片。
var res = $('img').css('width',res+'px')
// 获得元素的宽度和高度,height(),width()
var res = $('img').width()
//如果输入数值则是修改大小。
var res = $('img').width(200)
// var res = $('img').width('200px')
// 在原来的大小上面增加100
var res = $('img').width('+=100')
// 4.offset（）获取位置信息
var res = $('img').offset()
var res = $('img').offset().top+'px'
var res = $('img').offset().top
// 5.position() 获取绝对定位的信息
var res = $('.box2').position()
var res = $('.box2').position().left
var res = $('.box2').position().left+'px'
//scrollLeft() 返回水平滚动条的位置
// scrollTop() 返回垂直滚动条的位置
//控制台输出运行结果：
console.log(res)
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
