<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="获取属性" id="btn1">
<input type="button" value="设置属性" id="btn2">
<input type="button" value="移除属性" id="btn3">
<img src="../Images/1.jpg" alt="周五晚睡1" title="周五晚睡" ac='ac'>
</body>
</html>
<script src="../JQuery/jquery-1.12.4.js"></script>
<script>
$(function(){
//jQuery操作属性: attr() removeAttr()
//1.设置属性
$('#btn2').click(function(){
//设置单属性
// $('img').attr('src','../Images/2.jpeg');//以前有src属性，更改这个属性
// $('img').attr('ac','自定义的');//修改自定义属性
// $('img').attr('dd','添加的');//如果元素原来没有这个属性，那就是添加属性
//设置多属性
$('img').attr({
src:'../Images/2.jpeg',
ac:'修改后的自定义',
dd:'添加的'
})
})
//2.获取属性
$('#btn1').click(function(){
$('img').attr('src');//自带的属性可以获取
$('img').attr('ac');//自定义的属性可以获取
$('img').attr('bbbbb');//如果没有这个属性获取到的值就是undefind，attr()设置的属性是可以获取的
})
//3.移除属性
//移除单属性
$('#btn3').click(function(){
$('img').removeAttr('alt');
})
//移除多属性
$('#btn3').click(function(){
$('img').removeAttr('alt ac');
})
})
</script>
作业：构建网站 - 知识准备 - jQuery - attr()，removeAttr()
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章