当前位置: 首页>前端>正文

jquery date工具类 jquery的工具函数有哪些

实际开发中直接使用。

$.函数名()

在jQuery中,主要有以下5大类工具函数。
(1)字符串操作
(2)URL操作
(3)数组操作
(4)对象操作
(5)检测操作

字符串操作

字符串操作的工具函数,暂时只有一种,那就是$.trim()。在jQuery中,我们可以使用$.trim()方法来去除字符串首尾的空白字符。

$.trim(str)

$.trim()方法是一个全局函数,应该使用jQuery对象直接调用。这个方法会返回去除空格后的字符串。

$(function () {
            var str ="  绿叶,给你初恋般的感觉。  "
            console.log("开始长度:" + str.length);
            var str = $.trim(str);
            console.log("最终长度:" + str.length);
        })

URL操作

有关URL操作的工具函数,暂时也只有一种,那就是:$.param()。在jQuery中,我们可以使用$.param()方法将数组或对象转化为字符串序列,以便用于URL查询字符串或AJAX请求。

$(function () {
            var person = {
                name:"helicopter",
                age:25
            }
            var str = $.param(person);
            console.log(str);
        })

控制台结果:name=helicopter&age=25

param()方法把一个对象转换成用&符号连接起来的字符串序列,这个序列可以用于URL查询字符串或AJAX请求。

数组操作

方法 说明
$.inArray() 判断元素
$.merge() 合并数组
$.makeArray() 转换数组
$.grep() 过滤数组
$.each() 遍历数组

  1. 判断元素:$.inArray() 判断某个值是否存在于数组中。
$.inArray(value, array)

参数value是一个值,参数array是一个数组。$.inArray(value, array)表示判断value是否存在于array。如果存在,则返回value的下标;如果不存在,则返回-1。
$.inArray()方法跟JavaScript中的indexOf()方法很相似,indexOf()返回的是字符串首次出现的位置,而$.inArray()返回的是元素在数组中的位置。如果找到,返回的是一个大于或等于0的值(下标);如果未找到,则返回-1。

$(function(){
            var arr = [1, 2, 3, 4, 5];
            var index = $.inArray(3, arr);
            if(index == -1){
                console.log("没有找到元素");
            }else{
                console.log("元素下标为:" + index);
            }
        })

控制台结果:元素下标为:2

2.合并数组:$.merge() 使用$.merge()方法来合并两个数组。

