3.2.1 jQuery核心函数

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

3.2.1 jQuery核心函数

获取jQuery对象

jQuery()函数是获取jQuery对象的重要途径。该函数主要有如下用法。

  1. jQuery(expression,[context]):该函数会将expression对应的DOM对象包装成的jQuery对象返回。其中expression既支持CSS1到CSS3的选择器,也支持XPath语法,功能非常丰富。由于expression表达式可能对应单个DOM元素,也可能对应多个DOM元素,因此该方法可能返回将单个DOM对象包装成的jQuery对象,也可能返回将多个DOM对象包装成的jQuery对象。context是个可选参数,如果指定了该参数,则表明仅获取context的子元素。
  2. jQuery(elements):将一个或多个DOM元素包装为jQuery对象。elements既可以是单个的DOM对象,也可以是多个DOM对象。该方法返回包装这些DOM对象的jQuery对象。
  3. jQuery(html,[ownerDocument]):该函数根据html参数(该参数是个HTML字符串)创建一个或多个DOM 对象,返回包装这些DOM 对象的jQuery 对象。其中ownerDocument是可选参数,指定使用ownerDocument(document对象)来创建DOM对象。
  4. jQuery(html,props):该函数根据html参数(该参数是个HTML字符串)创建一个或多个DOM 对象,返回包装这些DOM对象的jQuery对象。其中props 是一个形如{prop:value,prop2:value}的对象,该对象指定的属性将被附加到根据HTML字符串所创建的DOM对象上。
  5. jQuery(object):把普通对象包装成jQuery对象。

程序示例

下面的代码示范了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
<!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>
    <div id="lee"></div>
    <div id="yeeku"></div>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 1.获取所有<div.../>标签对应的DOM对象
        $("div").append("新增的内容");

        // 2.直接将一个DOM对象包装成jQuery对象
        $(document.getElementById('lee'))
            .css("background-color", "#aaffaa")
            .css("border", "1px solid black");

        // 3.使用HTML字符串创建一个DOM对象，并将添加到body元素内
        $("<input type='button' value='单击我'/>")
            .appendTo(document.body);

        // 4.使用HTML字符串创建一个DOM对象，并在创建时添加属性
        $("<input/>",
            {
                type: "button",
                value: "有惊喜",
                click: function () { alert("惊喜时刻！"); }
            }
        ).appendTo(document.body);
    </script>
</body>
</html>

上面的代码在使用$()函数获取了jQuery 对象之后,还调用了jQuery 对象的appendTo()、append()等方法,这些方法在后面会有更详细的介绍,此处不再赘述。
在页面中创建第二个按钮时为click属性指定了事件处理函数,如果单击该页面上”有惊喜”按钮,将可以看到如图3.3所示对话框。
值得指出的是,在jQuery 的第一种用法jQuery(expression,[context])中,需要指定一个expression,该表达式能支持的形式相当多,下一节将详细介绍这些用法。