jquery获取元素的排序 jquery获取元素个数

转载

mob64ca140d2323 2023-10-02 17:26:57

文章标签 jquery获取元素的排序 jquery jQuery 数组 html 文章分类 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=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)方法 - 查找数组或对象

调用

$jquery获取元素的排序 jquery获取元素个数_jquery$ ()调用
$jquery获取元素的排序 jquery获取元素个数_jquery_02$ 调用

参数

$().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的工厂函数 $jquery获取元素的排序 jquery获取元素个数_数组_03$ ()使用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>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：python如何创建1元线性回归模型 python一元非线性回归

下一篇：用jquery写歌 jquery用什么语言编写

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