微信扫一扫打赏支持

js进阶 11-2 jquery属性如何操作

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、相关知识

属性操作

  1. attr() 设置或返回匹配元素的属性和值.

    返回被选元素的属性值,语法：$(selector).attr(attribute)

    设置被选元素的属性和值,语法：$(selector).attr(attribute,value)

    使用函数来设置属性/值,语法：$(selector).attr(attribute,function(index,oldvalue))

  2. 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>

 

 

 

 

 

 

 

 

 

 

 

 
posted @ 2018-06-18 16:23  范仁义  阅读(389)  评论(0)  编辑  收藏  举报