0
0

jQuery $工具方法&属性&CSS

前言

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

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

一、$工具方法

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

（1）遍历对象

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

（2）遍历数组

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

（3）遍历对象数组

$(function() {
            //定义对象数组 [{}]
            var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
            //遍历对象数组
            $.each(stus, function(i, stu) {
                //console.info(stu.name,stu.age);
                $.each(stu, function(a, b) {
                    console.info(b);
                })
            })
})

                        ![](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()：用于去除前后的空格

$(function() {
            // 1.2$.trim() 去除前后的空格
            var str = "   zking  ";
            console.info(str.length);
            console.info($.trim(str).length);
})

            ​​​​​​​        ![](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的数据类型

$(function() {
            // 1.3 $.type(obj) 得到变量的数据类型
            var str = 23.6;
            var str1 = 23;
            var stu = {"name":"张三","age":38};
            var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
            console.info($.type(stus));
})

    ​​​​​​​        ​​​​​​​        ![](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)：判断是否是数组

$(function() {
            // 1.4 $.isArray() 判断是否是数组
            var stu = {"name": "张三","age": 38};
            var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
            console.info($.isArray(stu));
})

    ​​​​​​​        ​​​​​​​        ![](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)：判断是否是函数

$(function() {
            //1.5 $.isFunction()  判断是否是函数
            var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
            console.info($.isFunction(myf));
                    
            function myf(){
                alert(123);
            }
})

                            ![](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对象/数组

$(function() {
            //1.6 $.parseJSON() 将json格式的字符串-->js的对象或者数组
            var stuStr = '{"name":"张三","age":38}';
            console.info($.type(stuStr));string
            var stu = $.parseJSON(stuStr);
            console.info($.type(stu));//object  json格式的字符串-->js对象
            console.info(stu.name,stu.age);
            $.each(stu,function(k,v){
                console.info(v);
            })

            //将json格式的字符串-->js的对象数组
            var stusStr = '[{"name":"张大三","age":38},{"name":"张小三","age":39}]';
            console.info($.type(stusStr));string
            var stus = $.parseJSON(stusStr);
            console.info($.type(stus));array
            //遍历
            $.each(stus,function(a,b){
                console.info(b.name,b.age);
                $.each(b,function(k,v){
                    console.info(v);
                })
            }) 

})

                            ![](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()：获取某个标签属性的值，或设置某个标签属性的值

$(function() {
        var mpath = $("#aa").attr("src"); //拿值
        console.info(mpath);
        //给某个属性设置值
        $("#aa").attr("width","100px");

})
<body>
<img src="img/logo.jpg" width="200px" id="aa">;
</body>

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

$(function() {
    $("#aa").removeAttr("src");//无图片

})
<body>
<img src="img/logo.jpg" width="200px" id="aa">;
</body>

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

$(function() {
    $("#aa").addClass("xx");

})
<body>
<img src="img/logo.jpg" width="200px" id="aa">;
</body>

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

$(function() {
    //2.4 removeClass() 删除某个标签属性值
    $("#aa").removeClass("xx");//class仍然在 值会被移除掉

})
<body>
<img src="img/logo.jpg" width="200px" id="aa" class="xx">;
</body>

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

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

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

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

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

$(function() {
    //html() 和text() 的区别
        var a = $("p").html();//会拿到子标签
        console.info(a);
        var b = $("p").text();//不会拿到子标签 只会打印纯文本
        console.info(b);

})
<body>
<p>aa和<span>bb</span>的爱情故事</p>
</body>

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

$(function() {
    var aa = $("#bb").val();//拿值
    console.info(aa);
    $("#cc").val("你好，世界");//设值

})
<body>
<input type="text" id="bb" value="你好" />
<input type="text" id="cc" />
</body>

三、css

$(function() {
    $("p").css("background", "red"); //一个键,一个值
            $("p").css({"background":"pink","color":"blue"})//{键:值,键:值} 多个用逗号隔开
            //拿值
            var a = $("p").css("background");
            console.info(a);

})
<body>
<p>aa和<span>bb</span>的爱情故事</p>
</body>

四、案例

实现全选功能

$(function() {
     $("#ok").click(function(){
                $(".aaa").prop("checked",true);
            })
            
            $("#nook").click(function(){
                $(".aaa").prop("checked",false);
            }) 
            //注意:在为Boolean时 attr会进入之前的状态 但是prop不会

})
<body>
<input type="checkbox" class="aaa" value="喜欢看电影" />喜欢看电影
        <input type="checkbox" class="aaa" value="喜欢听歌" />喜欢听歌
        <input type="checkbox" class="aaa" value="喜欢玩手机" />喜欢玩手机
        <input type="button" value="全选" id="ok" />
        <input type="button" value="取消全选" id="nook" /><br />
</body>

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

      **  attr和addClass的区别
         attr:会覆盖之前的样式
         addClass:会前调用原来的样式 再调用加的样式**

实现隔行换色

$(function() {
    $("table tr:even").addClass("cc");
                            $("table tr:odd").addClass("dd");

})
<body>
<input type="checkbox" class="aaa" value="喜欢看电影" />喜欢看电影
        <table border="1px" width="50%">
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
</body>

总结

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

标签： jquery 前端 javascript
本文转载自: https://blog.csdn.net/qq_62331938/article/details/123559991
版权归原作者 安离九歌 所有， 如有侵权，请联系我们删除。
登录后发布评论

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

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航