jQuery 工具方法（全）

最新推荐文章于 2024-05-05 01:18:59 发布

weixin_46370867

最新推荐文章于 2024-05-05 01:18:59 发布

阅读量179

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46370867/article/details/109540703

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

下面是对jQuery中工具方法的整理，希望可以帮助到有需要的小伙伴。

一、类数组对象

１、length属性

length属性 - 获取当前jQuery对象中包含DOM对象的个数

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类数组操作</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    
</head>

<body>
    <div id="d1"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        // length属性 - 获取当前jQuery对象中包含DOM对象的个数
        console.log($("div").length);  // 5

        for (var i=0;i<$("div").length;i++) {
            // jQuery对象[索引值] -> 转换为DOM对象，由此得到的值不能用jQuery操作，要用DOM操作
            var div = $("div")[i];
        }

   
    </script>
</body>

</html>

2、get()方法

get(索引值) – 返回索引值对应的内容

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类数组操作</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    
</head>

<body>
    <div id="d1"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        // length属性 - 获取当前jQuery对象中包含DOM对象的个数
        console.log($("div").length);  // 5

        for (var i=0;i<$("div").length;i++) {
            // jQuery对象[索引值] -> 转换为DOM对象，由此得到的值不能用jQuery操作，要用DOM操作
            var div = $("div")[i];
        }

        // get(index)方法
        console.log($("div").get(0)); // 得到第一个div

        /*
            * index(element)方法
              * 作用 - 在指定的jQuery对象中查找是否存在element
                * 存在 - 返回element对应的索引值
                * 不存在 - 返回-1
              * 参数element - 可以是DOM对象 / jQuery对象 / 选择器
              【注意：以jQuery对象来调用index()方法】
        */ 

        console.log($("div").index(document.getElementById('d1')));  // 0
        console.log($("div").index($("d1")));  // -1
        console.log($("div").index("#d1"));  // 0
    </script>
</body>

</html>

3、index()方法 - 只能查找jQuery对象

index(element)方法
- 作用 - 在指定的jQuery对象中查找是否存在element
  - 存在 - 返回element对应的索引值
  - 不存在 - 返回-1
- 参数element - 可以是DOM对象 / jQuery对象 / 选择器

【注意：以jQuery对象来调用index()方法】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类数组操作</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    
</head>

<body>
    <div id="d1"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        /*
            * index(element)方法
              * 作用 - 在指定的jQuery对象中查找是否存在element
                * 存在 - 返回element对应的索引值
                * 不存在 - 返回-1
              * 参数element - 可以是DOM对象 / jQuery对象 / 选择器
              【注意：以jQuery对象来调用index()方法】
        */ 

        console.log($("div").index(document.getElementById('d1')));  // 0
        console.log($("div").index($("d1")));  // -1
        console.log($("div").index("#d1"));  // 0
    </script>
</body>

</html>

4、$.inArray()方法 - 查找数组或对象

查找指定数组或对象中是否存在你要找的值，返回索引值

语法：

$.inArrray(value,array,fromIndex)

value - 表示要查找的数据内容
array - 表示指定的数组或对象

返回值：

存在 - 返回value所对应的索引值
不存在 - 返回-1

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类数组操作</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    
</head>

<body>
    <div id="d1"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>


        /*
            $.inArrray(value,array,fromIndex)方法 - 【查找数组或对象】
            $代表jQuery对象，同时也是一个函数对象
            * 作用 - 在指定的数组或对象中查找是否存在value
              * 存在 - 返回value所对应的索引值
              * 不存在 - 返回-1
            * 参数
              * value - 表示要查找的数据内容
              * array - 表示指定的数组或对象
            
        */
        console.log($.inArray(document.getElementById("d1"),$("div"))); // 0
        var arr = [1,2,3,4,5];
        console.log($.inArray(3,arr));  // 2
        console.log($.inArray(document.getElementById('d1'),document.getElementsByTagName('div')));  

        console.log($.inArray(8,arr)); // -1 

    </script>
</body>

</html>

index()方法与inArray()方法的区别
- 查找内容
  - index() 只能查找jQuery对象
  - inArrray(value,array,fromIndex)方法 - 查找数组或对象
- 调用
  - $() . i n d e x (e l e m e n t) 方法 - 由工厂函数$ ()调用
  - $. i n A r r r a y (v a l u e, a r r a y, f r o m I n d e x) 方法 - 由 j Q u e r y 对象$ 调用
- 参数
  - $().index(DOM对象 / jQuery对象 / 选择器) -
  - $.inArrray(value,数组 / 对象,fromIndex)方法
