蓝蓝站点

Java读书笔记

发表于 更新于 分类于 ， ， 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

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

3.4 jQuery支持的方法

前面都是在介绍如何获取jQuery对象,一旦获取了jQuery对象,就可直接调用jQuery的方法来操作DOM了。jQuery提供了大量方法用以简化DOM操作,从而开发者可以用更一致、更精练的代码来动态改变HTML页面。

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

3.3.3 串联方法

前面的过滤、导航等方法都会对原有的jQuery对象进行”破坏”—通常都会减去原jQuery对象中包含的部分DOM 对象。下面的方法则能以不同方式找到被进行”破坏”操作之前的jQuery对象。

  • add(selector|elements|html|jQuery[,context]):为原来的jQuery对象添加新的DOM元素。该方法的参数既可以是任何合法的选择器,也可以是原始的HTML代码(该方法将会把HTML代码转化为DOM对象后添加到jQuery里),也可以是未经包装的DOM元素,还可以是另一个jQuery对象(该方法会将另一个jQuery中包含的DOM元素添加到原有的jQuery对象中)。如果指定了selector参数,则可以指定context参数,以只在指定context中查找匹配的DOM元素。
    • jQuery 1.9修改了该add方法,修改后的add()方法返回的jQuery对象总会按照这些DOM节点在document(文档)中的顺序来排列它们。
  • andBack():该方法通常与上一节介绍的查找方法结合使用,作用是将查找之前的结果和查找之后的结果混合在一起。
  • end():该方法通常也是和前面的过滤、查找方法结合使用,用于将jQuery对象恢复到上一次执行过滤、查找方法之前的状态。
    • end()方法的作用有点类似于”撤销“操作,在对某个jQuery 对象调用end()方法之后,该jQuery对象的状态将恢复到调用end()前执行某个方法之前的状态。

如下的代码示范了这两个方法的用法。

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
<!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>
    <div style="padding:20px">
        <div id="java">疯狂Java讲义</div>
        <div id="javaee">轻量级Java EE企业应用实战</div>
        <div id="ajax">疯狂前端开发讲义</div>
        <div id="xml">疯狂XML讲义</div>
        <div id="ejb">经典Java EE企业应用实战</div>
        <div id="android">疯狂Android讲义</div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 将文档中id为java的元素和HTML字符串合并成一个jQuery对象
        // 将两个元素插在<body.../>元素的前面
        $("#java").add("<p>新加的元素</p>").prependTo("body");

        // 获取id为ajax节点的下一个兄弟节点，再将id为ajax的节点与此链为一体。
        // 实际返回id为ajax的节点、以及id为ajax的下一个节点
        $("#ajax").next().addBack().css("border", "2px solid black");
        
        // 先获取ajax节点的下一个节点，再次使用end()方法重新获取之前的ajax节点
        // 实际方返回的就是$("#ajax")的结果
        $("#ajax").next().end().css("background-color", "#ffaaaa");
    </script>
</body>

</html>

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

3.3.2 仿DOM导航查找的相关方法

在DOM模型中,可以利用节点之间的父子关系进行导航,通过这种导航关系可以找到当前节点的兄弟节点、父节点和子节点等。DOM模型的导航关系虽然简单明了,但用起来依然比较烦琐,jQuery进一步简化了这种导航关系。在jQuery中可以利用如下方法找到当前jQuery对象(可能包含一个或多个DOM对象)的兄弟节点、父节点、子节点对应的jQuery对象。

获取距离最近元素

方法 描述
closest(selector或者jQuery或者element) 查找距离当前jQuery对象最近且符合传入参数的元素。该方法的参数既可以是任何合法的选择器,也可以是原生的DOM 元素,还可以是另一个jQuery对象。该方法返回由符合条件的DOM元素包装成的jQuery对象。

最近的可定位的元素

方法 描述
offsetParent() 查找当前jQuery对象的最近且能定位(如CSS样式中position属性值为relative 或absolute 的元素)的祖先元素。返回由符合条件的DOM 元素包装成的jQuery对象。

获取DOM内的内容

方法 描述
contents() 查找当前jQuery对象包含的DOM对象内的全部内容,包括DOM元素和文本。如果jQuery包装的DOM元素是<iframe>,则获取该iframe所装载的文档的内容。

获取后代元素

方法 描述
find(selector或者element或者jQuery) 查找当前jQuery对象包含的DOM对象内能**匹配传入参数的所有后代元素**。该方法的参数既可是任何合法的选择器,也可是原生的DOM元素,还可是另一个jQuery对象。返回由符合条件的DOM元素包装成的jQuery对象。

获取全部后代元素

方法 描述
children([selector]) 查找当前jQuery对象包含的DOM对象内的全部后代元素。如果指定了selector 选择器,则只查找匹配selector 选择器的后代元素。返回由符合条件的DOM元素包装成的jQuery对象。

获取父元素

方法 描述
parent([selector]) 查找当前jQuery对象包含的DOM对象的父元素。如果指定了selector选择器,则该父元素还必须匹配selector选择器。返回由符合条件的DOM元素包装成的jQuery对象。

