jQuery工具与方法

最新推荐文章于 2024-05-05 01:18:59 发布

颖涛

最新推荐文章于 2024-05-05 01:18:59 发布

阅读量156

点赞数 2

文章标签： jquery

本文链接：https://blog.csdn.net/m0_67333901/article/details/123605770

版权

一、jQuery工具方法

jQuery中的工具 
1.$.each():遍历数组对象、对象数组中的数据。
2.$.trim():去除字符串两边的空格 
3.$.type(obj):得到数据的类型 
4.$.isArray(obj):判断是否是数组 
5.$.isFunction(obj):判断师是否是函数 
6.$.parseJSON(obj):解析json字符串转化为js对象/数组 
<!DOCTYPE html> 
<html> <head> 
<meta charset="utf-8">
 <title></title>
 </head>
 <body>
 <script src="js/jquery-3.5.1.js">
</script> <script>
 //$.each():遍历数组、对象、对象数组中的数据 //数组 
let arr=[1,2,3,4,5,6,7,8,9,0] 
//对数组求和 
$.each(arr,(a,b)=>{ //a是下标 
//b是元素 console.log("下标",a) console.log("元素",b) }) 
//对象 let person={ name:"张三", sex:"女", age:101 } 
//使用$遍历对象数据 $.each(person,(a,b)=>{ 
//a是属性名 b是属性值 console.log(a,b) }) 
//$.trim():去除字符串两边的空格 console.log($.trim(" abc ").length)
 //replace只去一次 replaceAll去多次 console.log(" a b c ".replaceAll(" ","").length) 
//$.type(obj):得到数据的类型 //arr是数组 person是对象 array数组 console.log(typeof arr)//array(object) console.log(typeof person)//object console.log($.type(arr))//array(object) //$.isArray(obj):判断是否是数组 console.log($.isArray(arr))//true //$.isFunction(obj):判断师是否是函数 function f1(){} console.log($.isFunction(f1))//true /**1. * function f1(){} let f2=f1 //f2是什么？是函数 */ /**2. * function f1(){} * //f2是什么?是(undefined)未定义 */ //java 的序列化和反序列化 //序列化（将对象变成文件） //反序列化（将文件变成对象） //反序列化 //$.parseJSON(obj):解析json字符串转化为js对象/数组 //json是一段文字，string //json就是字符串的对象 let str='{"name":"sb","age":23 }'//json //拿到学生的名字和年龄 console.log(str) //$.parseJSON 把字符串变成js中的对象 let stu=$.parseJSON(str) console.log(stu.name,stu.age) //将person变成json字符串 console.log(JSON.stringify(person)) </script> </body> </html>

二、jQuery属性

1.attr():获取某个标签属性的值，或设置某个标签属性的值 2.removeAttr():删除某个标签属性 3.addClass():给某个标签添加class属性值 4.removeClass():删除某个标签class属性值 5.prop():和attr()类似；区别在于prop用于属性值为Boolean的情况，比如多选 6.html():获取某一个标签体内容（注意：该标签中可以包含子标签） 7.text():获取某一个标签体内容（注意：该标签体不能包含子标签） 8.val():主要用户获取/设置输入框的信息

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .aa{ color: red; background: blue; } </style> </head> <body>  <a href="https://www.baidu.com">点我</a> <button onclick="fn01()">点我更改</button> <button onclick="fn02()">点我移除</button> <button onclick="fn03()">点我添加class</button> <button onclick="fn04()">点我移除class</button> <script src="js/jquery-3.5.1.js"></script> <div> <input onclick="$(':checkbox').prop('checked',this.checked)" type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </div> <div> <input onclick="fn06(this.checked)" type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </div> <div id="d1"> </div> <input type="text" id="n1" value="" /> <script> //1.attr():获取某个标签属性的值，或设置某个标签属性的值 function fn01(){ //使用jQuery修改标签属性的值 $("a").attr("href","https://cn.bing.com") } //2.removeAttr():删除某个标签属性 function fn02(){ //使用jQuery删除标签属性的值 $("a").removeAttr("href") } //3.addClass():给某个标签添加class属性值 // 4.removeClass():删除某个标签class属性值 function fn03(){ $("a").addClass("aa") } function fn04(){ $("a").removeClass("aa") } //5.prop():和attr()类似；区别在于prop用于属性值 //为Boolean的情况，比如多选 function fn06(status){ $(":checkbox").prop("checked",status) } //拿到大于0的所有的多选框 //在js里面是onclick 在jQuery所有的on去掉 $(":checkbox:gt(0)").click(function(){ //this是js对象 let status=this.checked if(!status){ return $(":checkbox").eq(0).prop("checked",status) } //选中了 let f=true $.each($(":checkbox:gt(0)"),(a,b)=>{ f=f&&b.checked }) $(":checkbox").eq(0).prop("checked",f) }) // 6.html():获取某一个标签体内容（注意：该标签中可以包含子标签） $("#d1").html()//读取 $("#d1").html("<b>你好世界</b>")//修改 // 7.text():获取某一个标签体内容（注意：该标签体不能包含子标签） $("#d1").text("<b>你好世界</b>") // 8.val():主要用户获取/设置输入框的信息 $("#n1").val()//读取 $("#n1").val("abc") //如果需要同时修改多个样式的值，建议直接使用 addClass $("#d1").css({ color:"red", background:"blue" }) </script> </body> </html>

颖涛

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery工具与方法

一、jQuery工具方法jQuery中的工具 1.$.each():遍历数组对象、对象数组中的数据。2.$.trim():去除字符串两边的空格 3.$.type(obj):得到数据的类型 4.$.isArray(obj):判断是否是数组 5.$.isFunction(obj):判断师是否是函数 6.$.parseJSON(obj):解析json字符串转化为js对象/数组 <!DOCTYPE html> <html> <head> <meta
复制链接

扫一扫