jQuery2 ＄工具方法 jQuery属性 css

陈峰806

于 2022-03-18 04:30:42 发布

阅读量243

点赞数 2

文章标签： jquery javascript css

本文链接：https://blog.csdn.net/weixin_65768991/article/details/123565030

版权

＄工具方法

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>

在这里插入图片描述

陈峰806

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery2 ＄工具方法 jQuery属性 css

＄工具方法1.$.each()：遍历数组、对象、对象数组中的数据$.each(arr,function(i,e){ //第一个参数是下标第二个参数是内容 //console.log(i,e) }) 2.$.trim0：去除字符串两边的空格 console.log(" 123 ".length,$.trim(" 123 ").length) //replace 可以将空格替换为空字符，但只执行一次 //
复制链接

扫一扫