返回值:jQueryjQuery(selector, [context])
接受字符串形式的 CSS 选择器,用于匹配一组元素。
-
1.0 新增jQuery(selector, [context])
selector (selector) 字符串形式的 CSS 选择器。context (Element, jQuery) 可选参数,DOM 元素, Document,或作为上下文的 jQuery 对象。 -
1.0 新增jQuery(element)
element (Element) DOM 元素。其结果会被 jQuery 对象包裹。 -
1.0 新增jQuery(object)
object (Object) 纯对象。其结果会被 jQuery 对象包裹。 -
1.0 新增jQuery(elementArray)
elementArray (Array) 包含一组 DOM 元素的数组。其结果会被 jQuery 对象包裹。 -
1.0 新增jQuery(jQuery object)
jQuery object (Object) 将要被克隆的,已经存在的 jQuery 对象。 -
1.4 新增jQuery()
上述函数中的 jQuery()
— 也可以写作 $()
— 将会遍历 DOM,选择出满足指定选择器的元素,并生成一个新的 jQuery 对象,指向那些元素:
$('div.foo');
如果没有找到与指定选择器相匹配的元素,那么新生成的 jQuery 对象会是 "empty",也就是说,不包含任何元素,并且其 .length
的属性值是 0。
选择器上下文
默认情况下,选择器会从文档的根部,在 DOM 中查找匹配的元素。然而,你可以向 $()
函数中传入一个可选的参数(也就是传入第二个参数),来指定一个用于限定查找范围的上下文。例如,可以像下面这样,在一个事件处理的范围内限定查找范围:
$('div.foo').click(function() { $('span', this).addClass('bar'); });
用于查找 span 的选择器上下文被限定成 this
,只有被点击元素内的 span,才会被附加上指定的样式。
在 jQuery 内部,选择器上下文是通过 .find()
方法实现的,因此 $('span', this)
等价于 $(this).find('span')
。
使用 DOM 元素
在 jQuery(element) 和 jQuery(object) 函数中,也可以使用通过其它方式选择的 DOM 元素来生成新的 jQuery 对象。通常在如下情况使用此种方式:调用 jQuery 方法的元素,通过关键字 this
将选择的元素传给回调函数:
$('div.foo').click(function() { $(this).slideUp(); });
在上面例子中,点击匹配的元素时,会在元素上应用向上滑动的动画而最终导致元素被隐藏。因为事件处理通过 this
关键字,接收到了被点击的元素,但是该元素是原生的 DOM 元素,所以需要通过 $()
函数,将它转换成 jQuery 对象,然后就可以在该 jQuery 对象上调用 jQuery 方法了。
通过 Ajax 调用而返回的 XML 数据,也可以传给 $()
函数。因此可以通过 .find()
或其它 DOM 遍历方法来返回所需要的节点的 XML 结构。
$.post('url.xml', function(data) { var $child = $(data).find('child'); })
克隆 jQuery 对象
若将一个 jQuery 对象传给 $()
函数,会生成一个该 jQuery 对象的克隆对象。新的 jQuery 对象和参数中的 jQuery 对象所指向的 DOM 元素是一样的。
返回一个空集合
从 jQuery 1.4 开始,如果调用不带参数的 jQuery()
方法,会返回一个空的 jQuery 集合(.length
属性值是 0)。在 jQuery 之前的版本中,则会返回一个含有文档节点的集合。
与纯对象一起使用
目前为止,支持将纯对象用 jQuery 包裹的方法包括:.data()
,.prop()
,.bind()
, .unbind()
, .trigger()
和 .triggerHandler()
。在 .data()
(或任何需要 .data()
的方法)上使用纯对象时,会导致在元素上生成一个新的属性,叫做 jQuery{随机数} (eg. jQuery123456789)。
// define a plain object var foo = {foo:'bar', hello:'world'}; // wrap this with jQuery 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 事件处理执行完后,就会执行 'eventName'。但它并不检查 'eventName' 到底是不是一个函数。为了避免这种情况的发生,也就是检查 'eventName'
到底是不是一个函数,请使用 .triggerHandler('eventName')
来代替。
$foo.triggerHandler('eventName'); // also logs 'eventName was called'
示例:
查找所有 div 下的 p 元素,并为它们加上边框。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.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>
演示:
示例:
查找文档中第一个表单中的所有单选按钮。
jQuery 代码:
$("input:radio", document.forms[0]);
示例:
查找 Ajax 返回的 XML 文档中的所有 div 元素。
jQuery 代码:
$("div", xml.responseXML);
示例:
将页面的背景色设置成黑色。
jQuery 代码:
$(document.body).css( "background", "black" );
示例:
隐藏 myForm 表单中的所有 input 元素。
jQuery 代码:
$(myForm.elements).hide()