JQuery$工具,属性和css

最新推荐文章于 2024-09-14 18:52:56 发布

钟意

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量939

点赞数 2

文章标签： linq javascript c#

本文链接：https://blog.csdn.net/m0_61857264/article/details/123539432

版权

一.工具方法

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

$.trim():去除字符串两边的空格

$.type(obj):拿到数据的类型

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

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

二、jQuery属性

arrt():获取某个标签属性的值，或者设置某个标签属性的值点击按钮更改href的属性值

removeArrt():删除某个标签的属性如上案例点击按钮刪除href属性

addClass():删除某个标签的属性给p标签添加class属性值

removeClass():删除某个标签的属性给p标签删除class属性值

三.全选案例

一.工具方法

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

遍历数组
<script src="js/jquery-3.5.1.js"></script>
<script>
         //数组
            let arr=[1,2,3,4,5,6,7,8,9,0]
            //对数组求和
            $.each(arr,(a,b)=>{
                //a 下标  b  元素
                console.log("下标",a)
                console.log("元素",b)        
            })
     </script>
遍历对象
<script src="js/jquery-3.5.1.js"></script>
<script>
      //对象
            let person={
                name:"张三",
                sex:"男",
                age:19    
            }
            $.each(person,(a,b)=>{
                console.log(a,b)
            })
     </script>
遍历对象数组
<script src="js/jquery-3.5.1.js"></script>
<script>
//定义对象数组
     let persons = [{
                name: "张三",
                sex: "男",
                age: 19
            }, {
                name: "张三",
                sex: "男",
                age: 19
            }]
//遍历对象数组
            $.each(persons, (a, b) => {
                $.each(person, function(c, d) {
                    console.log(c, d)
                })
            })
     </script>

$.trim():去除字符串两边的空格

<script src="js/jquery-3.5.1.js"></script>
<script>
//去除空格
            console.log($.trim(" abc ").length) //3
            console.log($.trim(" a b c ").length) //5
            console.log($.trim(" a b c ".replaceAll(" ", "")).length) //3
     </script>
注：trim只去两边空格 不去中间空格 如需去全部  可用replaceAll（）替换（replace只去一次）

$.type(obj):拿到数据的类型

<script src="js/jquery-3.5.1.js"></script>
<script>
console.log($.type(1))//number
console.log($.type("aa"))//string
var names=["aa","bb","cc"]
console.log($.type(names))//array
var stu={"name":"张三","age":18}
console.log($.type(stu))//object
</script>

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

<script src="js/jquery-3.5.1.js"></script>
<script>
var names=["aa","bb","cc"]
console.log($.isArray(names))//true
var stu={"name":"张三","age":18}
console.log($.isArray(stu))//false
</script>
1.5$.isFunction(obj):判断是否是函数
<script src="js/jquery-3.5.1.js"></script>
<script>
    //判断是否是函数
    function f1() {}
    let f2 = f1() //undefined
    let f3 = f1 //f3是函数
    console.log($.isFunction(f2)) //false
    console.log($.isFunction(f3)) //true
</script>
注：函数名后面加（）就意味着这个函数已经运行了  得到的是返回值

在不写的情况下是未定义（undefined）所以f2为false

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

<script src="js/jquery-3.5.1.js"></script>
<script>
let str = '{"name":"李四","age":35}' //json
            //拿到学生的名字和年龄
            console.log(str)
            //$.parseJSON 把字符串变成js中的对象
            console.log($.parseJSON(str))
            let stu = $.parseJSON(str)
            console.log(stu.name)
            //将person变成json字符串
            let person={
                name:"张三",
                sex:"男",
                age:19    
            }
            console.log(JSON.stringify(person))
</script>

二、jQuery属性

arrt():获取某个标签属性的值，或者设置某个标签属性的值
点击按钮更改href的属性值

<body>
        <!-- href 是标签上的属性-->
        <a href="https://www.baidu.com">点我</a>
        <button type="button" onclick="fn01()">点我更改</button>
        <script type="text/javascript">
            function fn01() {
                //使用jquery修改标签属性的值
                $("a").attr("href", "https://cn.bing.com")
            }
        </script>
    </body>

removeArrt():删除某个标签的属性
如上案例点击按钮刪除href属性

<body>
        <!-- href 是标签上的属性-->
        <button type="button" onclick="fn02()">点我移除</button>
        <script type="text/javascript">
             function fn02() {
                //使用jquery删除标签属性的值
                $("a").removeAttr("href")
            }
        </script>
    </body>

addClass():删除某个标签的属性
给p标签添加class属性值

removeClass():删除某个标签的属性
给p标签删除class属性值

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .aa {
                color: lightblue;
                background: bisque;
                
            }
        </style>
    </head>
<body>
        <script src="js/jquery-3.5.1.js"></script>
        <!-- href 是标签上的属性-->
      <p>hello world</p>
      <button type="button" onclick="fn01()">点我添加class</button>
      <button type="button" onclick="fn02()">点我移除class</button>
      <script type="text/javascript">
            function fn01() {
                //使用jquery添加class属性的值
                $("p").addClass("aa")
            }
            function fn02() {
                //使用jquery删除class属性的值
                $("p").removeClass("aa")
            }
        </script>
    </body>

三.全选案例

prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如全选/取消全选
全选/取消全选案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="">
            <!-- prop 控制的是js里面的属性 -->
            <input onclick="$(':checkbox').prop('checked',this.checked)" type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
        </div>    
        <script type="text/javascript">
            //拿到大于0的所有多选框
            $(":checkbox:gt(0)").click(function() {
                // this是js对象
                let status=this.checked
                if(!status){//只要状态为false
                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)    
            })
        </script>
    </body>
</html>

下一篇很快更新，跟我一起学好JQuery