index()方法与inArray()方法的相同点
- 返回值
- 都是返回查找内容的索引值
  - 存在 - 返回value所对应的索引值
  - 不存在 - 返回-1

注：

$代表jQuery对象，同时也是一个函数对象
$()和jQuery()是jQuery的核心函数，执行这两个元素返回的是一个DOM元素
$()是一个函数，等同于jQuery()，可在括号内传参数，传参后可获取元素

5、toArray()方法

toArray() 方法

作用 - 返回 jQuery 选择器匹配的元素。
返回值 - 数组

语法：

$(selector).toArray()

selector – 选择器

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类数组操作</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    
</head>

<body>
    <div id="d1"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
 

        /*
            * $().toArray()方法
              * 作用 - 把jQuery对象转换为数组
            
             
        */

        console.log($("div").toArray());
      
        console.log($.makeArray(document.getElementsByTagName('div')));
        

    </script>
</body>

</html>

6、$.makeArray()方法

将一个类似数组的对象转换为真正的数组对象

语法：

$.makeArray( object )

Object – 需要转换为数组的类数组对象。

注意：

类数组对象具有许多数组的属性(例如length属性，[]数组访问运算符等)

但是类数组对象不是真正的数组，没有从数组的原型对象上继承下来的内置方法(例如：pop()、reverse()等)。

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类数组操作</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    
</head>

<body>
    <div id="d1"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>


        /*
            
            * $.makeArray(obj)方法
              * 作用 - 将类数组转换为数组
              * 参数obj - 表示类数组对象
             
        */

       
        console.log($.makeArray($("div")));
        console.log($.makeArray(document.getElementsByTagName('div')));
        

    </script>
</body>

</html>

7、jQuery工厂函数与全局对象

jQuery的工厂函数 $(), 本质上是一个 D O M 对象，但是它所使用的方法都封装在了 j Q u e r y 上。所以不能用$ ()使用JS的方法，DOM对象也不能使用jQuery的方法。

jQuery 就是 $ , jQuery也是一个对象

jQuery()工厂函数的调用会返回JQuery对象

$().index() – index()方法就是jQuery对象的方法

$.inArray() – jQuery是一个jQuery的全局对象

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局对象与工厂函数</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="d1"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        /*  $ 就是 jQuery
            * $().index()
              * jQuery() - 工厂函数的调用 -> 返回jQuery对象
              * index()方法是jQuery对象的方法
            * $.inArray()
              * jQuery - 也是一个对象 -> jQuery的全局对象

        */
        var index1 = $("div").index("#d1");  // 0
        var index2 = $.inArray(document.getElementById('d1'),$("div"));  // -1
        console.log(index1,index2);
        // 所有函数都是Function类型的对象
        function fun(){
            console.log("this is function");
        }
        fun();  // 函数调用
        console.log(fun instanceof Object);  // true
    </script>
</body>
</html>

8、遍历类数组

$().each()方法【工厂函数的方法】
```
$element.each(callback);
```
- callback
$.each()方法【全局对象的方法】
```
$.each(obj,callback)
```
- obj：需要遍历的对象或数组
- callback：对于每个匹配的元素所要执行的函数

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历类数组</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
    <div id="d5"></div>

    <script>
        var $divs = $("div");
        /*
            $().each(callback)方法  【只能遍历jQuery】
            * 作用 - 用于遍历jQuery对象
            * 参数callback - 回调函数
              function(index,domEle){}
              * index - 索引值
              * domEle - 遍历后的DOM对象
        */
        $divs.each(function(index,domEle){
            console.log(index,domEle);
        });

        /* 
            $.each(obj,callback)方法  【都能遍历】
            * 作用 - 用于遍历的数组或对象
            * 参数
              * obj - 表示遍历数组或对象
              * callback - 回调函数
                function(index,domEle){}
                * index - 索引值
                * domEle - 遍历后的DOM对象
        */
        $.each(document.getElementsByTagName('div'),function(index,domEle){
            console.log(index,domEle);
        });
    </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3qpy3lpl-1604674317592)(pic/遍历类数组.png)]

二、字符串操作

$.trim()方法

去掉字符串起始和结尾的空格

$.trim(str);

str：需要处理的字符串

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串操作</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <script>
        // $.trim(需要处理的字符串); 
        console.log($.trim("   I am a bird.  "));
    </script>
</body>
</html>

weixin_46370867

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 工具方法（全）

下面是对jQuery中工具方法的整理，希望可以帮助到有需要的小伙伴。一、类数组对象１、length属性length属性 - 获取当前jQuery对象中包含DOM对象的个数实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