获取祖先元素

方法 描述
parents([selector]) 查找当前jQuery对象包含的DOM对象的所有祖先元素。如果指定了selector选择器,则只找出匹配selector的祖先元素。返回由符合条件的DOM元素包装成的jQuery对象。
parentsUntil([selector或者element] [,filter]) 查找当前jQuery对象(实际是该对象包含的DOM对象)中匹配selector的元素或element元素的所有祖先元素。如果指定了filter选择器,则只找出匹配filter的祖先元素。返回由符合条件的DOM元素包装成的jQuery对象。

获取前面的兄弟元素

方法 描述
prev([selector]) 查找紧邻当前jQuery对象对象包含的DOM对象之前的元素。如果指定了selector 选择器,则该元素必须匹配selector 选择器。返回由符合条件的DOM元素包装成的jQuery对象。
prevAll([selector]) 查找当前jQuery对象包含的DOM对象之前的所有兄弟元素。如果指定了selector选择器,则只找出匹配selector选择器的兄弟元素。返回由符合条件的DOM元素包装成的jQuery对象。
prevUntil([selector或者element] [,filter]) 查找当前jQuery对象包含的DOM对象**之前匹配selector的元素或element元素之后的所有兄弟元素**。如果指定了filter选择器,则只找出匹配filter选择器的兄弟元素。返回由符合条件的DOM元素包装成的jQuery对象。

获取后面的兄弟元素

方法 描述
next([selector]) 查找紧跟当前jQuery对象包含的DOM对象**之后的元素**。如果指定了selector选择器,则该元素必须匹配selector选择器。返回由符合条件的DOM元素包装成的jQuery对象。
nextAll([selector]) 查找当前jQuery对象包含的DOM对象**之后的所有兄弟元素**。如果指定了selector 选择器,则只找出匹配selector 选择器的兄弟元素。返回由符合条件的DOM元素包装成的jQuery对象。
nextUntil([selector或者element] [,filter]) 查找当前jQuery对象包含的DOM对象**之后匹配selector的元素或element元素之前的所有兄弟元素**。如果指定了filter选择器,则只找出匹配filter选择器的兄弟元素。返回由符合条件的DOM元素包装成的jQuery对象。

获取所有的兄弟元素

方法 描述
siblings([selector]) 查找当前jQuery对象包含的DOM 对象前后的所有兄弟元素。如果指定了selector选择器,则只找出匹配selector选择器的兄弟元素。返回由符合条件的DOM元素包装成的jQuery对象。

提示:siblings([selector])方法返回的结果相当于prevAll([selector])和nextAll([selector])方法返回结果的总和。

程序示例

下面的程序示范了上面这些DOM导航相关方法的用法。

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
<!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>
    <div>
        <div id="java">疯狂Java讲义</div>
        <div id="javaee">轻量级Java EE企业应用实战</div>
        <div id="ajax">疯狂前端开发讲义</div>
        <div id="xml">疯狂XML讲义</div>
        <div id="ejb">经典Java EE企业应用实战</div>
        <div id="android">疯狂Android讲义</div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 获取body>div之内所有内容（包括节点和文本），实际返回div下的6个子div。
        $("body>div").contents().css("background-color", "#ddd");

        // 获取id为ajax节点的下一个兄弟节点
        $("#ajax").next().css("border", "2px dotted black");

        // 获取id为ajax节点后面的、id为android的节点之前的所有兄弟节点
        $("#ajax").nextUntil("#android").css("font-size", "20pt");

        // 获取id为ajax节点的上一个兄弟节点
        $("#ajax").prev().css("border", "2px solid black");

        // 获取id为ajax节点的之前的、id为java的节点之后的所有兄弟节点
        $("#ajax").prevUntil("#java").height(50);

        // 获取获取id为ajax节点的、id为java的兄弟节点
        $("#ajax").siblings("#java")
            .append("<b> 是ID为ajax的节点的兄弟节点（且其id为java）</b>");
            
        // 取出所有div元素的父元素，将会输出body元素、和一个div元素
        $("div").parent().each(function () {
            alert($(this).html());
        });
    </script>
</body>

</html>

从上面的程序可以看出:

使用jQuery 的仿DOM导航方法可以更简单、更便捷地访问当前节点的兄弟节点、父节点和子节点,而且这些方法的返回值依然是jQuery 对象,因此可以直接调用jQuery对象提供的工具方法。

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

3.3.1 过滤相关方法

下面是一组对类数组的jQuery对象进行过滤的方法,这些方法将会过滤掉jQuery对象里包含的部分DOM对象。假如某个jQuery对象里包含5个DOM对象,则调用这些过滤方法后,该jQuery对象里可能就只包含3个DOM对象了。

过滤方法

按索引取出一个jQuery对象

方法 描述
eq(position) 该方法返回由jQuery里包含的第position+1个元素包装成的jQuery对象。

返回首尾元素的方法

方法 描述
first() 该方法返回由jQuery对象中包含的第一个元素包装成的jQuery对象。
last() 该方法返回由jQuery对象中包含的最一个元素包装成的jQuery对象。

保留特定DOM元素的方法