$.merge(arr1, arr2)
$.merge()方法会合并arr1和arr2,然后返回新的数组。
  1. 转换数组:$.makeArray() 使用$.makeArray()方法将“类数组对象”转换为真正的数组。什么叫类数组对象呢?
    类数组对象具有两个特性:
    1)具有:具有index和length属性;
    2)不具有:不具有数组的操作方法,比如push,shift等。
    js中有两个最典型的类数组对象:arguments和HTMLCollection集合(即通过getElementByTagName这类方法获得的集合.
$.makeArray(obj)

$.makeArray()方法返回值是一个数组。如果参数obj不是类数组对象,则返回值是一个空数组。

function test() {
            var arr = $.makeArray(arguments);
            console.log(arr);
        }
        test("yes",1,{});

控制台结果:yes",1,Object 为什么要将arguments、nodeList这些类数组对象转换为真正的数组呢?因为转换为数组后,我们就可以调用数组的各种方法来操作这些对象!

举例:将nodeList转换为Array

var arr = $.makeArray($("li"));
            $("ul").html(arr.reverse());
//颠倒li顺序

4.过滤数组:$.grep() 使用$.grep()方法来过滤数组中不符合条件的元素。

$.grep(array, function(value,index){
    ……
}, false)

第1个参数array是一个数组。
第2个参数是一个匿名函数。该匿名函数有两个形参:value表示当前元素的“值”;index表示当前元素的“索引”。
第3个参数是一个布尔值。如果为false,则.grep()只会收集函数返回true的数组元素;如果为true,则.grep()只会收集函数返回false的数组元素。

$(function(){
            var arr = [3, 9, 1, 12, 50, 21];
            var result = $.grep(arr, function(value,index){
                return value > 10;
            },false);
            console.log(result);
        })

结果:12,50,21 把第3个参数改为true时,此时控制台输出结果:3,9,1

在实际开发中,$.grep()方法常用于获取两个数组中相同的部分或不相同的部分

var a = [3, 9, 1, 12, 50, 21];
var b = [2, 9, 1, 16, 50, 32];
            var result = $.grep(a, function(value,index){
                if(b.indexOf(value) >=0){
                    return true;
                }
            },false);
            console.log(result);

结果:9,1,50 如果想要获取数组a中跟数组b不同的部分,只要把$.grep()方法的第3个参数改为true就可以了。

  1. 遍历数组:$.each() 使用$.each()方法来遍历数组。
$.each(array, function(index, value){
    ……
})

第1个参数array是一个数组。
第2个参数是一个匿名函数。该匿名函数有两个形参,index表示当前元素的“索引”,value表示当前元素的“值”。
如果需要退出each循环,可以在回调函数中返回false,即return false。
这里是function(index, value),而不是function(value,index).grep()和.each()两个方法中的匿名函数参数顺序是不一样的!

$(function(){
            var arr = ["HTML","CSS","JavaScript"];
            $.each(arr, function(index,value){
                var result = "下标:" + index + ",值:" + value;
                console.log(result);
            })
        })

上面代码其实可以等价于:

var result = "下标:" + index + ",值:" + arr[index];

对象操作
jQuery中,涉及对象操作的工具函数只有一个,那就是jquery date工具类 jquery的工具函数有哪些,jquery date工具类 jquery的工具函数有哪些_数组,第1张.each()不仅可以用于遍历数组,还可以用于遍历对象。

$.each(obj, function(key, value){
    ……
})

$.each()方法中,第1个参数obj是一个对象,第2个参数是一个匿名函数。该匿名函数有两个形参:key表示“键”;value表示“值”。
如果需要退出each循环,可以在回调函数中返回false,即return false。
从语法上看,$.each()用于遍历数组,跟用于遍历对象,是完全不一样的。

$(function(){
            var person = {
                name:"helicopter",
                age:25,
                hobby:"swimming"
            };
            $.each(person, function(key, value){
                console.log(value);
            })
        })

结果:
helicoper
25
swimming
上面代码其实可以等价于:

$.each(person, function(key, value){
    console.log(person[key]);
})

检测操作
有时我们需要获取对象或元素的各种状态,例如是否为数组、是否为对象、是否为空等,然后根据这些状态值来决定程序的下一步操作。
函数 说明
$.isFunction(obj) 判断变量是否为一个函数,返回true或false
$.isArray(obj) 判断变量是否为一个数组,返回true或false
$.isEmptyObject(obj) 判断变量是否为一个空对象,返回true或false
$.isPlainObject(obj) 判断变量是否为一个原始对象,返回true或false
$.contains(node1, node2) 判断一个DOM节点是否包含另一个DOM节点,返回true或false

检测变量是否数组

var a = ["HTML","CSS","JavaScript"];
            console.log($.isArray(a));    //true
            var b = {name:"helicopter", age:25};
            console.log($.isArray(b));    //false

原生JavaScript判断是否数组

function isArr(o){
            return Object.prototype.toString.call(o) == "[object Array]";
        }
        var a = ["HTML","CSS","JavaScript"];
        console.log(isArr(a));    //true
        var b = {name:"helicopter", age:25};
        console.log(isArr(b));    //false

检测变量是否空对象

$(function(){
            var a = {};
            var b = {
                name:"helicopter",
                age:25,
                hobby:"swimming"
            };
            console.log($.isEmptyObject(a));    //true
            console.log($.isEmptyObject(b));    //false
        })

检测一个节点是否包含另一个节点

$(function(){
            var oDiv = $("div");
            var oStrong = $("strong");
            console.log($.contains(oDiv, oStrong));      //false
        })

怎么输出结果是false?出现这种情况,那是因为小伙伴们没有搞清楚$.contains()方法的两个参数。其中,$.contains()方法的两个参数必须是DOM对象,不能是jQuery对象,因此正确的写法应该是:

var oDiv = document.getElementsByTagName("div")[0];
    var oStrong = document.getElementsByTagName("strong")[0];
    console.log($.contains(oDiv, oStrong));     //true

自定义工具函数
可以使用$.extend()方法来自定义工具函数,以便供自己开发使用。

(function($){
    $.extend({
        "函数名": function(参数){
            ……
        }
    });
})(jQuery);

原型:

(function(){})()

是JavaScript立即执行函数,这种用法在高级开发中经常用到。

$.extend({
    "函数名": function(参数){
        ……
    }
});

如果不考虑其他情况,仅仅使用上面这段代码,其实也可以定义jQuery工具函数。但是为什么我们不这样做,而还要在外面套一个立即执行函数呢?
这是因为很多其他的JavaScript库都会使用到“$”这个符号,使用$.extend()定义工具函数时,就有可能受到其他JavaScript库中“$”变量的影响。我们在外面套一个如下所示的立即执行函数,是为了让“$”变量只属于这个立即执行函数的作用域,从而避免受到其他JavaScript库的污染。

(function($){
    ……
})(jQuery);

例子:

(function($){
            $.extend({
                "maxNum": function(m, n){
                    return (m>n)?m:n;
                }
            });
        })(jQuery);
        $(function () {
            var result=$.maxNum(10, 5)
            console.log("最大值是:"+result);
        })

定义了一个maxNum()函数,用于计算两个数的最大值。特别注意一点,自定义的工具函数跟普通函数在调用时是不一样的。对于自定义的工具函数,我们需要在前面加上“$.”,以表示这是属于jQuery对象下的一个函数。

练习题:1. 请使用jQuery自定义一个工具函数,函数名为sort()。该函数功能是接收一个数组作为参数,然后对数组中所有元素从小到大进行排序,最后返回排序好的数组。
代码

<script src="jquery.min.js"></script>
   <script src="jquery.min.js"></script>
    <script>
        (function($){
            $.extend({
                "sort": function(m){
                        var temp;
                        for(var i=0;i<m.length;i++)
                        {
                            for (var j=0;j<m.length-i-1;j++){
                                if(m[j]>m[j+1])
                                {
                                    temp=m[j];
                                    m[j]=m[j+1];
                                    m[j+1]=temp;
                                }
                            }
                        }
                        return m;
                }
            });
        })(jQuery);
        $(function () {
            m=[4,2,8,7,3,1]
            var result=$.sort(m)
            console.log(result);
        })
    </script>



https://www.xamrdz.com/web/2pk1960246.html

相关文章: