构造 jQuery 对象

发表于 | 分类于

jQuery 对象是一个 类数组对象,含有连续的整形属性、length 属性和大量的 jQuery 方法。
jQuery 对象由构造函数 jQuery() 创建, $() 则是 jQuery() 的缩写。

构造函数 jQuery()

如果调用构造函数jQuery()时传入的参数不同,创建jQuery对象的逻辑也会随机不同。构造函数 jQuery()有 7 种用法。如下图：

插入图片

jQuery( selector, [,context] )

第一个参数 selector

如果传入一个 **字符串参数** ,jQuery 会检查这个字符串是 选择器表达式 还是HTML代码。

如果是 选择器表达式,则会遍历文档,查找与之匹配的 DOM 元素,并创建一个包含了这些 DOM 元素引用的 jQuery 对象;如果没有元素与之匹配,则创建一个空的 jQuery 对象.
当然,这个对象不包含任何元素,它的 length 属性为 0.

字符串参数是 HTML 代码的情况，在下面将会解释.

第二个参数 context

默认情况下，对匹配元素的查找将从 根元素 document对象 开始，即查找范围是整个 文档树，不过也可以传入第二个参数 context 来限定查找范围( 我个人习惯把 context 当做” 上下文 “解读，类似于canvas绘图中的getContext ).

例如,在一个事件监听函数中，可以像下面这样限定查找范围:

1
2
3
4
$('div.foo').click(function() {
    $('span',this).addClass('bar');//限定查找范围
    // 选择器表达式 "span" 的查找被限定在 this 范围内，也就是只有被点击元素内的span元素才会被添加 类样式 "bar".
})

如果 选择器表达式 selector 是简单的 “#id”,且没有指定 上下文 context，则调用浏览器的原生方法 document.getElementById() 查找属性 id 等于 指定值 的元素;如果是比 “#id” 复杂的选择器表达式或指定了上下文，则通过 jQuery 方法.find()查找，因此 $('span',this)等价于 $(this).find('span').

jQuery(html,[,ownerDocument])、jQuery(html,props)

第一个参数 HTML代码

如果传入的 字符串参数 像 一段 HTML 代码，(例如，字符串中含有),jQuery会尝试用这段 HTML 代码 创建新的 DOM 元素，并创建一个包含了这些 DOM 元素 引用的 jQuery 对象.

例如,下面的代码将把 HTML 代码转换成 DOM 元素并插入 body 节点的末尾:

1
$('<p id="test">My <em>new</em> text </p>').appendTo('body');

如果 HTML 代码 是一个单独标签，例如，$(‘‘)或$(‘‘),jQuery 会使用浏览器原生方法 document.creatElement() 创建 DOM 元素。如果是比单独标签更复杂的 HTML 片段，例如上面例子的 $(‘

My new text

‘).appendTo(‘body’);，则利用浏览器的 innerHTML 机制创建 DOM 元素，这个过程有方法 jQuery。buildFragment() 和 方法 jQuery.clean() 实现。



第二个参数 ownerDocument 和 props

第二个参数 ownerDocument 用于指定创建新 DOM 元素的文档对象，如果不传入，则默认为 当前文档对象。

如果 HTML 代码是一个单独标签，那么第二个参数还可以是 props.
props 是一个包含了属性、事件的 普通对象。
在调用 document.creatElement()创建 DOM 元素后，参数 props 会被传给 jQuery 方法 .attr(),然后由 .attr() 负责把参数 props 中的属性、事件设置到新创建的 DOM 元素上。

  • 参数 props 的属性可以是任意的 事件类型 (如: “click”),此时 属性值 应该是 事件监听函数，它将被绑定到新创建的 DOM 元素上;
  • 参数 props 可以含有以下特殊属性: val、css、html、text、data、width、height、offset，相应的 jQuery 方法: .val() .css() .html() .text() .data() .text() .width() .height() .offset()将被执行，并且属性值会作为参数传入，其他类型的属性则会被设置到新创建的 DOM 元素上；
  • 某些特殊属性还会做 跨浏览器兼容 (如 type、value、tabindex等)；
  • 可以通过属性名 class 设置类样式，但要用 引号 把 class 包裹起来，因为class 是 JavaScript 保留字。例如：
1
2
3
4
5
6
7
8
9
10
//功能：创建一个 div 元素，并设置类样式 为"test"、设置文本内容为 "Click me!"、绑定一个click事件
//然后插入到 body 节点的末尾，当点击该 div 元素时，还会切换类样式
$("<div/>", {
    "class": "test",
    text: "Click me!",
    click: function () {
        $(this).toggleClass("test");
    }
}).appendTo("body");