方法 描述
filter(表达式) 返回符合表达式的元素,不符合条件的元素将被移除
其中表达式可以是任意合法的selector 选择器,也可以是包含多个元素的数组,还可以是包含多个元素的jQuery对象。
方法 描述
filter(function(index)) 返回满足给定函数的元素。
这是一个迭代器函数,它将使用function函数迭代处理jQuery里包含的每个元素。在function函数里使用this来代表当前正处理的DOM元素,如果想获取该DOM元素对应的jQuery对象,使用$(this)即可。function是一个形如function(index){}的函数,其中index代表jQuery里元素的索引,该索引从0开始。如果将当前元素传入function函数后返回true,则该元素被保留,否则将被删除。

移除特定DOM元素的方法

方法 描述
not(表达式) 从jQuery对象里删除所有匹配表达式的DOM对象。
其中表达式可以是任意合法的selector选择器,也可以是包含多个元素的数组,还可以是包含多个元素的jQuery对象。该方法与filter(表达式)方法的作用完全相反。
方法 描述
not(function(index)) 删除满足给定函数的元素。
这是一个迭代器函数,它将使用function函数迭代处理jQuery里包含的每个元素。在function函数里使用this来代表当前正处理的DOM元素,如果想获取该DOM元素对应的jQuery对象,使用$(this)即可。function是一个形如function(index){}的函数,其中index代表jQuery里元素的索引,该索引从0开始。如果将当前元素传入function函数后返回true,则该元素被删除,否则将被保留。该方法与filter(function(index))方法的作用完全相反。

测试方法

方法 描述
is(表达式) 用表达式来检查该jQuery对象包含的元素集合,如果其中任意一个元素符合表达式,就返回true;如果没有元素符合,或者表达式无效,就返回false。

其中表达式可以是任意合法的selector选择器,也可以是包含多个元素的数组,还可以是包含多个元素的jQuery对象。

方法 描述
is(function(index)) 该方法是一个迭代器函数,它将使用function函数迭代处理jQuery 里包含的每个元素,如果将任意一个元素传入function函数后返回true,则该方法返回true。

在function函数里使用this来代表当前正处理的DOM元素,如果想获取该DOM元素对应的jQuery对象,使用$(this)即可。function是一个形如function(index){}的函数,其中index代表jQuery里元素的索引,该索引从0开始。如果将任意一个元素传入function函数后返回true,则该方法返回true。

转为其他对象的方法

方法 描述
map(callback(index)) 该方法用于将jQuery对象里包含的一系列DOM 对象转换成其他对象(这些对象既可包含原始DOM对象,也可不包含原始DOM对象)。callback函数会依次处理jQuery里包含的每个DOM对象,每次函数执行后的返回值将作为新jQuery对象里包含的新元素。callback是一个形如callback(index){}的函数,其中index代表jQuery里元素的索引,该索引从0开始。

截取方法

方法 描述
slice(start,end) 返回由jQuery里索引从start开始到end结束的DOM元素组成的jQuery对象。

程序示例

下面的程序示范了相关过滤方法的用法。

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
<!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>
    <div>
        <div id="java">疯狂Java讲义</div>
        <div id="javaee">轻量级Java EE企业应用实战</div>
        <div id="ajax">疯狂前端开发讲义</div>
        <div id="xml">疯狂XML讲义</div>
        <div id="ejb">经典Java EE企业应用实战</div>
        <div id="android">疯狂Android讲义</div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 对div之内的div元素的第四个元素设置字体为24
        $("div>div").eq(3).css("font-size", "24pt");

        // 对div之内的div元素进行过滤，必须满足id为ajax
        $("div>div").filter("#ajax").css("background-color", "#aaa");

        // 对div之内的div元素进行过滤，要求div内的字符串长度大于8
        $("div>div").filter(function () {
            return this.innerHTML.length > 8;
        }).css("border", "1px solid black");

        // 对div之内的div元素进行过滤，必须满足id不为ajax
        $("div>div").not("#ajax").css("font-weight", "bold");

        // 对div之内的div元素进行过滤，取出索引从3到5的元素
        $("div>div").slice(3, 5).height(60);
        
        // 将div之内的div元素映射成另一个类数组的jQuery对象
        // 此处使用了箭头函数作为callback函数
        var result = $("div>div").map(i => i);
        console.log(result);
    </script>
</body>

</html>

最后一行粗体字代码使用map()方法对jQuery所包含的多个元素进行转换,转换函数使用了箭头函数:map(i=>i),这意味着jQuery原来包含的每个元素直接被转换成它的索引。在浏览器的控制台中可以看到最后的输出如下。

1
Object { 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, length: 6, prevObject: {…} }

从该输出可以看出,$("div>div")原来一共包括6个div元素,现在每个<div>元素都被转换成了该元素对应的索引。

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

3.3 jQuery操作类数组的工具方法

很多时候,jQuery的$()函数都返回一个类似数组的jQuery对象,例如$("div")将返回由页面中所有<div>元素包装成的jQuery对象,这个jQuery对象实际上包含了多个<div>元素对应的DOM对象。在这种情况下,jQuery提供了以下几个常用属性和方法来操作作为类数组的jQuery对象。

jQuery操作数组的常用属性和方法

常用属性

  • length:该属性返回jQuery里包含的DOM元素的个数。
  • context:该属性返回获取该jQuery对象传入的context参数。
  • jquery:该属性返回jQuery的版本。

迭代器

  • each(function(index)):该方法是一个迭代器函数,它将使用function函数迭代处理jQuery里包含的每个元素。在function函数里使用this来代表当前正在处理的DOM元素,如果想获取该DOM元素对应的jQuery对象,使用$(this)即可。function是一个形如function(index){}的函数,其中index代表jQuery里元素的索引,该索引从0开始。

返回DOM的方法

  • get():该方法返回由jQuery里包含的所有DOM元素组成的数组。
  • get(index):该方法返回jQuery里包含的第index+1个DOM元素(第一个元素的索引为0)。

上面的两个get方法非常重要,它们可以将jQuery对象再次恢复成DOM对象。根据前面的介绍可知,jQuery的思路是把所有DOM对象包装成jQuery对象来处理,这种方式简单优雅,但总有些地方有失灵活。如果开发者需要操作DOM元素,则可通过这两个方法把jQuery对象转换成DOM对象。尤其需要指出的是,无参的get()方法总是返回一个数组—即使原始的jQuery对象里只有一个DOM对象,调用jQuery对象的无参的get()方法也将返回一个长度为1的数组。

返回索引的方法

index(element或者selector):该方法返回element元素(或匹配selector选择器的元素)在当前jQuery对象中的索引,其中element既可以是jQuery里包含的多个DOM对象之一,也可以是由任一DOM对象包装成的jQuery对象。

转为数组的方法

toArray():将该jQuery对象中包含的所有DOM对象转换为数组。

程序示例

下面的程序示范了如何使用这些工具方法来操作作为类数组的jQuery对象。

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
<!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>
    <div>
        <div id="java">疯狂Java讲义</div>
        <div id="javaee">轻量级Java EE企业应用实战</div>
        <div id="ajax">疯狂前端开发讲义</div>
        <div id="xml">疯狂XML讲义</div>
        <div id="ejb">经典Java EE企业应用实战</div>
        <div id="android">疯狂Android讲义</div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 获取div之内所有的div元素，并迭代处理每个元素
        $("div>div").each(function (i) {
            this.innerHTML += " 添加的内容" + i;
        });
        // 返回div之内的所有div元素的个数，下面将输出6
        console.log($("div>div").length);
        // 获取div之内的第二个div元素，下面将输出“轻量级Java EE企业应用实战...”
        console.log($("div>div").get(1).innerHTML);
        // 获取id为java的div元素。注意：$("#java").get()返回一个数组
        console.log($("#java").get()[0].innerHTML);
        // 所有div元素之内，id为ejb的div的索引，下面将输出4.
        console.log($("div>div").index($("#ejb")));
    </script>
</body>
</html>

jQuery对象和DOM对象之间的转换

jQuery对象转成DOM对象

调用jQuery对象的无参的get方法或get(index)方法可以取得DOM对象.

DOM对象转成jQuery对象

在$()函数(或jQuery()函数)中传入DOM对象作为参数即可把DOM对象包装成jQuery对象.

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

3.2.5 表单相关的选择器

以下各选择器专门用于匹配各种表单控件。

:input选择符

:input:返回由所有input、textarea、select和button元素包装成的jQuery对象。
提示:该选择器已经过时了,因为它不是CSS规范里的,只是jQuery的扩展选择器,所以它不能利用原生DOM的性能优势,故性能较差。如果希望使用该选择器,则可以考虑使用.filter(":input")方法来代替。

过时了的选择符

下列选择器已经过时了,因为它不是CSS规范里的,只是jQuery的扩展选择器,不能利用原生DOM的性能优势,故性能较差。如果希望使用该选择器,则可以考虑使用[type="xxxx"]的属性选择器代替。如

  • :text,使用[type="text"]属性选择器替代.
  • :password使用[type="password"]属性选择器替代

:text

:text:返回由所有type="text"的input元素包装成的jQuery对象。

:password

:password:返回由所有type="password"的input元素包装成的jQuery对象。

:radio

:radio:返回由所有type="radio“的input元素包装成的jQuery对象。

:checkbox

:checkbox:返回由所有type="checkbox"的input元素包装成的jQuery对象。

:submit

:submit:返回由所有type="submit"的input元素包装成的jQuery对象。

:image

:image:返回由所有type="image"的input元素包装成的jQuery对象。

:reset

:reset:返回由所有type="reset"的input元素包装成的jQuery对象。

:button

:button:返回由所有按钮元素(包括type="button"的input元素)包装成的jQuery对象。

:file

:file:返回由所有文件域包装成的jQuery对象。

没有过时的选择符

:hidden

:hidden:返回由所有不可见元素以及指定了type="hidden"的input元素包装成的jQuery对象。
:hidden选择器不仅可以匹配表单控件,而且还可以匹配所有不可见的元素,包括<meta..../>等元素。

