3.4.1 jQuery命名空间的方法

发表于 更新于 分类于 ， ， Waline： 本文字数： 6.3k 阅读时长 ≈ 6 分钟

3.4.1 jQuery命名空间的方法

jQuery还提供了一个jQuery命名空间,可以把jQuery命名空间下的方法当成jQuery的类方法,也就是说,开发者可以直接采用”jQuery.方法名“或”$.方法名“的形式来调用这些工具方法。

jQuery工具属性

jQuery.support:该属性返回一个JavaScript 对象,该对象中包含了浏览器是否支持某个特性。例如jQuery.support.ajax返回true,表明用户浏览器支持创建XMLHttpRequest对象。该属性返回的对象包含了如下常用属性。

jQuery.support包含的属性

属性 描述
ajax 如果用户浏览器支持创建XMLHttpRequest对象,即可返回true。
cors 如果可以创建XMLHttpRequest 对象,并且该属性有withCredentials 属性,则该属性返回true。

jQuery工具方法

判断方法

方法 描述
jQuery.isArray(object) 判断object是否为数组,如果是则返回true。
jQuery.isEmptyObject(object) 判断object是否为空对象(不包含任何属性),如果是则返回true。
jQuery.isFunction(object) 判断object是否为函数,如果是则返回true。
jQuery.isNumeric(value) 判断value是否为数值,如果是则返回true。
jQuery.isPlainObject(object) 判断object是否为普通对象(用{}(大括号)语法创建的对象或new Object创建的对象),如果是则返回true。
jQuery.isWindow(object) 判断object是否为窗口,如果是则返回true。
jQuery.isXMLDoc(node) 判断node是否位于XML文档内,或node本身就是XML文档,如果是则返回true。

其他方法

方法 描述
jQuery.error(string) 该方法用于抛出一个Error对象,传入string参数将作为关于Error对象的描述。
jQuery.globalEval(code) 用于执行code代码。该方法的功能类似于JavaScript提供的eval()函数。
jQuery.noop() 代表一个空函数。
jQuery.now() 返回代表当前时间的数值。
除了上面这些基本的工具方法之外,jQuery 命名空间下还提供了如下工具方法,这些工具方法并不是用于操作DOM的,而是用于操作普通的字符串、数组和对象的,但这些方法对简化开发者的JavaScript编程一样大有裨益。

1.字符串、数组和对象相关工具方法

操作字符串的方法

方法 描述
jQuery.parseJSON(string) 将符合JSON规范的字符串解析成JavaScript对象或数组。
jQuery.parseXML(string) 将符合XML规范的字符串解析成XML节点。
jQuery.trim(str) 截断字符串前后的空白。

操作对象的方法

方法 描述
jQuery.extend(target,object1,[objectN]) 用于将object1、objectN的属性合并到target对象里。如果target里有和object1、objectN同名的属性,则object1、objectN的属性值将覆盖target的属性值;如果target中不包含object1、objectN里所包含的属性值,则object1、objectN的属性值将会被添加到target对象里。
jQuery.type(object) 返回object代表的类型。当object不存在或为undefined时返回”undefined";如果object为null时返回”null";如果object为true或false时返回”boolean";如果object为数值时返回”number";如果object 为字符串时返回”string";如果object 为函数时返回”function";如果object为数组时返回”array";如果object为日期时返回”date";如果object为正则表达式时返回”regexp"。

操作数组的方法

方法 描述
jQuery.grep(array,callback,[invert]) 该方法用于对array数组进行筛选。callback是一个形如function(val,index){}的函数,其中index是对象的属性名或数组的索引,value为对应的属性值或数组元素。grep将会依次把array数组元素的索引和值传入callback函数,如果callback函数返回true则保留该数组元素,否则删除数组元素。如果将invert指定为true,则当callback函数返回true时,反而会删掉该数组元素。
jQuery.inArray(value,array) 用于返回value在array中出现的位置。如果array中不包含value元素,则返回-1。
jQuery.makeArray(object) 用于将类数组对象(例如HTMLCollection对象)**转换为真正的数组对象**。类数组对象有length属性,其元素索引为0到length-1之间。
jQuery.map(array,callback) 该函数用于将array数组转换为另一个数组。callback是一个形如function(val,index){}的函数,其中index是数组的索引,val为数组元素。map将会依次把array数组元素的索引和值传入callback函数,每次传入callback函数后的返回值将作为新数组的元素—这样就产生了一个新数组。
jQuery.merge(first,second) 合并first和second两个数组。将两个数组的元素合并到新数组里并不会删除重复值。
jQuery.unique(array) 删除array数组中的重复值。
jQuery.uniqueSort(array) 删除array数组中的重复值,从jQuery 3.0开始,jQuery推荐使用uniqueSort()代替原有的unique()方法。

