jQuery笔记——工具函数——对象和集合操作

最新推荐文章于 2020-04-13 11:17:26 发布
最新推荐文章于 2020-04-13 11:17:26 发布
阅读量1.3k 收藏
点赞数
文章标签： jquery 函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Deer_F/article/details/53260456
版权

一、处理字符串

trim（）函数：清理字符串前后的空白，全局函数，可直接使用jQuery对象进行调用。

jQuery.trim( str );

str：表示被修剪的字符。

应用1：jQuery方法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>处理字符串(jQuery)</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("button").click(function(){
                var str = "         修剪字符串       ";
                alert(str.length);
                str = jQuery.trim(str);
                alert(str.length);
            });
        })
    </script>
</head>
<body>
<button>修剪字符串</button>
</body>
</html>


应用2：JavaScript借助正则表达式实现： 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>处理字符串(javascript)</title>
    <script type="text/javascript">
        function trim(text){
            return (text || "").replace(/^\s+|\s+$/g,"" );
        }
        window.onload = function(){
            var str = "   去掉字符串起始和结尾的空格     ";
            alert(str.length);
            str = trim(str);
            alert(str.length);
        }
    </script>
</head>
<body>
</body>
</html>

二、把对象转换成字符串

param（）函数：将字符串创建为一个序列化的数组或对象，返回值为有序化的字符串。该方法特别适用于一个URl地址查询字符串或Ajax请求。

jQuery.param( obj )

jQuery,param( obj , traditional )

参数解释：

obj：一个数组或序列化的对象

traditional：一个布尔值，设置是否执行了传统的shallow的序列化。

提示：param（）函数是serialize（）方法的基础。所谓序列化，就是数组或者jQuery对象按照名/值（name/value）对格式进行序列化，而JavaScript普通对象按照key/value对格式进行序列化。

应用：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>把对象转换为字符串</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("button").click(function(){
               var option = {
                   user:"zhangsan",
                   pass:12345678
               };
               var str = jQuery.param(option);
               $("#result").text(str);
            });
        })
    </script>
</head>
<body>
<button>定义序列化字符串</button>
<div id="result"></div>
</body>
</html>

三、判断数组类型

isArray（）函数：jQuery定义的负责检测对象是否为JavaScript数组的专用工具，它可以快速判断指定对象是否为数组。

jQuery.isArray（obj）

参数：obj：一个用来测试是否为一个数组的对象

返回值：true：参数是一个数组；false：不是

应用：jQuery

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>判断数组类型</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var a = [
                {width:400},
                {height:300}
            ];
            if(jQuery.isArray(a)){
                alert("变量a是数组");
            }
        })
    </script>
</head>
<body>
</body>
</html>

四、判断函数类型

isFunction（）函数：jQuery定义的用来检测指定对象是否为函数类型的函数。

jQuery.isFunction(obj)

参数obj：表示用于测试是否为函数的对象。

应用：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>判断函数类型</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            function stub(){}
            var objs = [
                    function(){},
                    {x:15,y:20},
                    null,
                    stub,
                    "function"
            ];
            jQuery.each(objs,function(i){
                var isFunc = jQuery.isFunction(objs[i]);
                $("span").eq(i).text(isFunc);
            });
        })
    </script>
    <style type="text/css">
        div{color: blue;margin: 2px;font-size: 14px;}
        span{color: red;}
    </style>
</head>
<body>
<pre>
    var objs = [
                    function(){},
                    {x:15,y:20},
                    null,
                    stub,
                    "function"
            ];
</pre>
<div>jQuery.isFunction(objs[0]) = <span></span></div>
<div>jQuery.isFunction(objs[1]) = <span></span></div>
<div>jQuery.isFunction(objs[2]) = <span></span></div>
<div>jQuery.isFunction(objs[3]) = <span></span></div>
<div>jQuery.isFunction(objs[4]) = <span></span></div>
</body>
</html>


在jQuery1.3版本以后，IE浏览器提供的函数，如alert和getAttribute（DOM元素方法）将不被认为是函数。


五、判断特殊对象

