Blogger Information
Blog 87
fans 0
comment 0
visits 59357
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第十五节课作业:1.属性与自定义属性操作:attr()和removeAttr()
黄忠倚的博客
Original
825 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.属性与自定义属性操作:attr()和removeAttr()</title>
</head>
<body>
	<img src="./images/zly.jpg" width="200" alt="美女" titile="明星" 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,修改当前参数的值,叫:设置器/修改器
//4.这种根据参数个数决定执行操作类型的方法,在jQuery中非常多,大家要留意
//
//1.attr():元素属性的获取与设置
//必须传参
// var res = $('img').attr()

//单参数为获取:当前属性的值
var res = $('pic').attr('src')
//
//双参数为获取,第一个是属性名,第二个是要设置的新值
$('#pic').attr('src','./images/gyy.png')
$('#pic').attr('style','border-radius:50%;box-shadow:2px 2px 2px #888')
//
//由此可见,attr()是典型的集读取器与设置器二合一的方法
//
//attr()可以获取到元素的自定义属性
//html5中,可以通过data-前缀给标签添加用户自定义属性
var res = $('#pic').attr('data-nation')
//attr()的属性值,还支持回调函数
//$('#pic').attr('width',function(){return 100+50})
//注意:回调返回的数值类型,会自动转为字符类型再赋值给width属性
var res = $('#pic').attr('width')
//
//2.removeAttr():删除元素的属性
//删除图片的内联样式属性style
$('#pic').removeAttr('style')
//可以删除多个属性,多个属性之间用空格分开,返回当前元素的状态
var res = $('#pic').removeAttr('alt title data-nation')
//
//在控制台查看运行结果
console.log(res)
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

作业地址:http://mi-888.com/PHP/zuoye/20180404/1.html

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post