JQuery属性操作

Jquery2--属性相关的操作

知识点总结

1、属性
    属性（如果你的选择器选出了多个对象，那么默认只会返回出第一个属性）、

        attr(属性名|属性值)
            - 一个参数是获取属性的值，两个参数是设置属性值
            - 点击加载图片示例
        removeAttr(属性名)
            -删除属性的值
        prop(属性名|属性值)
            - 属性的返回值的是布尔类型
            - 单选，反选，取消的例子
        removeProp(属性名)
            -删除属性的值

    循环：each（两种循环示例）
        - $.each(数组/对象, function(i, v){})
      - $("div").each(function(){})
    CSS类
        - addClass 添加类属性
        - removeClass 移除类属性
        - toggleClass 开关|切换（有就移除，没有就添加）
          灯泡的例子
    HTML代码/文本/值
        没有参数就是获取对应的值，
        有参数就设置对应的值
        - .html()  添加html标签    .html("<span>啦啦啦。</span>")
        - .text()  添加文本        .text("啦啦啦。")
        - .val()
            input :一个参数,获取的是input框里面的值
            checkbox :一个参数，获取的是value的值
            select :
                单选：获取值
                多选：得到的是一个数组，设置的时候也要是数组
一.属性操作

attr()和removeAttr()

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>标签属性操作</title>
 6         <style type="text/css">
 7             div{
 8                 width: 100px;
 9                 height: 100px;
10                 background-color: yellow;
11             }
12         </style>
13     </head>
14     <body>
15         <div title="alex" class="active"></div>
16         <a href="">百度一下</a>
17         <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
18         <script type="text/javascript">
19             $(function(){
20             //attr()方法:
21                 // $("div").attr("title");
22                 //获取属性值
23                 console.log($("div").attr("title"))
24                 //设置属性值
25                 $("div").attr("id","box");
26                 //可以用下面的方式设置类名,但是不建议使用.会把原有的class替换掉
27                 $("div").attr("class","box1");
28                 //可以通过字典的形式,来设置多个值属性值
29                 $("a").attr({"href":"http://www.baidu.com",
30                             "title":"百度"
31                 })
32             //removerAttr():移除属性值
33                 $("div").removeAttr("title");
34                 
35             });
36         </script>
37         
38     </body>
39 </html>

属性值的操作

prop()和removeProp()

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>prop操作</title>
 6     </head>
 7     <body>
 8         <input type="radio" name="sex" id="" value="" checked="abc">男
 9         <input type="radio" name="sex" id="" value="">女
10         <!-- 对于input框来说,如果使用attr()来获取checked的值的话,永远都是"checked" -->
11         <script src="../jQuery/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
12         <script type="text/javascript">
13             console.log($("input[type=radio]").attr("checked"));
14             $(function(){
15                 $("input[type=radio]").prop("checked");
16                 console.log($("input[type=radio]").eq(0).prop("checked"))
17                 $("input[type=radio]").eq(0).prop("key1","aaaaaa");    //设置对象属性
18                 console.log($("input[type=radio]").eq(0)); //查看对象属性
19                 $("input[type=radio]").eq(0).removeProp("key1")
20                 console.log($("input[type=radio]").eq(0));
21             });
22         </script>
23     </body>
24 </html>

prop和removeProp