1.检测空对象：

jQuery.isEmptyObject( object )

检测对象是否为空，即对象不包含任何属性。

返回值：true：是空对象；false：不是

在jQuery1.4中，该方法既检测对象本身的属性，也检测从原型集成的属性，因此没有使用hasOwnProperty。


2.检测纯对象

jQuery.isPlainObject( object )

检测一个对象是否为纯对象，即通过对象直接量（{}）或者Object构造函数（new Object）创建的对象

返回值：true：是纯对象；false：不是


3.检测Window对象

jQuery.isWindow( obj )

检测一个对象是否为window对象，即检测一个对象是否为一个窗口

返回值：true：是窗口对象；false：不是

使用该函数可以确定当前操作是否为一个浏览器窗口操作，如当前窗口或一个iframe


4.检测XML文档

jQuery.isXMLDoc( node )

检测一个DOM节点是否在XML文档中（或者是一个XML文档）

返回值：true：是XML文档中的节点对象；false：不是


六、对数组和集合进行迭代

JavaScript方法迭代：

1.数组：for循环遍历数组元素

2.对象：for in循环将对象属性进行迭代

jQuery方法：

each（） ：无缝迭代对象和数组

数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length-1.其他对象迭代通过其命名属性。

jQuery.each( collection , callback( indexArray , valueOfElement ) )

参数解释：

collection：遍历的对象或数组。

callback( indexArray , valueOfElement ) ：表示每个成员/元素执行的回调函数。该函数在遍历每个成员时触发。回调函数包含两个默认参数，【1】：对象成员或数组的索引，【2】：对应变量或内容。


$.each()函数和each()方法不同：（功能相同，用法不同）

each()方法：专门用来遍历一个jQuery对象

$.each()函数：可用于迭代任何集合，无论是“名/值”对象（JavaScript对象）或阵列。在一个数组的情况下，回调函数每次传递一个数组索引和相应的数组值。（该值也可以通过this关键字进行访问，但是JavaScript将始终包裹this值作为一个Object，即使它是一个简单的字符串或数字值。）该方法返回第1个参数，是迭代的对象。

应用：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>对数组和集合进行迭代</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var a = [
                {width:400},
                {height:300}
            ];
            jQuery.each(a,function(name,value){
                if(name>0) return false;                  //仅执行一次循环即退出
                alert(name + "=" + value);
            })
        })
    </script>
</head>
<body>
</body>
</html>
如果中途需要退出each（）循环，则可以在回调函数中返回false，其他返回值将被忽略。


七、生成数组

散列表结构数据：1.数组类型；2.对象类型

DOM中常需要把列表结构的数据转换为数组

如：使用jQuery获取文档中所有的li元素，则返回的应该是一个类似数组结构的对象。但是如果直接为其调用reverse（）数组方法，则会显示编译错误，因为$("li")返回的是一个类数组结构的对象，而不是数组类型数据。如果直接使用document.getElementByTagName（“li”）获取li元素集合，返回值也是一个类数组结构的对象，该对象无法直接调用数组方法。

jQuery.makeArray( obj )

把这些类数组结构对象转换为真正的JavaScript数组。

obj：转换成一个原声数组的任何对象。

转换后，任何有特殊功能的对象将不再存在，返回一个普通的数组。

应用：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>生成数组</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var arr = jQuery.makeArray($("li"));          //转换为数组
            $("ul").html(arr.reverse());                  //调用reverse方法
        })
    </script>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
</html>

八、对数组进行筛选


grep（）函数：根据过滤函数过滤掉数组中不符合条件的元素

jQuery.grep( array , function( elementOfArray , indexInArray ) , [ invert ] )

参数解释：

array：数组，用来搜索

function( elementOfArray , indexInArray )：处理每个项目的比对。参数1：项目；参数2：索引。返回一个布尔值。this将是全局的窗口对象

invert：false或没有提供：函数返回一个所有元素组成的数组，对于callback返回true

              true：函数返回一个所有元素组成的数组，对于callback返回false

