加载中...

jQuery([sel,[context]])


概述    jQuery( selector [, context ] )

返回值:jQuery

描述:接受一个包含一个CSS选择器的字符串,用于匹配的一组元素。

  • V : 1.0jQuery( selector [, context ] )

    • selector
      类型: selector
      一个包含CSS选择器的字符串
    • context
      类型: Element, jQuery
      一个DOM 元素、文档或 作为上下文(context)的jQuery 对象。
  • V : 1.0jQuery( element )

    • element
      类型: Element
      一个用于封装成jQuery对象的DOM元素。
  • V : 1.0jQuery( elementArray )

    • elementArray
      类型: Array
      一个用于封装成jQuery对象的DOM元素数组。
  • V : 1.0jQuery( object )

    • object
      类型: PlainObject
      一个普通的对象包装在一个jQuery对象。
  • V : 1.0jQuery( jQuery object )

    • jQuery object
      类型: PlainObject
      一个用于克隆的jQuery对象。
  • V : 1.4jQuery()

    • 这个方法不接受任何参数。

在上文列出的第一个公式中,jQuery() — 这个也可以写成 $() — 通过提供的选择器检索任何DOM元素并且通过这些元素创建一个新的jQuery对象:

$( "div.foo" );

如果提供的选择器没有相匹配的,新的jQuery对象是“空”;即,它不包含任何元素,.length属性为0。

Selector Context(上下文选择器)

默认情况下,选择器是从文档根节点开始执行搜索。然而,可以给$()函数传递一个用于上下文检索的第二个可选参数(手册网注:第二个上下文参数用于来指定选择器查找的范围)。 举个示例,如果在一个回调函数中我们希望为一个元素做一个检索, 我们可以限制搜索的范围:

$( "div.foo" ).click(function() {
  $(  "span", this ).addClass( "bar" );
});

由于我们限制这个span选择器的上下文为 this, 只有在点击元素里的span将会被附加样式。

在jQuery内部,选择器上下文是使用.find()方法的,所以 $('span', this) 等价于$(this).find('span')

Using DOM elements(使用DOM节点)

这个函数的第二个和第三个的方式,我们用其他一些方式已找到的一个或多个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");
})

Cloning jQuery Objects(克隆jQuery对象)

当一个jQuery对象作为一个参数传递给$()方法时,这个对象的一个克隆对象将被创建。这个新的jQuery对象引用同一DOM元素。

Returning an Empty Set(返回一个空集合)

在jQuery 1.4中,如果你传递给jQuery()方法一个空参数,一个空的jQuery设置将被返回(.length属性为0)。 在以前的jQuery版本中,一个包含整个文档节点的集合将被返回。

Working With Plain Objects(使用普通的对象)

目前,只支持包裹在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 元素的子元素。

jQuery 代码:
$("div > p");

实例

设置页面背景色。

jQuery 代码:
$(document.body).css( "background", "black" );

实例

隐藏一个表单中所有元素。

jQuery 代码:
$(myForm.elements).hide()

实例

在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。

jQuery 代码:
$("input:radio", document.forms[0]);

实例

在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。

jQuery 代码:
$("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>
运行一下


还没有评论.