Correction status:Uncorrected
Teacher's comments:
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> -->
点击 "运行实例" 按钮查看在线实例