收藏
批改状态：合格
老师批语：
attr（）的使用方式方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性与自定义属性操作：arrt()和removeArrt()</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow:0px 0px 30px blue ;
}
</style>
</head>
<body>
<img src="images/k.jpg" width="200" alt="凯"
title="王者荣耀：凯" id="pic" data-name="人物" >
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 预备知识：读取器 设置器
// 1.有一些函数，可以根据参数的数量不同，执行不同的功能，返回不同的值，类似于功能重载
// 2.传入一个参数，执行读取操作getter，返回该参数的值，叫读取器/获取器
// 3.传入二个参数，执行赋值操作setter，修改当前参数的值，叫设置器/修改器
// 4.这种根据参数个数决定执行操作类型的方法，在jQuery中非常多，得多留意
//1.attr():元素属性的获取与设置
//必须传参
// var res =$('img').arrt()
//单参数为获取：当前属性的值
var res = $('img').attr('width')
//双参数为获取：第一个是属性名，第二个是要设置的新值
var res = $('img').attr('width', '100')
var res = $('#pic').attr('style','border-radius: 50%;box-shadow:0px 0px 30px blue ')
//由此可见，attr（）是典型的集读取器与设置器二合一的方法
//attr可以获取到元素的自定义属性
//在html5中，可以前缀data-给标签添加用户自定义属性
var res = $('#pic').attr('data-name')
//attr()的属性值，还支持回调函数
$('#pic').attr('width',function(){ return 200+100})
//注意：回调函数返回的数值类型，会自动转为字符串类型再赋值给width属性
var res = $('#pic').attr('width')
//2.removeAttr():删除元素属性
//删除图片的内联样式属性style
$('#pic').removeAttr('style')
//可以删除多个属性，多个属性之间用空格分开，返回当前元素的状态
var res = $('#pic').removeAttr('alt title data-name')
//在控制台查看结果：
console.log(res)
</script>
</html>点击 "运行实例" 按钮查看在线实例
CSS的使用方式方法以及快捷方法:width(),height(),offset(),position().：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置内联样式css()</title>
<style type="text/css">
.box{
width: 300px;
height:300px;
background-color: blue;
margin-top:50px;
position: relative;
}
.box1{
width: 100px;
height:100px;
background-color: red;
position: absolute;
top:50px;
left: 50px;
}
</style>
</head>
<body>
<img src="images/yz.jpg">
<div class="box">
<div class="box1"></div>
</div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//css()和attr相似，自带getter / setter
//1.设置样式：css(name[,value])
// var res = $('img').css('width','300')
// var res = $('img').css('border-radius','30%')
// var res = $('img').css('box-shadow','4px 4px 4px red')
// 链式写法
// var res = $('img').css('width','300')
// .css('border-radius','30%')
// .css('box-shadow','4px 4px 4px red')
//使用对象
var res = $('img').css({
'width':'300',
'height':'200',
'border-radius':'50%',
'box-shadow':'4px 4px 4px red'
})
var res = $('img').css('width')
// 字符串转为整数
var res = parseInt($('img').css('width'))
res +=100
var res =$('img').css('width',res+'px')
//3.height(),width()
var res = $('img').css('width')
// var res = $('img').width() ============ parseInt($('img').css('width'))
var res = $('img').width()
var res = $('img').width('300')
var res = $('img').width(200)
// var res = $('img').width('+=100') === $('img').css('width','+=100')
var res = $('img').height()
var res = $('img').height(500)
var res = $('img').height('-=300')
//4.offset（）偏移量
var res = $('img').offset()
var res = $('img').offset().top
var res = $('img').offset().left
var res = $('img').offset({
'top':'50',
'left':'50'
})
//5.position()，左上角的位置
var res = $('.box1').position()
var res = $('.box1').position().left+'px'
//6.scrollLeft返回水平条的位置
// var res = $('.box1').scrollTop()内部框架比外部框架大才能使用
//scrollTOP()返回垂直滚动条的位置
console.log(res)
</script>
</html>点击 "运行实例" 按钮查看在线实例
手写代码：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
