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 对象。
转载于:https://www.cnblogs.com/lixiaodou/p/7080608.html