- $.each()：遍历数组、对象、对象数组中的数据
- $.trim()：去除字符串两边的空格
- $.type(obj)：得到数据的类型
- $.isArray(obj)：判断是否是数组
- $.isFunction(obj)：判断是否是函数
- $.parseJSON(obj)：解析json字符串转换为js对象/数组
案例1：演示上面所有方法
一.$工具方法 1.1 $.each() 用于对象.数组.对象数组 ---定义对象 {} k:name v:瑶瑶 let stu={"name":"瑶瑶","age":10}; console.info(stu.name,stu.age); $.each(stu,function(k,v){ console.info(k,v); }) 定义数组 [] let arr=["哈哈","学习","Thanks♪(･ω･)ﾉ"] $.each(arr,function(i,a){//下标,元素 console.info(i,a); }) 定义对象数组 [{},{}] let stus=[{"name":"瑶瑶","age":10},{"name":"(宝ᴗ宝)","age":11}]; $.each(stus,function(i,stu){ console.info(stu.name,stu.age);//① $.each(stu,function(k,v){//② console.info(v); }) }) 1.2 $.trim() 去除字符串前后的空格 let stu=" 很好喝 "; console.info($.trim(stu).length); 1.3 $.type() 得到其数据类型 不管是你整型还是非整型都是number let str="aa"; string let str="12.3"; number let str={"name":"瑶瑶","age":10}; object let arr=["哈哈","学习","Thanks♪(･ω･)ﾉ"] array 数组 let stus=[{"name":"瑶瑶","age":10},{"name":"(宝ᴗ宝)","age":11}]; array 数组 console.info($.type(stus)); 1.4 $.isArray() 判断是否是数组 let stu={"name":"瑶瑶","age":10}; false let arr=["哈哈","学习","Thanks♪(･ω･)ﾉ"] true console.info($.isArray(arr)); 1.5 $.isFunction() 判断是否是函数 let stu={"name":"瑶瑶","age":10}; false console.info($.isFunction(stu)) console.info($.isFunction(myf)) true 不要括号 1.6 $.parseJSON() 将json字符串转换为js对象/数组 对象字符串 let stuStr='{"name":"瑶瑶","age":10}'; console.info($.type(stuStr));//字符串 将这个对象字符串--->js的对象 let stu= $.parseJSON(stuStr); console.info($.type(stu)); //对象 console.info(stu.name,stu.age); 对象数组字符串 let stusStr = '[{"name":"瑶瑶","age":10},{"name":"(宝ᴗ宝)","age":11}]'; console.info($.type(stusStr));//string let stus = $.parseJSON(stusStr); console.info($.type(stus));//array 遍历对象数组 $.each(stus,function(i,d){ $.each(d,function(i,s){ console.info(s) }) });
二.jQuery属性和CSS
属性
1.attr()：获取某个标签属性的值，或设置某个标签属性的值
2.removeAttr()：删除某个标签属性
3.addClass()：给某个标签添加class属性值
4.removeClass():删除某个标签class属性值
5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选
6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）
7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
2.1 attr() 拿属性值&设置属性对应属性值 let mpath=$("#aa").attr("width");//拿值 console.info(mpath); $("#aa").attr("src","img/28.jpg");//设值 // 2.2 removeAttr() 移除属性 $("#aa").removeAttr("width"); // 2.3 addClass() 增加属性class值 $("#aa").addClass("xx"); //叠加 $("#aa").attr("class","xx"); //覆盖 案例3: 优化表格隔行换色 $("table tr:even").addClass("aaa"); $("table tr:odd").addClass("bbb"); // 2.4 removeClass() 移除样式 不放参数是指移除所有的样式 放参数移除指定的样式 class仍然在 $("#aa").removeClass(); //2.5 prop()和attr()的区别 $("#aa").attr("name","abc"); $("#aa").prop("name","abc"); //2.6-2.8 val() text() html() 区别 let str = $("#tt").val();//拿值 alert(str); $("#tt").val("噜啦噜啦嘞");//赋值 拿值 let stu = $("p").text();//纯文本 console.info(stu); ②html let stu1 = $("p").html();//能够拿到包含的子标签 console.info(stu1); 赋值 $("p").text("<font color='red'>喜洋洋在干什么<font/>");//纯文本 $("p").html("<font color='red'>喜洋洋在干什么<font/>");//能够拿到包含的子标签 <table border="1px" width="400px"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>
案例4：实现购物车多选/取消多选操作
<input type="checkbox" value="看电视" class="ck" />看电视 <input type="checkbox" value="唱歌" class="ck" />唱歌 <input type="checkbox" value="睡觉" class="ck" />睡觉 <input type="button" value="全选" id="qx" /> <input type="button" value="取消全选" id="qxqx" /> //案例4: 实现全选和取消全选操作 // $("#qx").click(function(){ // $(".ck").prop("checked",true); // }) // $("#qxqx").click(function(){ // $(".ck").prop("checked",false); // })
CSS属性
1.css()：设置标签的css样式
1.1获取样式值：css("样式名")
1.2设置单个样式：css("样式名","样式值")
1.3设置多个样式：css({"样式名"："样式值"，"样式名"："样式值"})
案例5：使用css属性设置标签的样式
//二.CSS let s = $("font").css("color"); //拿值 console.info(s); // rgba:red green blue 透明度 $("font").css("background","rgba(233,110,88,1)");//单个属性 $("font").css({"background":"yellow","color":"red"}) <p>流程你还差<font color="pink">都会好的</font>辅导合法</p> <hr color="orange" /> <input id="tt" value="哈哈" /> <img src="img/18.jpg" width="200px" id="aa" class="yy" />