:enabled

:enabled:返回由所有可用的(未指定disabled属性)的表单控件包装成的jQuery对象。

:disabled

:disabled:返回由所有不可用的(指定了disabled 属性)的表单控件包装成的jQuery对象。

:checked

:checked:返回由所有指定了checked属性的表单控件包装成的jQuery对象。

:selected

:selected:返回由所有指定了selected的表单控件包装成的jQuery对象。

程序示例

下面的程序示范了上述选择器的用法。

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
<!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> 使用jQuery()函数 </title>
</head>
<body>
    <input id="user" type="text" />
    <br />
    <input id="pass" type="password" />
    <br />
    <textarea id="intro"></textarea>
    <br />
    <select id="gender" size="3" style="width:80px">
        <option value="male" selected>男</option>
        <option value="female">女</option>
    </select>
    <p>
        <input id="pass" type="checkbox" checked value="xx" />
        <br />
        <script type="text/javascript" src="../jquery-3.1.1.js">
        </script>
        <script type="text/javascript">
            // 获取所有的input、textarea、button元素,并设置value属性为test
            $(":input:not('select')").val("test");
            // 获取所有指定了selected属性的元素
            $(":selected").css("border", "2px dashed black");
            // 获取所有指定了checked属性的元素,并取消它们的选中
            $(":checked").prop("checked", false);
        </script>
</body>
</html>

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

3.2.4 以伪类选择器访问DOM元素

伪类选择符

下面介绍的这些伪类选择器的意义基本等同于CSS 3 中所定义的伪类选择器,在使用这些伪类选择器时通常会结合使用前面介绍的选择器,前面的选择器往往可以匹配一个以上的HTML 元素,而以下伪类选择器则用于增加额外的限制。但在某些情况下,jQuery 也可以直接使用伪类选择器来获取DOM元素。

索引相关伪类选择符

选择符 描述
:first 返回由匹配指定选择器第一个HTML元素包装成的jQuery对象。
:last 返回由匹配指定选择器最后一个HTML元素包装成的jQuery对象。
:parent 返回由匹配指定选择器且包含子元素或者文本的所有HTML 元素包装成的jQuery对象。
:even 返回由匹配指定选择器且索引为奇数的HTML元素包装成的jQuery对象。元素索引从0开始。
:odd 返回由匹配指定选择器且索引为偶数的HTML元素包装成的jQuery对象。
:eq(index) 返回由匹配指定选择器且**索引为index**的HTML元素包装成的jQuery对象。
:gt(index) 返回由匹配指定选择器且**索引大于index**的所有HTML元素包装成的jQuery对象。
:lt(index) 返回由匹配指定选择器且**索引小于index**的所有HTML元素包装成的jQuery对象。

内容相关的伪类选择符

选择符 描述
:lang(lang_code) 返回由匹配指定选择器且指定了对应语言代码的HTML元素包装成的jQuery 对象。如果单独使用该伪类选择器,将返回由所有指定了对应语言代码的HTML元素包装成的jQuery对象。
:contains(text) 返回由匹配指定选择器且包含text文本的HTML元素包装成的jQuery对象。如果单独使用该伪类选择器,将返回由所有包含text文本的HTML元素包装成的jQuery对象。
:empty 返回由匹配指定选择器且不包含任何内容(包含字符串也不行)的HTML元素包装成的jQuery对象。如果单独使用该伪类选择器,将返回由所有不包含任何内容(包含字符串也不行)的HTML元素包装成的jQuery对象。

包内其他内容相关的选择符

选择符 描述
:not(selector) 返回由匹配指定选择器但去除selector选择器匹配的HTML 元素的所有HTML元素包装成的jQuery对象。
:has(selector) 返回由匹配指定选择器且包含selector对应HTML元素的所有HTML元素包装成的jQuery对象。注意::has(selector)限定不是返回selector所匹配的HTML元素,而是返回由包含selector所匹配HTML元素的HTML元素包装成的jQuery对象。

可见性相关的伪类选择符

选择符 描述
:hidden 返回由匹配指定选择器且当前不可见的HTML元素包装成的jQuery对象。
:visible 返回由匹配指定选择器且当前可见的HTML元素包装成的jQuery对象。

其他

选择符 描述
:animated 返回由匹配指定选择器且当前正在执行动画效果的HTML元素包装成的jQuery对象。如果单独使用该伪类选择器,将返回由所有正在执行动画效果的HTML元素包装成的jQuery对象。
:target 返回由正在被访问的命名锚点的目标元素包装成的jQuery对象。
:focus 返回由匹配指定选择器且当前获得焦点的HTML元素包装成的jQuery对象。如果单独使用该伪类选择器,将返回由所有当前获得焦点的HTML 元素包装成的jQuery对象。

程序示例

下面的代码示范了以上伪类选择器的用法。

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
<!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> 使用jQuery()函数 </title>
    <style type="text/css">
        .test {
            font-size: 20pt;
        }
    </style>
