• 构造 jQuery 对象


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

    2.1.1 jQuery( selector [, context] )
    如果传入一个字符串参数,jQuery 会检查这个字符串是选择器表达式还是 HTML 代
    码。如果是选择器表达式,则遍历文档,查找与之匹配的 DOM 元素,并创建一个包含了
    这些 DOM 元素引用的 jQuery 对象;如果没有元素与之匹配,则创建一个空 jQuery 对象,
    其中不包含任何元素,其属性 length 等于 0。
    默认情况下,对匹配元素的查找将从根元素 document 对象开始,即查找范围是整个文
    档树,不过也可以传入第二个参数 context 来限定查找范围(本书中把参数 context 称为“选
    择器的上下文”,或简称“上下文”)。例如,在一个事件监听函数中,可以像下面这样限制
    查找范围:
    $('div.foo').click(function() { // 选取classs为foo的div
     $('span', this).addClass('bar'); // 限定查找范围

     //$('span', this) 等价于 $(this).find('span')
    });

    // 当class为foo的div被点击时,被点击元素内的span元素添加bar样式
    在这个例子中,对选择器表达式“ span”的查找被限制在了 this 的范围内,即只有被点
    击元素内的 span 元素才会被添加类样式“bar”。
    如果选择器表达式 selector 是简单的“ #id”,且没有指定上下文 context,则调用浏览器
    原生方法 document.getElementById() 查找属性 id 等于指定值的元素;如果是比“ #id”复杂
    的选择器表达式或指定了上下文,则通过 jQuery 方法 .find() 查找,因此 $('span', this) 等价
    于 $(this).find('span')。

    2.1.2 jQuery( html [, ownerDocument] )、jQuery( html, props )
    如果传入的字符串参数看起来像一段HTML代码,jQuery则尝试用这段HTML代码创建新的DOM元素,
    并创建一个包含了这些DOM元素引用的jQuery对象。
    $('<p id="test">My <em>new</em> text</p>').appendTo('body'); // 把HTML代码转换成DOM元素并插入body节点的末尾
    如果 HTML 代码是一个单独标签,例如,$('<img/>') 或 $('<a></a>'),jQuery 会使
    用浏览器原生方法 document.createElement() 创建 DOM 元素。如果是比单独标签更复杂的
    HTML 片段,例如上面例子中的 $('<p id = "test">My<em>new</em>text</p>'),则利用
    浏览器的 innerHTML 机制创建 DOM 元素,这个过程由方法 jQuery.buildFragment() 和方法
    jQuery.clean() 实现。
    第二个参数 ownerDocument 用于指定创建新 DOM 元素的文档对象,如果不传入,则默认为当前文档对象。
    如果 HTML 代码是一个单独标签,那么第二个参数还可以是 props,props 是一个包含了
    属性、事件的普通对象;在调用 document.createElement() 创建 DOM 元素后,参数 props 会
    被传给 jQuery 方法 .attr(),然后由 .attr() 负责把参数 props 中的属性、事件设置到新创建的DOM 元素上。
    可以通过属性名 class 设置类样式,但要用引号把 class 包裹起来,因为 class
    是 JavaScript 保留字。例如,在下面的例子中,创建一个 div 元素,并设置类样式为“ test”、
    设置文本内容为“ Click me!”、绑定一个 click 事件,然后插入 body 节点的末尾,当点击该
    div 元素时,还会切换类样式 test:
    $("<div/>", {
     "class": "test",
     text: "Click me!",
     click: function(){
     $(this).toggleClass("test");
     }
    }).appendTo("body");

    2.1.3 jQuery( element )、jQuery( elementArray )
    如果传入一个 DOM 元素或 DOM元素数组,则把 DOM 元素封装到 jQuery 对象中并返回。
    这个功能常见于事件监听函数,即把关键字 this 引用的 DOM 元素封装为 jQuery 对象,
    然后在该 jQuery 对象上调用 jQuery 方法。例如,在下面的例子中,先调用 $(this) 把被点击
    的 div 元素封装为 jQuery 对象,然后调用方法 slideUp() 以滑动动画隐藏该 div 元素:
    $('div.foo').click(function() {
     $(this).slideUp();
    });
    2.1.4 jQuery( object )
    如果传入一个普通 JavaScript 对象,则把该对象封装到 jQuery 对象中并返回。
    这个功能可以方便地在普通 JavaScript 对象上实现自定义事件的绑定和触发,例如,执
    行下面的代码会在对象 foo 上绑定一个自定义事件 custom,然后手动触发这个事件,执行绑
    定的 custom 事件监听函数,如下所示:
    // 定义一个普通 JavaScript 对象
    var foo = {foo:'bar', hello:'world'};
    // 封装成 jQuery 对象
    var $foo = $(foo);
    // 绑定一个事件
    $foo.on('custom', function (){
     console.log('custom event was called');
    });
    // 触发这个事件
    $foo.trigger('custom'); // 在控制台打印 "custom event was called"
    2.1.5 jQuery( callback )
    如果传入一个函数,则在 document 上绑定一个 ready 事件监听函数,当 DOM 结构加载
    完成时执行。ready 事件的触发要早于 load 事件。ready 事件并不是浏览器原生事件,而是
    DOMContentLoaded 事件、onreadystatechange 事件和函数 doScrollCheck() 的统称。
    2.1.6 jQuery( jQuery object )
    如果传入一个 jQuery 对象,则创建该 jQuery 对象的一个副本并返回,副本与传入的
    jQuery 对象引用完全相同的 DOM 元素。
    2.1.7 jQuery()
    如果不传入任何参数,则返回一个空的 jQuery 对象,属性 length 为 0。注意,在 jQuery
    1.4 之前,会返回一个含有 document 对象的 jQuery 对象。
    这个功能可以用来复用 jQuery 对象,例如,创建一个空的 jQuery 对象,然后在需要时
    先手动修改其中的元素,再调用 jQuery 方法,从而避免重复创建 jQuery 对象。

  • 相关阅读:
    迭代器与生成器
    11.30
    函数及装饰器
    C#For循环
    C#变量与数据类型
    C#输入输出
    JDK10新特性--var
    idea插件Lombok使用
    NodeJs操作文件-写入、修改、删除、追加、读取文件内容、判断文件是否存在
    mongodb多条件分页查询(mongoTemplate分页查询)
  • 原文地址:https://www.cnblogs.com/lixiaodou/p/7080608.html
Copyright © 2020-2023  润新知