$.grep()方法删除必要的项目，以使所有剩余项目通过提供的测试。该测试是一个函数传递一个数组项和该数组内的项目的索引。只有当测试返回true，该数组项将返回到结果数组中。

注意：在筛选过程中原始数组不受影响。

应用：筛选出大于等于5的数组元素，并返回一个数组

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>对数组进行筛选</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var arr = [1,2,3,4,5,6,7,8,9,0];
            arr = jQuery.grep(arr , function(value , index){
                return value >= 5;
            },true);                                                //没true，选出大于等于5的；有true过滤掉大于等于5的
            alert(arr);
        });


        /**
         * javascript 模拟jQuery的grep（）函数功能
        function grep(elems , callback , inv) {
            var ret = [];
            for (var i = 0 , length = elems.length ; i < length ; i++)
            {
                if(!inv != !callback(elems[i] , i))
                {
                    ret.push(elems[i]);
                }    
            }
            return ret;
        }
        window.onload = function(){
            var arr = [1,2,3,4,5,6,7,8,9,0];
           arr = grep(arr , function(value,index){
               return vlaue >= 5;
           },true) ;                                           //没true，选出大于等于5的；有true过滤掉大于等于5的
            alert(arr);
        }**/
    </script>
</head>
<body>
</body>
</html>


九、对数组进行转换

JQuery.map()函数：拥有grep（）函数的功能，同时还可以把当前数组根据处理函数处理后映射为新的数组，甚至可以在映射过程中放大数组。

jQuery.map( arry , callback( elementOfArray , indexInArray ) )

jQuery.map( arrayOrObject ,callback( value , indexOrKey ) )

参数解释：

array：待转换的数组

arrayOrObject ：待转换数组或对象

callback( elementOfArray , indexInArray ) ：被每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。函数可以返回任何值。this将是全局的窗口对象。如果返回null，表示删除数组中对应的项目。如果返回一个包含值的数组，表示将扩展原来的数组。

应用：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>对数组进行转换1</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var arr = [1,2,3,4];
            arr = jQuery.map(arr , function(elem){


                //放大一倍
                return elem*2;                                          //返回：2,4,6,8


                //放大后删除小于5的值
                //return elem*2 > 5? elem*2 : null;                      //返回：6,8


                //返回值为数组，则可以在映射数组中扩大数组的长度
                //return [elem , elem*2];                                //返回：1,2,2,4,3,6,4,8


            } );
            alert(arr);
        });


        /**
         * 模仿jQuery的map()函数功能，映射函数
        function map(elems,callback){
            var ret = [];
            for(var i = 0 , length = elems.length ; i < length ; i++){        //遍历数组
                var value = callback(elems[i],i);                     //执行回调转换函数，并获取函数返回信息
                if(value != null){                               //如果返回值不为null，则把该元素存储到临时数组中
                    ret[ret.length] = value;
                }
            }
            return ret.concat.apply([] , ret);                       //把临时数组连接到一个返回的空数组中，从而实现把数组类型的元素分开为元素，存储到返回数组中
        }
         **/
    </script>
</head>
<body>
</body>
</html>


十、把多个数组合并到一起

merge()函数：把两个参数数组组合并为一个新数组并返回

jQuery.merge( first , second )

参数解释：

first：第一个用来合并的数组，元素是第二个数组加进来的

second：第二个数组合并到第一个数组，保持不变

从第二个追加的元素数组顺序将保存。

$.merge()函数是破坏性的。如果需要原始的第一个数组，应在调用前复制。

可以用merge（）本身复制：

var newArray = $.merge([] , oldArray)

在jQuery1.4之前，参数应是原生的JavaScript数组对象。如果不是，要用$.makeArray()转换。

应用：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>把多个数组合并在一起</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var arr1 = [1,2,3,["a","b","c"]];
            var arr2 = [4,5,6,[7,8,9]];
            var arr3 = jQuery.merge(arr1,arr2);
            alert(arr1);                                    //返回数组[1,2,3,["a","b","c"],4,5,6,[7,8,9]]
            alert(arr1.length);                             //返回8
            alert(arr3);                                    //返回数组[1,2,3,["a","b","c"],4,5,6,[7,8,9]]
            alert(arr3.length);                             //返回8
        }) ;

        /**模仿jQuery的merge（）函数功能，合并数组
        function merge(first , second){
            var i = first.length,j = 0;
            if(typeof second.length === "number"){         //如果第二个参数为数组
                for(var l = second.length ; j<l;j++)       //遍历参数数组2
                {
                    first[i++] = second[j];                //逐一把数组2中的元素添加到参数数组1中
                }
            }else{                                         //如果第二个参数为类数组的对象
                while(second[j] !== undefined)             //遍历该对象
                {
                    first[i++] = second[j++];              //逐一把对象中的成员添加到参数数组1中
                }
            }
            first.length = i;
            return first;
        }**/
    </script>
</head>
<body>
</body>
</html>

十一、删除数组中重复元素

unique()函数：把重复的DOM元素删掉 （不能处理字符串或数字数组）

jQuery.unique( array )

参数解释：

array：DOM元素的数组

通过搜索数组对象排序数组，并移除任何重复的节点。该功能只适用于普通的JavaScript DOM元素的数组，主要在jQuery内部使用。在jQuery1.4中结果将始终按文档顺序返回。

应用：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>删除数组中重复元素</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $arr1 = $("#u1 li");
            var $arr2 = $("#u1 .red");
            var $arr3 = jQuery.merge($arr1,$arr2);
            var $arr4 = jQuery.unique($arr3);
            alert($arr1.length);                     //返回3
            alert($arr3.length);                      //返回3
            alert($arr4.length);                      //返回3


        })
    </script>
</head>
<body>
<ul id="u1">
    <li>1</li>
    <li>2</li>
    <li class="red">3</li>
</ul>
<ul id="u2">
    <li class="red">4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

十二、在数组中查找指定值

inArray（）函数：查找数组中是否包含指定的值

jQuery.inArray( value , array )

参数解释：

value：要搜索的值

array：一个数组，通过它来搜索

搜索数组中指定值，并返回他的索引，如果没有找到则返回-1

如果检查array中存在value，只需要检查它是否不等于（或大于）-1即可。

应用：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在数组中查找指定值</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var arr = [ 4 , "Pete" , 8 , "John"];
            $("span:eq(0)").text(jQuery.inArray("John" , arr));
            $("span:eq(1)").text(jQuery.inArray(4 , arr));
            $("span:eq(2)").text(jQuery.inArray("Kari" , arr));

        })
    </script>
</head>
<body>
<h2>arr = [ 4 , "Pete" , 8 , "John"]</h2>
<div>"John"位于<span></span></div>
<div>4位于<span></span></div>
<div>"Kari"位于<span></span> , 所以不存在</div>
</body>
</html>



