jQuery($工具&属性&CSS)

xiongᥫᩣ

已于 2022-11-28 17:03:46 修改

阅读量501

点赞数 5

文章标签： jquery 前端 javascript

于 2022-03-17 23:33:57 首次发布

本文链接：https://blog.csdn.net/weixin_65474399/article/details/123561701

版权

一，工具方法

特点：

工具方法需要用$符号点出来才可以使用

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

2.$.trim():去除字符串两边的空格但是中间的字符串不能去除

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

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

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

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

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

二， jQuery属性

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

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

3.addClass():给某个标签属性的值，或设置某个标签属性的值

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

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

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

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

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

三，CSS标签（设置标签的CSS样式）

1.获取样式值：css("样式名")

2.设置单个样式：css("样式名","样式值")

3.设置多个样式：css({"样式名":"样式值","样式名":"样式值"})

提示：如果需要同时修改多个样式的值，建议直接使用 addClass

一，工具方法

特点：

工具方法需要用$符号点出来才可以使用

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

            // 对数组求和
           $.each(arr,(a,b)=>{
               console.log(a,b)
               // a是下标，b是元素
           })

2.$.trim():去除字符串两边的空格但是中间的字符串不能去除

// trim 去除左右空格
           // replace 可以将空格替换为空字符，但是只能执行一次
           // 如果想要全部去除的话，就用replaceAll
           console.log($.trim(" abc ").length)
           // console.log(' a b c '.replace(' ','').length)

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

            // $.type 相当于 js中的typeof
           console.log(typeof arr) //array 在js中也属于object
           console.log(typeof person) //object

            // 在jQuery中分类较为严谨
           console.log($.type(arr)) //array
           console.log($.type(person)) //object

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

console.log($.isArray(arr)) //返回Boolean类型

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

console.log($.isFunction(fn1)) //返回Boolean类型

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

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

运行结果：

通过这个案例大家不难发现运用$.parseJSON(obj)打印出来的是一个字符串，既然我们可以把对象变成字符串的形式，那是不是也可以将字符串转换为对象呢，接下来就给大家介绍一个可以把字符串转对象的方法。

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

console.log(JSON.stringify(person))

二， jQuery属性

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

<a href="https://www.baidu.com">点我</a>
<button type="button" οnclick="fn01()">点我更改     </button>

            function fn01(){
               // shi用jQuery修改标签属性的值
               $("a").attr("herf","https://cn.bing.com")
           }

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

           function fn01(){
               // shi用jQuery修改标签属性的值
               $("a").removeAttr("herf")
           }

效果图：

3.addClass():给某个标签属性的值，或设置某个标签属性的值

.aa{
           color:aqua ;
           background-color: blanchedalmond;
            }

function fn01(){
               // shi用jQuery修改标签属性的值
               $("a").addClass("aa")
           }

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

.aa{
           color:aqua ;
           background-color: blanchedalmond;
            }

function fn01(){
               // shi用jQuery修改标签属性的值
               $("a").removeClass("aa")
           }

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>x</title>
 </head>
 <body>
 <!--注意： prop 控制的是js里面的属性 -->
  <div id="">
   <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">
   //拿到除了第一行以外的所有多选框
   $(":checkbox:gt(0)").click(function() {
    // this是js对象，只能使用js方法
    let status=this.checked
    if(!status){//!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>

效果图：

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

            <p id="d1">zzz</p>

            // 读取
           $("#d1").html()
           // 修改
           $("#d1").html("Hello World")

  $("#d1").html("<b>Hello World</b>")

            //可以识别标签相当于JS中的innerHTML

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

与上面相似，但是不包含里面的标签，会识别成字符串。