jQuery()

Contents:

jQuery( selector, [ context ] ) 官网原E文: jQuery

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

  • version added: 1.0jQuery( selector, [ context ] )

    selector一个包含CSS选择器的字符串

    context一个待查找的 DOM 元素集、文档或 jQuery 对象。

  • version added: 1.0jQuery( element )

    element一个用于封装成jQuery对象的DOM元素。

  • version added: 1.0jQuery( elementArray )

    elementArray一个用于封装成jQuery对象的DOM元素数组。

  • version added: 1.0jQuery( jQuery object )

    jQuery object一个用于克隆的jQuery对象。

  • version added: 1.4jQuery()

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

$('div.foo');

上下文选择器

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

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

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

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

使用DOM节点

在上文列出的第二个和第三个公式中,这个方法同样使用 一个DOM元素或者我们用其他一些方式已找到的元素 来创建一个jQuery对象, 这个设备普遍使用jQuery方法通过一个回调函数传递this关键字 :

$('div.foo').click(function() {
  $(this).slideUp();
});

这个例子,当点击使得这些元素隐藏的时候使用了滑动动画。因为这个处理函数接收了点击项中作为暴露DOM元素的this 关键字,这个元素必须事先包含在一个jQuery对象中,这样我们可以在它上面调用jQuery方法。

当XML数据是返回自己一个Ajax请求,我们可以使用 $() 方法去把他包含在jQuery对象中,我们可以很容易的工作。一旦这样做了之后,我们可以使用.find()和其他DOM遍历方法在XML结构中检索特定元素。

克隆jQuery对象

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

返回一个空设置

在jQuery 1.4中,如果你传递给jQuery()方法一个空参数,一个空的jQuery设置将被返回。 在以前的jQuery版本中,一个包行这个文档节点的集合将被返回。

举例:

例子: 找到所有div元素子节点为p的元素。

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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>

Demo:

Result:

[ <p>two</p> ] 

Example: 找到文档中第一个表单下的所有单选框。

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

Example: 找到所有从一个Ajax请求中获取的XML文档中的div元素。

$("div", xml.responseXML);

Example: 设置页面背景为黑色。

$(document.body).css( "background", "black" );

Example: 隐藏一个表单下所有元素。

$(myForm.elements).hide()

jQuery( html, [ ownerDocument ] ) Returns: jQuery

描述: 根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。

  • version added: 1.0jQuery( html, [ ownerDocument ] )

    html用于动态创建DOM元素的HTML标记字符串,不是XML

    ownerDocument一个文档的新元素将被创建。

  • version added: 1.4jQuery( html, props )

    html一个单标记的HTML 元素字符串 (例如: <div/> or <div>)。

    props访问新创建元素的属性,事件和方法。

创建新元素

如果一个字符串最为一个参数传递个$(), jQuery 检查这个属性是否看上去像HTML (也就是, <tag ... > 之类的元素在这个字符串中)。如果没有, 这个字符串将被解释为选择器, 作为解析上下文。 但如果字符串似乎是一个HTML代码段里,jQuery企图创造新的用HTML描述的DOM元素的。然后jQuery对象创建并返回引用的这些因素。我们可以在这个对象上执行一些常用的jQuery方法:

$('<p id="test">My <em>new</em> text</p>').appendTo('body');

在上面的例子中,当这个HTML比一个没有属性的简单标签复杂的时候,元素的实际操作是由浏览器的innerHTML 原理。特别说明,jQuery创建一个新的<div>元素,并且设置innerHTML属性到HTML代码段里将被通过。当参数是一个单标签,就像 $('<img />') or $('<a></a>'),jQuery将使用javasrcipt原生的 createElement()函数创建这个元素。

为了确保跨平台兼容性,这个片段必须完好。可以包含其它元素的标签应该关闭标签:

$('<a href="http://jquery.com"></a>');

另外, jQuery 允许 XML-like 标签语法(在斜杠前带或不带空格):

$('<a/>');

标签不能含有元素可快速关闭与否

$('<img />');
$('<input>');

在 jQuery 1.4中,我们可以传递一个对象作为第二个参数。 这个参数接受一个属性的集合,这些可以传递给.attr() 方法。此外,一些event type(事件类型)能通过, 而且后面的jQuery方法能够调用: val, css, html, text, data, width, height, or offset

举例:

例子:动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中。在这个函数的内部,是通过临时创建一个元素,并将这个元素的 innerHTML 属性设置为给定的标记字符串,来实现标记到 DOM 元素转换的。所以,这个函数既有灵活性,也有局限性。

$("<div><p>Hello</p></div>").appendTo("body")

Example:创建一些DOM元素

$("<div/>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

jQuery( callback ) 返回: jQuery

描述: 当DOM完成加载的时候绑定一个要执行的函数。

  • version added: 1.0jQuery( callback )

    callback当DOM完成加载的时候绑定的函数

允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说,这个函数是可链接的--但真正以这种方式链接的情况并不多。

例子:

Example: Executes the function when the DOM is ready to be used.

$(function(){
  // Document is ready
});

Example: Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.

jQuery(function($) {
  // Your code using failsafe $ alias here...
});
jQuery 1.6 API 中文版Clove整理、修订