行走的鹿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery对象集合
10-17
Jquery 对象集合有兴趣的可下载看看
jquery技巧总结-jQuery对象,集合,方法扩展,事件处理,特效,解决冲突
vincentguo_的专栏
05-20 1395
这个要转下，keneng 1、关于页面元素的引用  通过jquery的$() 引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换  只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，
jquery遍历对象、数组、集合
u013568834的专栏
05-12 669
jquery 遍历对象、数组、集合   使用了jquery有段时间了，整理下jquery中的遍历问题。 1.jquery 遍历对象      New Document       type="text/javascript">      $(function(){        var tbody = "";         //--------
JQuery对象集合的四种遍历方式
MyCodeDream的专栏
03-07 6531
JQuery对象集合遍历在实际开发中是必不可少的，因为我们不仅仅要用JQuery的选择器来选择元素，重要的还要去修改属性等工作，但是，在修改之前要实实在在的去到jquery对象集合的具体元素，当然用途绝不仅仅如此，所以，在学习的过程中，对于jquery对象集集合的遍历，我总结了四种遍历方式： 在面是具体的代码，在代码文档中都有提示。 $("#test3").click(function(){
jQuery学习7 操作JavaScript对象和集合的函数
10-29
jQuery学习7：操作JavaScript对象和集合的函数
jQuery源码分析-03构造jQuery对象-工具函数
10-28
jQuery源码分析-03构造jQuery对象-工具函数，需要的朋友可以参考下。
jQuery学习笔记 操作jQuery对象 CSS处理
12-09
设置元素上CSS规则name属性的值为value，也可使用函数参数，不解释；还可以一次性为同一元素设置多个CSS属性 CSS尺寸属性处理 方法 描述 height() 获取元素CSS属性height的值 width() 获取元素CSS属性...
JQuery 操作Javascript对象和数组的工具函数小结
12-12
JQuery操作非集合数组函数 $.trim(value) 这个函数很简单，从value中删除任何前导或尾随的空白字符。空白字符为任何匹配Javascript正则表达式\s的任何字符。包括空格、换页、换行、回车、tab、垂直指标符等。 $.each...
jQuery学习笔记 操作jQuery对象 属性处理
12-11
还可以使用函数作为参数，将函数返回值作为需要为元素属性设置的值，比如将第(index+1)个元素的name属性设置为函数返回值（实际上，明白函数式就根本不需要这说明）。也可以一次性给同一元素多个属性 removeAttr...
jquery 集合
01-04
包括jquery相关资源，jquery-1.3.2.min jquery-1.7.1.min jquery-1.8.0.min jquery-ui-1.8.18.custom.min以及jquery.jqGrid.src jquery jquery.ui.dialog jquery-form jquery-PlayBar.min jquery-ui
jquery遍历对象，数组，集合
牛奶咖啡
07-12 705
1.jquery遍历对象 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML > <HEAD > <TITLE > New Document < /TITLE> <script language="javascript" ty...
Jquery遍历集合 对象 Json
段小宝的博客
04-26 500
$(function() { var arr1 = {"d":"one", //JSON "u":"two", "a":"three", "n":"four", "b":"five" }; var arr2 = ["one", "two", "three", "fo...
jQuery 创建对象、数组、list集合
qq_42562636的博客
04-13 7566
做后端习惯了用对象、数组、集合 就收集了前端的方法记录总结了一下 对象 var object = {}; 对象赋值 object.id = 0; object.userName = “admin”; object.passWord = “admin123”; 打印：{“id”:0,“userName”:“admin”,“passWord”:“admin123”} 数组 var arr = new ...
JQuery 遍历List，数组，对象
热门推荐
不求前途凶吉，但求落幕无悔！
05-07 1万+
1.jquery遍历对象 &lt; !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" &gt; &lt;HTML &gt; &lt;HEAD &gt; &lt;TITLE &gt; New Document &lt; /TITLE&gt; &lt;script language="javascript&qu
jQuery读取选择结果集合
sinat_36841379的博客
11-29 2011
我们为什么想要使用循环读取结果集合呢？ 一般来说，在选择集上执行任何的操作都将集合看成是一个整体，有些时候我们想单独地为每一个元素进行操作。此时我们就想到使用循环读取结果集合，当然你也可以不使用这个方法，看实际的需求以及哪种用法更加适合。而在这里我们会使用循环读取结果集合，它就相当于jQuery的for循环。 假定我们希望建立某个DOM元素中所有链接的一个列表（可能是这个有很多用户提供内容的网
jquery对象集
weixin_30632089的博客
05-27 51
平时使用的jquery选择器：$(.class)的含义就是获得当前HTML中所有符合选择器的DOM对象 他的结果是一个集合，就算你使用id选择器 另外要区分好jquery的方法以及js的方法，如果用jq的id选择器得到的是jq对象，是不能直接使用js方法，可以通过索引获得对象，该对象就是DOM对象，可以使用js方法。 　　如：$( "#object" )[0] 得到的是DOM对象 jque...
jqery 遍历对像/数组/集合
LLG
04-01 1197
转载自: 网络        1.jquery 遍历对象      "-//W3C//DTD HTML 4.0 Transitional//EN">             New Document      "javascript" type="text/javascript" src="jquery.min.js">     "text/javascript">      
jQuery学习笔记——事件
最新发布
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值