jQuery$工具&属性&CSS

最新推荐文章于 2024-08-15 08:55:57 发布

王真教掌门

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量674

点赞数 4

文章标签： jquery javascript css

本文链接：https://blog.csdn.net/WZJ278/article/details/123543226

版权

1、工具

2、属性

3、CSS

jQuery 工具是什么帮助使用一些方法来快速选取想要的大小

方法：

1.$each(Object,Function)：遍历数组、对象、对象数组中的数据

2.$trim(str)：去除字符串两边的空格

3.$type(obj)：检测obj的数据类型

4.$isArray(obj)：测试对象是否为数组

5.$isFunction(obj)：测试对象是否为函数

6.$parseJSON(json)：接受一个JSON字符串，返回解析后的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <!--把jQuery文件导入--!>
    <script src="jquery-3.5.1.js"></script>
    <script>
    
        var arr=['a','b','c']
        
        $.each(arr,function(i,e){
            //第一个参数是下标  第二个参数是内容
            //console.log(i,e)
        })
        
        console.log(" 123 ".length,$.trim(" 123 ").length)
    
        //$.type 相当于js中的 typeof
        console.log($.type(1))//number
        console.log($.type("a"))//string
        console.log($.type(arr))//array
        console.log($.type(obj))//object
        
        console.log($.isArray(arr))//true
        
        function fa(){}
        var fb=fa
        
        console.log($.isFunction(fb))
        $isFunction(arr)//测试对象是否为函数
    </script>
    <style>
        
        .a{
            box-shadow: 0px 0px 10px red;
        }
    
    </style>
  
</body>
</html>

2、属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <!--把jQuery文件导入--!>
    <script src="jquery-3.5.1.js"></script>   
<script>
    
        //读取p标签中定义的title属性
        console.log($("p").attr("title"))
        //设置p标签中定义的title属性
        $("p").attr("title","456")
        //移除p标签中定义的title属性
        $("p").removeAttr("title")
        
        //css操作
        $("p").mouseover(function(){
            // $(this) 当前触发的标签
            $(this).addClass("a")
        })
        
         $("p").mouseout(function(){
            // $(this) 当前触发的标签
            $(this).removeClass("a")
        })
        
        //$("p").html()  相当于  p.innerHTML
        //$("p").text()  相当于  p.textContent
        //$("input").val()  相当于  input.value
        
        $("p").html("我是ppppp")
        
    </script>
</body>
</html>

3、CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <style>
        .a {
            background: red;
            color: blue;
            text-align: left;
        }

        .b {
            background: blue;
            color: red;
            text-align: right;
        }
    </style>
    <table width="600px" border>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
    </table>
    <script src="jquery-3.5.1.js"></script>
    <script>
        //在上面给tr标签设置class属性,在用jQuery方法判断来给tr添加样式
        //奇数a
        //偶数b
        $("tr:odd").addClass("a")
        $("tr:even").addClass("b")
    
    </script>
</body></html>

本文到此为止，接下来小编还会写一些关于jQuery内容的博客，如果有喜欢的话，希望可以给予小编三连（点赞、收藏+关注）