js进阶 11-2 jquery属性如何操作
一、总结
一句话总结：jquery中的属性用attr方法表示。jquery中都是方法。
1、jquery中的属性的增删改查操作？
只需要两个方法，
attr()：增改查
removeAttr()：删
2、jquery中attr()方法和css()方法设置属性的区别？
css方法的更加精确，有单位，如果如果img中没有设置width的话，attr方法弄不到，css方法照样可以
26 alert($('img').attr('width'))
27 //alert($('img').css('width'))
3、jquery如何动态改变元素属性，比如图片不同的高？
使用函数
使用函数来设置属性/值,语法：$(selector).attr(attribute,function(index,oldvalue))
37 $('#btn3').click(function(){
38 $('img').attr('width',function(index,value){
39 return value*(index+1)/3
40 })
41 })
二、jquery属性如何操作
1、相关知识
属性操作
- attr() 设置或返回匹配元素的属性和值.
返回被选元素的属性值,语法：$(selector).attr(attribute)
设置被选元素的属性和值,语法：$(selector).attr(attribute,value)
使用函数来设置属性/值,语法：$(selector).attr(attribute,function(index,oldvalue))
- removeAttr() 从元素中移除指定的属性,语法：$(selector).removeAttr(attribute)
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文档</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 <style> 10 </style> 11 </style> 12 </head> 13 <body> 14 <img src="HTML5.png" alt="" width="100"> 15 <img src="HTML5.png" alt="" width="100"> 16 <img src="HTML5.png" alt="" width="100"> 17 <input type="button" id="btn1" value="获取"> 18 <input type="button" id="btn2" value="设置1"> 19 <input type="button" id="btn3" value="设置2"> 20 <input type="button" id="btn4" value="删除"> 21 22 <script> 23 $(function(){ 24 //获取元素的属性值 25 $('#btn1').click(function(){ 26 alert($('img').attr('width')) 27 //alert($('img').css('width')) 28 }) 29 $('#btn2').click(function(){ 30 //$('img').attr('width','200') 31 $('img').attr({ 32 'width':'150', 33 'height':'300', 34 'border':'5px' 35 }) 36 }) 37 $('#btn3').click(function(){ 38 $('img').attr('width',function(index,value){ 39 return value*(index+1)/3 40 }) 41 }) 42 $('#btn4').click(function(){ 43 $('img').removeAttr('border') 44 }) 45 46 }) 47 </script> 48 </body> 49 </html>