0
点赞
收藏
分享

微信扫一扫

jQuery2 $工具方法 jQuery属性 css

钎探穗 2022-03-18 阅读 90

$工具方法

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

$.each(arr,function(i,e){
            //第一个参数是下标  第二个参数是内容
            //console.log(i,e)
        })
        

2.$.trim0:去除字符串两边的空格

 console.log(" 123 ".length,$.trim(" 123 ").length)
 //replace 可以将空格替换为空字符,但只执行一次
     // 想要全部去除就用replaceAll

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

//$.type 相当于js中的 typeof
		//语句后的是得到type的属性
        console.log($.type(1))//number
        console.log($.type("a"))//string
        console.log($.type(arr))//array
        console.log($.type(obj))//object

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

console.log($.isArray(arr))//true 
//此语句返回Boolean类型

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

function fa(){}
        var fb=fa
        
        console.log($.isFunction(fb))
        //此语句ye返回Boolean类型

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

// json是一段文字,string
            // json就是字符串的对象
            let str='{"name":"ss","age":22}'
            console.log($.parseJSON(str))
            console.log(str)

7.JSON.stringify(obj):将字符串转换为jQuery对象

console.log(JSON.stringify(person))

jQuery属性

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

        //读取p标签中定义的title属性
        console.log($("p").attr("title"))
        //设置p标签中定义的title属性
        $("p").attr("title","456")

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

        //移除p标签中定义的title属性
        $("p").removeAttr("title")
        

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


        $("p").mouseover(function(){
            // $(this) 当前触发的标签
            $(this).addClass("a")
        })
        

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

  $("p").mouseout(function(){
            // $(this) 当前触发的标签
            $(this).removeClass("a")
        })

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

$(this).prop("checked") //all的状态
```、

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.5.1.js"></script>
</head>
<body>
    <input type="checkbox" id="all">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="text">
    <script>
    
        $("#all").click(function(){
            //设置界面的所有复选框和all的状态一致
            //$(this).prop("checked") all的状态
            $(":checkbox").prop("checked",all.checked)
        })
    
    </script>
</body>
</html>

在这里插入图片描述

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

$("p").html()  //相当于 p.innerHTML

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

$("p").text() // 相当于  p.textContent

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

$("input").val() // 相当于  input.value
$("#d1").val()//读取值

 $("#d1").val("abc")//修改值

css

获取样式值: css (“样式名)
设置单个样式: css ("样式名"”样式值")
设置多个样式: css (”样式名:“样式值”,”样式名:“样式值")
addClass可以同时修改多个样式
示例

<!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>
    	
        //奇数a
        //偶数b
        $("tr:odd").addClass("a")
        $("tr:even").addClass("b")
    
    </script>
</body></html>

在这里插入图片描述

举报

相关推荐

0 条评论