0


jQuery $工具方法&属性&CSS

前言

昨天跟大家分享了jQuery的入门和一些选择器,今天与大家分享jQuery的 $工具方法 、属性、 css

首先让我们来看一下今天要分享的内容的思维导图


一、$工具方法

1、$.each():用于遍历数组、对象、对象数组中的数据;

(1)遍历对象

  1. $(function() {
  2. //一、$工具方法
  3. //1.1$.each 遍历对象 数组
  4. //定义对象
  5. var stu = {"name":"张三","age":38};
  6. //遍历对象 k指的是索引 v指的是元素
  7. $.each(stu,function(k,v){
  8. console.info(k,v);
  9. })
  10. })

(2)遍历数组

  1. $(function() {
  2. //定义数组
  3. var stus= ["张三","李四","王五","赵六"];
  4. //遍历数组
  5. $.each(stus,function(i,n){
  6. console.info(n);
  7. })
  8. })

(3)遍历对象数组

  1. $(function() {
  2. //定义对象数组 [{}]
  3. var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
  4. //遍历对象数组
  5. $.each(stus, function(i, stu) {
  6. //console.info(stu.name,stu.age);
  7. $.each(stu, function(a, b) {
  8. console.info(b);
  9. })
  10. })
  11. })
  1. ![](https://img-blog.csdnimg.cn/5ea5b59d9014478c9cfe3ce7a5e7258b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCx5LiA5Liq5a2XNTEx,size_12,color_FFFFFF,t_70,g_se,x_16)

2、$.trim():用于去除前后的空格

  1. $(function() {
  2. // 1.2$.trim() 去除前后的空格
  3. var str = " zking ";
  4. console.info(str.length);
  5. console.info($.trim(str).length);
  6. })
  1. ​​​​​​​ ![](https://img-blog.csdnimg.cn/67a94c41d3184d728393455df393dbdc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCx5LiA5Liq5a2XNTEx,size_15,color_FFFFFF,t_70,g_se,x_16)

3、$.type(obj) :得到obj的数据类型

  1. $(function() {
  2. // 1.3 $.type(obj) 得到变量的数据类型
  3. var str = 23.6;
  4. var str1 = 23;
  5. var stu = {"name":"张三","age":38};
  6. var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
  7. console.info($.type(stus));
  8. })
  1. ​​​​​​​ ​​​​​​​ ![](https://img-blog.csdnimg.cn/a87aaea9ab5e4fea9c0e559f61e822b9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCx5LiA5Liq5a2XNTEx,size_13,color_FFFFFF,t_70,g_se,x_16)

注意: 不管是整数还是小数返回的数据类型都是number

4.$.isArray(obj):判断是否是数组

  1. $(function() {
  2. // 1.4 $.isArray() 判断是否是数组
  3. var stu = {"name": "张三","age": 38};
  4. var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
  5. console.info($.isArray(stu));
  6. })
  1. ​​​​​​​ ​​​​​​​ ![](https://img-blog.csdnimg.cn/621953199c264a60b8d781628005d828.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCx5LiA5Liq5a2XNTEx,size_12,color_FFFFFF,t_70,g_se,x_16)

5.$.isFunction(obj):判断是否是函数

  1. $(function() {
  2. //1.5 $.isFunction() 判断是否是函数
  3. var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
  4. console.info($.isFunction(myf));
  5. function myf(){
  6. alert(123);
  7. }
  8. })
  1. ![](https://img-blog.csdnimg.cn/129a96f85aa94962a5850fccb4848dff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCx5LiA5Liq5a2XNTEx,size_11,color_FFFFFF,t_70,g_se,x_16)

6.$.parseJSON(obj):解析json字符串转换为js对象/数组

  1. $(function() {
  2. //1.6 $.parseJSON() 将json格式的字符串-->js的对象或者数组
  3. var stuStr = '{"name":"张三","age":38}';
  4. console.info($.type(stuStr));string
  5. var stu = $.parseJSON(stuStr);
  6. console.info($.type(stu));//object json格式的字符串-->js对象
  7. console.info(stu.name,stu.age);
  8. $.each(stu,function(k,v){
  9. console.info(v);
  10. })
  11. //将json格式的字符串-->js的对象数组
  12. var stusStr = '[{"name":"张大三","age":38},{"name":"张小三","age":39}]';
  13. console.info($.type(stusStr));string
  14. var stus = $.parseJSON(stusStr);
  15. console.info($.type(stus));array
  16. //遍历
  17. $.each(stus,function(a,b){
  18. console.info(b.name,b.age);
  19. $.each(b,function(k,v){
  20. console.info(v);
  21. })
  22. })
  23. })
  1. ![](https://img-blog.csdnimg.cn/616f6e674d134a1d84ea819b703e362d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCx5LiA5Liq5a2XNTEx,size_9,color_FFFFFF,t_70,g_se,x_16)

二、属性

1.attr():获取某个标签属性的值,或设置某个标签属性的值

  1. $(function() {
  2. var mpath = $("#aa").attr("src"); //拿值
  3. console.info(mpath);
  4. //给某个属性设置值
  5. $("#aa").attr("width","100px");
  6. })
  7. <body>
  8. <img src="img/logo.jpg" width="200px" id="aa">;
  9. </body>

2.removeAttr():删除某个标签

  1. $(function() {
  2. $("#aa").removeAttr("src");//无图片
  3. })
  4. <body>
  5. <img src="img/logo.jpg" width="200px" id="aa">;
  6. </body>

3.addClass():给某个标签添加class属性值

  1. $(function() {
  2. $("#aa").addClass("xx");
  3. })
  4. <body>
  5. <img src="img/logo.jpg" width="200px" id="aa">;
  6. </body>

4.removeClass():删除某个标签class属性值

  1. $(function() {
  2. //2.4 removeClass() 删除某个标签属性值
  3. $("#aa").removeClass("xx");//class仍然在 值会被移除掉
  4. })
  5. <body>
  6. <img src="img/logo.jpg" width="200px" id="aa" class="xx">;
  7. </body>

5.prop():获取某个标签属性的值,或设置某个标签属性的值

注意:和attr()类似,区别在于prop用于属性值为Boolean类型的情况,比如多选

  1. $(function() {
  2. //给img标签增加name值
  3. $("#aa").attr("name","abc");
  4. $("#aa").prop("name","abc");
  5. })
  6. <body>
  7. <img src="img/logo.jpg" width="200px" id="aa">;
  8. </body>

6.html():获取某一个标签体内容(注意:该标签体中可以包含子标签)

7.text():获取某一个标签体内容(注意:该标签体不能包含子标签)

  1. $(function() {
  2. //html() 和text() 的区别
  3. var a = $("p").html();//会拿到子标签
  4. console.info(a);
  5. var b = $("p").text();//不会拿到子标签 只会打印纯文本
  6. console.info(b);
  7. })
  8. <body>
  9. <p>aa和<span>bb</span>的爱情故事</p>
  10. </body>

8.val():主要用户获取/设置输入框的值

  1. $(function() {
  2. var aa = $("#bb").val();//拿值
  3. console.info(aa);
  4. $("#cc").val("你好,世界");//设值
  5. })
  6. <body>
  7. <input type="text" id="bb" value="你好" />
  8. <input type="text" id="cc" />
  9. </body>


、css

  1. $(function() {
  2. $("p").css("background", "red"); //一个键,一个值
  3. $("p").css({"background":"pink","color":"blue"})//{键:值,键:值} 多个用逗号隔开
  4. //拿值
  5. var a = $("p").css("background");
  6. console.info(a);
  7. })
  8. <body>
  9. <p>aa和<span>bb</span>的爱情故事</p>
  10. </body>

四、案例

实现全选功能

  1. $(function() {
  2. $("#ok").click(function(){
  3. $(".aaa").prop("checked",true);
  4. })
  5. $("#nook").click(function(){
  6. $(".aaa").prop("checked",false);
  7. })
  8. //注意:在为Boolean时 attr会进入之前的状态 但是prop不会
  9. })
  10. <body>
  11. <input type="checkbox" class="aaa" value="喜欢看电影" />喜欢看电影
  12. <input type="checkbox" class="aaa" value="喜欢听歌" />喜欢听歌
  13. <input type="checkbox" class="aaa" value="喜欢玩手机" />喜欢玩手机
  14. <input type="button" value="全选" id="ok" />
  15. <input type="button" value="取消全选" id="nook" /><br />
  16. </body>

注意:在为Boolean时 attr会进入之前的状态 但是prop不会

  1. ** attraddClass的区别
  2. attr:会覆盖之前的样式
  3. addClass:会前调用原来的样式 再调用加的样式**

实现隔行换色

  1. $(function() {
  2. $("table tr:even").addClass("cc");
  3. $("table tr:odd").addClass("dd");
  4. })
  5. <body>
  6. <input type="checkbox" class="aaa" value="喜欢看电影" />喜欢看电影
  7. <table border="1px" width="50%">
  8. <tr>
  9. <td>&nbsp;</td>
  10. <td>&nbsp;</td>
  11. </tr>
  12. <tr>
  13. <td>&nbsp;</td>
  14. <td>&nbsp;</td>
  15. </tr>
  16. <tr>
  17. <td>&nbsp;</td>
  18. <td>&nbsp;</td>
  19. </tr>
  20. <tr>
  21. <td>&nbsp;</td>
  22. <td>&nbsp;</td>
  23. </tr>
  24. <tr>
  25. <td>&nbsp;</td>
  26. <td>&nbsp;</td>
  27. </tr>
  28. </table>
  29. </body>

总结

以上就是今天分享的内容,如果对你有帮助的就点个关注呗!


本文转载自: https://blog.csdn.net/qq_62331938/article/details/123559991
版权归原作者 安离九歌 所有, 如有侵权,请联系我们删除。

“jQuery $工具方法&amp;属性&amp;CSS”的评论:

还没有评论