知识点总结
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>