</head>
<body>
    <ul>
        <li id="java">疯狂Java讲义</li>
        <li id="javaee" class="test">轻量级Java EE企业应用实战</li>
        <li id="ajax">疯狂前端开发讲义</li>
        <li id="xml">疯狂XML讲义</li>
        <li id="ejb">经典Java EE企业应用实战</li>
        <li>
            <span id="android">疯狂Android讲义</span>
        </li>
    </ul>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 访问ul元素下第一个li子元素。
        $("ul>li:first").append("<font color='red'> 是ul元素之内第一个li子元素</font>");

        // 访问ul元素之内，没有id属性的li子元素
        $("ul>li:not([id])").append("<font color='red'> 是ul元素之内、没有id属性li子元素</font>");

        // 访问ul元素之内，索引为偶数的li子元素，并为它们添加背景色
        $("ul>li:even").css("background-color", "#ccffcc");

        // 访问ul元素之内，索引大于4的li子元素(元素索引从0开始)
        $("ul>li:gt(4)").append("<br/><font color='red'> 是ul元素之内、索引大于4的li子元素</font>")
            .css("border", "1px dashed black");

        // 访问ul元素之内，且包含span元素的li子元素
        $("ul>li:has('span')").append(
            "<br/><font color='red'> 是ul元素之内、且包含span元素的li子元素</font>");
                // <font color="red"></font>
        // 访问li元素之内，且可见的span子元素
            $("li>span:visible").append(
                "<font color='red'> 是li元素之内，且可见的span子元素</font>")
                .css("background-color", "#bbbbbb");
    </script>
</body>
</html>

该程序同时使用了选择器和伪类选择器。

:lang伪类选择器

:lang伪类选择器是jQuery 1.9新增的,它用于根据语言代码来访问HTML元素。

下面代码示范了:lang伪类选择器的作用。

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
<!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> 使用jQuery()函数 </title>
    <style type="text/css">
        .abc {
            font-size: 12pt;
        }
    </style>
</head>

<body>
    <div lang="en">fkjava.org is a good training center!</div>
    <div lang="en-US">FKjava.org is a good training center!</div>
    <p lang="en">FKjava.org is a good training center!</p>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // // 访问所有lang属性值以en开头的元素
        $(":lang(en)").css("border", "1px dashed black");
        // // 访问lang属性值以en开头的p元素
        $("p:lang(en)").css("background-color", "grey");
    </script>
</body>

</html>

该程序中的第一行JS代码根据:lang(en)来获取元素,这样将会获取所有leng 属性为en或以en开头的元素,因此该页面中2个<div.../>和一个<p.../>元素都能匹配。
该程序中的第二行JS代码根据p:lang(en)来获取元素,这样将会获取所有leng属性为en或以en开头的p元素,因此该页面中只有一个<p.../>元素可以匹配。

子代伪类选择器

在下面的5个伪类选择器中,:first-child、:last-child和:first、:last有点相似,且:nth-child、:nth-last-child比较有用。

:nth-child伪类选择器

  • :nth-child(index/even/odd/equation):这个伪类选择器的功能比较强大,它有如下4种用法:
    • :nth-child(n):返回由匹配指定选择器且是其父节点内的第n个DOM节点包装成的jQuery对象,其中n为从1开始的元素索引。
    • :nth-child(even):返回由匹配指定选择器且在其父节点内的节点索引为偶数的HTML元素包装成的jQuery对象。
    • :nth-child(odd):返回由匹配指定选择器且在其**父节点内的节点索引为奇数**的HTML元素包装成的jQuery对象。
    • :nth-child(xn+m):返回由匹配指定选择器且在其父节点内的节点索引为xn+m的HTML元素包装成的jQuery对象,其中n不可变，x、m可变。例如3n+1,则匹配索引为1、4、7等的元素。
  • :nth-last-child(index/even/odd/equation):这个选择器与:nth-child的功能大致相似,只不过该选择器是倒过来计算索引。
  • :first-child:返回由匹配指定选择器且是其父节点的第一个HTML元素的HTML元素包装成的jQuery对象。
  • :last-child:返回由匹配指定选择器且是其父节点的最后一个HTML元素的HTML元素包装成的jQuery对象。
  • :only-child:返回由匹配指定选择器且是其父元素中唯一的HTML元素的HTML元素包装成的jQuery对象,也就是说:如果该父元素下有多个子元素则不会被匹配。

程序示例

下面的程序示范了以上伪类选择器的用法。

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
<!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> 使用jQuery()函数 </title>
</head>

<body>
    <ul>
        <li id="java">疯狂Java讲义</li>
        <li id="javaee" class="test">轻量级Java EE企业应用实战</li>
        <li id="ajax">疯狂前端开发讲义</li>
        <li id="xml">疯狂XML讲义</li>
        <li id="ejb">经典Java EE企业应用实战</li>
        <li>
            <span id="android">疯狂Android讲义</span>
        </li>
    </ul>
    <span>疯狂Java联盟</span>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 访问父元素内、索引为第1、4、7...个li元素
        $("li:nth-child(3n+1)").css("border", "1px dashed black");

        // 访问父元素内、索引为倒数第1、4、7...个li元素
        $("li:nth-last-child(3n+1)").css("background-color", "grey")
            .css("padding", "10px");

        // 访问页面中span元素、且该span元素的父元素下仅包含该span元素。
        $("span:only-child()").append(" <b>是作为父元素唯一子元素的span元素</b>");

        // 测试:first和:first-child之间的关系
        alert($("ul>li:first").html() == $("ul>li:first-child").html());
    </script>
