概述 jQuery( selector [, context ] )
返回值:jQuery
描述:接受一个包含一个CSS选择器的字符串,用于匹配的一组元素。
在上文列出的第一个公式中,jQuery()
— 这个也可以写成 $()
— 通过提供的选择器检索任何DOM元素并且通过这些元素创建一个新的jQuery对象:
$( "div.foo" );
如果提供的选择器没有相匹配的,新的jQuery对象是“空”;即,它不包含任何元素,.length
属性为0。
默认情况下,选择器是从文档根节点开始执行搜索。然而,可以给$()
函数传递一个用于上下文检索的第二个可选参数(手册网注:第二个上下文参数用于来指定选择器查找的范围)。 举个示例,如果在一个回调函数中我们希望为一个元素做一个检索, 我们可以限制搜索的范围:
$( "div.foo" ).click(function() { $( "span", this ).addClass( "bar" ); });
由于我们限制这个span选择器的上下文为 this
, 只有在点击元素里的span将会被附加样式。
在jQuery内部,选择器上下文是使用.find()
方法的,所以 $('span', this)
等价于$(this).find('span')
。
这个函数的第二个和第三个的方式,我们用其他一些方式已找到的一个或多个DOM元素,来创建一个jQuery对象。和其他大多数 jQuery 参数选项不一样,元素不是根据他们在DOM中得顺序排序的(手册网注:可以这么理解:当传递一个数组时候,jQuery对象的元素顺序和元素在数组的顺序是一样的;其他大多数传递的参数选项,jQuery对象的元素顺序根据他们在DOM中的顺序排序的) 。元素将从数组中被原样复制,并且如果他们已经是jQuery集合,将不会被解开。
请注意,虽然这种方式可以传递文本节点和注释节点给一个jQuery集合,但是大多数操作不会支持他们。少数几个支持的操作将在他们的API文档页面中有一个明确的说明。
一个常见的用途就是单一DOM元素构建的集合可以通过一个回调函数传递this
关键字调用这个元素的jQuery方法 :
$( "div.foo" ).click(function() { $(this).slideUp(); });
这个示例,当点击使得这些元素隐藏的时候使用了滑动动画。因为事件处理通过 this
关键字,接收到了被点击的元素,但是该元素是原生的 DOM 元素,所以需要通过 $() 函数,将它转换成 jQuery 对象,然后就可以在该 jQuery 对象上调用 jQuery 方法了。
当一个Ajax请求返回XML数据时,我们可以使用 $()
方法去把他包含在jQuery对象中,我们可以很容易的工作。一旦这样做了之后,我们可以使用.find()
和其他DOM遍历方法在XML结构中检索特定元素。
$.post( "url.xml", function(data) {
var $child = $(data).find("child");
})
当一个jQuery对象作为一个参数传递给$()
方法时,这个对象的一个克隆对象将被创建。这个新的jQuery对象引用同一DOM元素。
在jQuery 1.4中,如果你传递给jQuery()
方法一个空参数,一个空的jQuery设置将被返回(.length
属性为0)。 在以前的jQuery版本中,一个包含整个文档节点的集合将被返回。
目前,只支持包裹在jQuery中的普通的JavaScript对象是:.data()
,.prop()
,.bind()
, .unbind()
, .trigger()
和 .triggerHandler()
。使用.data()
(或者任何返回.data()
的方法),在一个普通的对象会产生一个新的属性的名为jQuery{randomNumber}(如jQuery123456789)。
// define a plain object var foo = {foo: "bar", hello: "world"}; // Pass it to the jQuery function var $foo = $( foo ); // test accessing property values var test1 = $foo.prop( "foo" ); // bar // test setting property values $foo.prop( "foo", "foobar" ); var test2 = $foo.prop( "foo" ); // foobar // test using .data() as summarized above $foo.data( "keyName", "someValue"); console.log( $foo ); // will now contain a jQuery{randomNumber} property // test binding an event name and triggering $foo.bind( "eventName", function () { console.log("eventName was called"); }); $foo.trigger( "eventName" ); // logs "eventName was called"
如果.trigger( "eventName" )
被使用,它会在这个对象上搜寻一个“eventName的”属性,并且尝试任何附加在jQuery上的处理器执行完成后执行。它不检查该属性是否是一个函数。为了避免这种情况,.triggerHandler( "eventName" )
应代替使用。
$foo.triggerHandler( "eventName" ); // also logs "eventName was called"
示例
找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。
$("div > p");
设置页面背景色。
$(document.body).css( "background", "black" );
隐藏一个表单中所有元素。
$(myForm.elements).hide()
在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
$("input:radio", document.forms[0]);
在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。
$("div", xml.responseXML);
查找所有 div 下的 p 元素,并为它们加上边框。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p>one</p> <div><p>two</p></div> <p>three</p> <script> $( "div > p" ).css( "border", "1px solid gray" ); </script> </body> </html>运行一下