收藏
批改状态：未批改
老师批语：
attr()：
使用attr()时attr()中需要传参数，否则会报错。传入一个参数,执行读取操作getter,返回该参数的当前值,叫:读取器/获取器；传入二个参数,执行赋值操作setter,修改当前参数的值,叫:设置器/修改器
attr()可以获取到元素的自定义属性，attr()的属性值,还支持回调函数
removeAttr()可以删除多个属性,自定义属性也可以删除，多个属性之间用空格分开,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr和remove用法</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 获取img中width的值 注意：attr中必须传参数，否则会报错
var res= $('img').attr('width')
// 改变img中width的值
var res= $('img').attr('width','500')
// 添加样式
var res= $('img').attr('style','border-radius: 50%;box-shadow:2px 2px 2px #888')
// var res= $('img').attr('width')
// 在html5中可以通过data-前缀给标签添加用户自定义属性，用attr可以获取到元素自定义属性
var res = $('img').attr('data-a')
//attr()的属性值,还支持回调函数
$('img').attr('width', function(){return 300+50})
//注意: 回调返回的数值类型,会自动转为字符类型再赋值给width属性
var res = $('img').attr('width')
// --------------删除元素的属性 removeAttr -----------
// 删除多个用空格隔开，可以删除自定义属性
var res = $('img').removeAttr('width alt data-a style')
console.log(res)
})
</script>
</head>
<body>
<img src="fbb.jpg" id="s" width="200" data-a="美女" alt="范冰冰" title="范冰冰美女">
</body>
</html>点击 "运行实例" 按钮查看在线实例
prop()和removeProp()的用法
prop()
只能获取到元素的原生属性，例如alt、title，不能获取用户自定义的属性！但是用户动态设置自定义属性之后是可获取到！
removeProp()
不能同时移除多个属性,一次只能删除一个属性，不能删除原生属性但可删除自定义属性，如果要用removeProp()删除原生属性,大多情况下将值设置为false即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prop和removeProp用法</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 获取img中width的值 注意：prop中必须传参数，否则会报错
var res= $('img').prop('width')
// 获取不到自定义属性
var res = $('img').prop('data-a')
// 动态设置之后是可以获取到的
var res = $('img').prop('data-a','bbb')
var res = $('img').prop('data-a')
// 不能删除原生属性，注意不能删除多个，只能一个个删除
var res =$('img').removeProp('alt')
// 可以删除自定义属性
var res =$('img').removeProp('data-a')
// 如果要用removeProp()删除原生属性,大多情况下将值设置为false即可
var res =$('img').removeProp('alt',false)
var res = $('#pic').prop('alt')
console.log(res)
})
</script>
</head>
<body>
<img src="fbb.jpg" id="s" width="200" data-a="美女" alt="范冰冰" title="范冰冰美女" data-a="a">
</body>
</html>
<!-- <script type="text/javascript">
var res= $('#s').attr('src')
console.log(res)
</script> -->点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