</body>
</html>

XXX-of-type伪类选择器

jQuery 1.9还新增了如下几个伪类选择器:first-of-type、:last-of-type、:nth-of-type、:nth-last-of-type、:only-of-type。它们的作用有点类似于:first-child、:last-child、:nth-child、:nth-last-child、:only-child,但又略有不同。

选择符 描述
:first-of-type 返回匹配指定选择器且是其父节点内的第一个同类型的元素。
:last-of-type 返回匹配指定选择器且是其父节点内的最后一个同类型的元素。
:nth-of-type(index/even/odd/equation) 返回匹配指定选择器且是其父节点内的第index个、偶数个、奇数个或特定公式个同类型的元素。
:nth-last-of-type(index/even/odd/equation) 与前一个伪类选择器的作用类似,只是倒过来计算索引而已。
:only-of-type 返回匹配指定选择器且是其父节点内的唯一同类型的元素。

:nth-child和:nth-of-type的异同

举个例子说明:

  • .abc:nth-child(n),先选择出匹配.abc的元素,然后判断这些元素是否是父元素的第n个孩子,如果是则选中.
  • .abc:nth-of-type(n),先选择出匹配.abc的元素,然后判断这些元素是否是父类的第n个孩子,并且这个孩子还要匹配.abc(同类型)

程序示例

请看书,懒得抄了.

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

3.2.3 以CSS选择器访问DOM元素

每个CSS 选择器可以对应一个或多个HTML 元素,如果以该CSS 选择器作为参数,$(selector)将可以获取由该选择器对应的一个或多个HTML元素包装成的jQuery对象。

jQuery选择符

与前面的CSS选择器类似的是,$()可支持如下几种参数形式。

id选择符

选择符 描述
#id 返回由指定id对应的HTML元素包装成的jQuery对象。类似于CSS中id选择器的功能。

标签名选择符

选择符 描述
tagName 返回由所有tagName标签对应的所有HTML元素包装成的jQuery对象数组。类似于CSS中元素选择器的功能。

标签名属性名选择符

选择符 描述
tagName[attribute] 返回由tagName标签生成且由包含attribute属性的所有HTML元素包装成的jQuery对象数组。以下几个都类似于CSS中属性选择器的功能。

标签名属性名属性值选择符

选择符 描述
tagName[attribute=value] 返回由tagName标签生成且由attribute属性**等于value**的所有HTML元素包装成的jQuery对象。
tagName[attribute!=value] 返回由tagName标签生成且由attribute属性**不等于value**的所有HTML元素包装成的jQuery对象。
tagName[attribute^=value] 返回由tagName标签生成且由attribute属性值以value开头的所有HTML元素包装成的jQuery对象。
tagName[attribute$=value] 返回由tagName标签生成且由attribute属性值以value结尾的所有HTML元素包装成的jQuery对象。
tagName[attribute*=value] 返回由tagName标签生成且由attribute属性值包含value的所有HTML元素包装成的jQuery对象。
tagName[attributeFilter1][attributeFilter2]... 返回由tagName标签生成且由具有attributeFilter1、attributeFilter2等任意一个属性特征的所有HTML元素包装成的jQuery对象。其中,attributeFilter1、attributeFilter2支持前面任意一个有效的属性定义。

类选择符

选择符 描述
.className 返回由所有class属性为className的所有HTML元素包装成的jQuery对象。类似于CSS中class选择器的功能。

后代选择符

选择符 描述
outerSelector空格innerSelector 返回由outerSelector选择器之内的所有innerSelector(不管处于多少层之内)对应的HTML元素包装成的jQuery对象。类似于CSS中的包含选择器的功能。

子代选择符

子代选择符 描述
parentSelector>childSelector 返回由直接位于parentSelector选择器之内第一层childSelector对应的HTML元素包装成的jQuery对象。类似于CSS中的子选择器的功能。

兄弟选择符

兄弟选择符 描述
prevSelector+nextSelector 返回由紧跟在prevSelector之后的第一个nextSelector对应的HTML元素包装成的jQuery对象。类似于CSS中兄弟选择器的功能。
prevSelector~siblingsSelector 返回由位于prevSelector之后的所有siblingsSelector对应的HTML元素包装成的jQuery对象。类似于CSS中兄弟选择器的功能。

组合选择符

选择符 描述
selector1,selector2,selector3,...,selectorN 同时指定多个选择器,返回由匹配任何一个选择器的所有HTML元素包装成的jQuery对象。类似于CSS中选择器组合的功能。

星号选择符

星号选择符 描述
* 返回由所有HTML元素包装成的jQuery对象。相当于CSS中通配符选择器的功能,这个不常用。

标题选择符

选择符 描述
:header 返回由h1、h2、h3之类的标题元素包装成的jQuery对象。