遍历对象或数组

方法 描述
jQuery.each(object,callback) 该方法用于遍历JavaScript对象和数组(不是遍历jQuery对象)。
其中:
  • 第一个参数object就是要遍历的对象或数组,
  • 第二个参数callback是一个形如function(index,value){}的函数,其中
    • index 是对象的属性名或数组的索引,
    • value 为对应的属性值或数组元素。

如果想中途退出each()遍历,则让callback函数返回false即可,这样其他返回值将被忽略。

程序示例

下面的代码示范了上述工具方法的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 工具方法 </title>
</head>

<body>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 测试jQuery.support
        document.writeln("浏览器是否支持创建XMLHttpRequest："
            + $.support.ajax + "<br />");

        // 测试jQuery.support
        document.writeln("XMLHttpRequest是否有withCredentials："
            + $.support.cors + "<br />");

        // 去除字符串前后的空白
        document.writeln("$.trim('    ddd'));的结果是"
            + $.trim("    ddd") + "<br />");

        // 遍历数组
        $.each(["java", "ajax", "java ee"], function (index, value) {
            document.writeln("['java' , 'ajax' ,'java ee']的第"
                + index + "个元素为:" + value + "<br />");
        });

        // 以指定函数过滤数组
        var grepResult = $.grep(["java", "ajax", "java ee"]
            , function (value, index) {
                // 当数组元素的字符个数大于5时被保留
                return value.length > 5;
            });
        document.writeln("['java' , 'ajax' ,'java ee']中数组元素的"
            + "字符个数大于5的还有："
            + grepResult + "<br />");

        // 以旧数组创建新数组
        var mapResult = $.map(["java", "ajax", "java ee"]
            , function (value, index) {
                // 当数组元素和索引值连缀在一起作为新的数组元素
                return value + index
            });
        document.writeln("以['java' , 'ajax' ,'java ee']创建的新数组为："
            + mapResult + "<br/>");

        // 创建div元素
        var div = $("<div>aa<div>");
        // 以相同的两个div创建数组
        var divArr = [div, div];
        document.writeln("divArr.length的值为：" + divArr.length + "<br />");

        // 执行$.uniqueSort去除重复元素
        document.writeln("$.uniqueSort(divArr).length的结果为："
            + $.uniqueSort(divArr).length + "<br />");

        var str = "aa";
        // 以两个相同的字符串创建数组
        var strArr = [str, str];
        document.writeln("strArr.length的值为："
            + strArr.length + "<br />");

        // 执行$.uniqueSort去除重复元素
        document.writeln("$.uniqueSort(strArr).length的结果为："
            + $.uniqueSort(strArr).length + "<br />");

        // 解析JSON字符串
        var result = $.parseJSON('[{"name":"孙悟空","age":500},'
            + '{"name":"白骨精","age":21}]');
            
        for (var i = 0, len = result.length; i < len; i++) {
            document.writeln("第" + i + "个角色的年龄是："
                + result[i].name + "，年龄是："
                + result[i].age + "<br/>");
        }
    </script>
</body>

</html>

运行该程序将可看到如下效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
浏览器是否支持创建XMLHttpRequest：true
XMLHttpRequest是否有withCredentials：true
$.trim(' ddd'));的结果是ddd
['java' , 'ajax' ,'java ee']的第0个元素为:java
['java' , 'ajax' ,'java ee']的第1个元素为:ajax
['java' , 'ajax' ,'java ee']的第2个元素为:java ee
['java' , 'ajax' ,'java ee']中数组元素的字符个数大于5的还有：java ee
以['java' , 'ajax' ,'java ee']创建的新数组为：java0,ajax1,java ee2
divArr.length的值为：2
$.uniqueSort(divArr).length的结果为：1
strArr.length的值为：2
$.uniqueSort(strArr).length的结果为：1
第0个角色的年龄是：孙悟空，年龄是：500
第1个角色的年龄是：白骨精，年龄是：21