根选择符

选择符 描述
:root 返回该文档的根元素。HTML 的根元素总是<html>元素,因此$(":root")总是返回HTML文档的根元素。
例如如下代码用于将整个HTML文档背景设为蓝色: 
1
$(": root"). css("background-color","blue");

上面的很多选择器都可同时匹配多个HTML元素,而使用上面这些选择器作为$()函数的参数时
$()函数都将简单地返回jQuery对象。这是因为jQuery对象不只可以包装单个的DOM元素,也可包装多个DOM元素,此时的jQuery对象有点类似于数组。如果程序直接操作包装多个DOM元素的jQuery对象,那么这些DOM元素都会随之改变。

程序示例

以下程序示范了上面几种选择器的用法。

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
<!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> 使用jQuery()函数 </title>
    <style type="text/css">
        .test {
            font-size: 20pt;
        }
    </style>
</head>
<body>
    <ul>
        <li id="java">测试ID选择符符</li>
        <li id="javaee" class="test">测试类选择符</li>
        <li id="ajax">测试子代选择符</li>
        <li id="xml">测试组合选择符1</li>
        <li id="ejb">经典Java EE企业应用实战</li>
        <li>
            <span id="android">测试组合选择符2</span>
        </li>
    </ul>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 1.获取id为java的元素
        $("#java").append("<b> 是id为java的元素</b>");

        // 2.获取所有包含id属性的<li.../>元素，为它们增加背景色
        $("li[id]").css("background-color", "#bbbbff");

        // 3.获取class属性为test的元素，并为它们增加边框
        $(".test").css("border", "3px dotted black");

        // 4.同时获取id为xml、android的元素
        $("#xml,#android").append("<b>是id为xml、android其中之一的元素</b>");

        // 5.获取ul之内，id为android的元素
        $("ul #android").append("<br /><b>位于ul之内、id为android的子元素</b>");

        // 6.获取ul之内，id为ajax的直接子元素
        $("ul>#ajax").append("<b>位于ul之内、id为ajax的子元素</b>")
            .css("border", "2px solid black");

        // 7.获取id为ajax之后的所有li元素
        $("#ajax~li").css("background-color", "#ff5555");
    </script>
</body>
</html>

该程序示范了$()所支持的几种选择器的用法。在浏览器中浏览该页面,将可看到如图3.4所示效果。
上面介绍了$()函数的基本用法。可以看出:

$()函数支持许多选择器都会一次返回多个HTML元素对应的jQuery对象,jQuery还支持在原有的选择器上增加额外的限定。

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

3.2.2 jQuery与jQuery.holdReady

$(document).ready()方法简写

jQuery()核心函数还有一个用法。
jQuery(callback):其是$(document).ready()的缩写,其中callback指定一个函数,在页面加载完成时自动激发callback,该函数返回将页面document对象包装成的jQuery对象。例如如下代码可以保证当页面装载完成后自动执行:

1
2
3
4
$(function()
{
    alert("页面装载完成!");
});

在浏览器中浏览该页面将会看到,jQuery可以保证页面装载完成后自动调用上面代码。

延迟执行jQuery的ready事件绑定的事件处理函数

除此之外,jQuey还为该函数提供了如下配套函数。
jQuery.holdReady(true或者false):指定是否需要延迟执行jQuery 的ready()事件绑定的事件处理函数。需要指出的是,程序可以多次调用holdReady(true)来延迟ready事件的事件处理函数。如果绑定了多个holdReady(true),则需要多次调用holdReady(false)来解除延迟,否则ready()事件绑定的事件处理函数将不会被激发。

程序示例

看如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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> holdReady()函数 </title>
</head>
<body>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 延迟ready()事件处理函数
        $.holdReady(true);
        // 指定页面装载完成后自动回调该函数
        $(() => {
            alert("页面装载完成！");
        });
        // 设置2秒后取消延迟ready()事件处理函数
        window.setTimeout("$.holdReady(false);", 2000);
    </script>
</body>
</html>

该页面代码本来可以立即执行alert(″页面装载完成!″);的,但由于页面开始使用了holdReady(true)来延迟ready()事件,并指定在2s后才取消延迟,因此该页面需要在2s之后才能弹出提示框。

jQuery.holdReady函数实现等待其他脚本加载完毕

jQuery.holdReady是一个非常有用的函数,当程序需要在页面装载完成,并且某些脚本和代码动态加载完成后才激发指定函数时,就可以使用jQuery.holdReady了。例如如下代码:

1
2
3
4
$.holdReady(true);
$.getScript("xxx.js", function(){
    $.holdReady(false);
});

这里的代码保证只有xxx.js被动态加载完成后,才能解除ready()事件的延迟。

本文重点

  • jQuery(回调函数):是$(document).ready(回调函数)的简写形式,该函数会在页面加载完成时自动激发回调函数,
  • holdReady()方法用来延迟执行jQuery 的ready()事件绑定的事件处理函数,当调用$.holdReady(true)时,该jQurey对象注册的ready()事件处理程序将延期执行,直到调用该jQurey对象的.holdReady(false)方法解除延期为止。