当前位置: 首页>>编程示例 >>用法及示例精选 >>正文

JQuery jQuery()用法及代码示例

根据传递的参数返回在 DOM 中找到的或通过传递 HTML 字符串创建的匹配元素的集合。

用法一

jQuery( selector [, context ] ) => jQuery

说明：接受一个包含 CSS 选择器的字符串，然后用于匹配一组元素。

  • 添加的版本：1.0jQuery( selector [, context ] )

    • selector
      类型：Selector
      包含选择器表达式的字符串
    • context
      类型：Element 或 jQuery 或 Selector
      用作上下文的 DOM 元素、文档、jQuery 或选择器

  • 添加的版本：1.0jQuery( element )

    • element
      类型：Element
      要包装在 jQuery 对象中的 DOM 元素。

  • 添加的版本：1.0jQuery( elementArray )

    • elementArray
      类型：Array
      包含一组要包装在 jQuery 对象中的 DOM 元素的数组。

  • 添加的版本：1.0jQuery( object )

    • object
      类型：PlainObject
      包装在 jQuery 对象中的普通对象。

  • 添加的版本：1.0jQuery( selection )

    • selection
      类型：jQuery
      要克隆的现有 jQuery 对象。

  • 添加的版本：1.4jQuery()

    • 此签名不接受任何参数。

在上面列出的第一个公式中，jQuery()——也可以写成$()——在 DOM 中搜索与提供的选择器匹配的任何元素，并创建一个引用这些元素的新 jQuery 对象：

$( "div.foo" );

如果没有元素匹配提供的选择器，则新的 jQuery 对象是"empty"；也就是说，它不包含任何元素，并且 .length 属性为 0。

选择器上下文

默认情况下，选择器从文档根目录开始在 DOM 中执行搜索。但是，可以使用$() 函数的可选第二个参数为搜索提供替代上下文。例如，要在事件处理程序中进行搜索，可以像这样限制搜索：

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

当对跨度选择器的搜索限制在 this 的上下文中时，只有单击元素内的跨度才会获得附加类。

在内部，选择器上下文是使用 .find() 方法实现的，因此 $( "span", this ) 等效于 $( this ).find( "span" ) 。

使用 DOM 元素

这个函数的第二和第三个公式使用一个或多个已经以其他方式选择的 DOM 元素创建一个 jQuery 对象。一个 jQuery 对象是按照它们在数组中出现的顺序从数组元素创建的；与大多数其他多元素 jQuery 操作不同，元素不是按 DOM 顺序排序的。元素将按原样从数组中复制，如果它们已经是 jQuery 集合，则不会被解包。

请注意，尽管您可以通过这种方式将文本节点和注释节点传递到 jQuery 集合中，但大多数操作不支持它们。少数这样做的人会在他们的 API 文档页面上有明确的说明。

single-DOM-element 构造的一个常见用途是在已通过关键字 this 传递给回调函数的元素上调用 jQuery 方法：

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

此示例导致元素在单击时通过滑动动画隐藏。因为处理程序将 this 关键字中的单击项目作为裸 DOM 元素接收，所以在将 jQuery 方法应用到它之前，必须将该元素传递给 $() 函数。

从 Ajax 调用返回的 XML 数据可以传递给 $() 函数，因此可以使用 .find() 和其他 DOM 遍历方法检索 XML 结构的各个元素。

$.post( "url.xml", function( data ) {
  var $child = $( data ).find( "child" );
});

克隆 jQuery 对象

当 jQuery 对象被传递给 $() 函数时，会创建该对象的克隆。这个新的 jQuery 对象引用了与初始对象相同的 DOM 元素。

返回一个空集

使用no arguments 调用jQuery() 方法会返回一个空的jQuery 集(.length 属性为0)。同样，如果传递 null、undefined、空数组 ([]) 或空字符串 ("") 的参数，则该集合不包含任何元素。

使用普通对象

目前，jQuery 封装的纯 JavaScript 对象支持的唯一操作是：.data()、.prop()、.on()、.off()、.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.on( "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"

例子：

查找作为 div 元素的子元素的所有 p 元素，并对它们应用边框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.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>

演示：

在文档的第一个表单中查找类型为 radio 的所有输入。

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

从 Ajax 响应中查找 XML 文档中的所有 div 元素。

$( "div", xml.responseXML );

将页面的背景颜色设置为黑色。

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

隐藏表单中的所有输入元素。

$( myForm.elements ).hide();

用法二

jQuery( html [, ownerDocument ] ) => jQuery

说明：从提供的原始 HTML 字符串动态创建 DOM 元素。

  • 添加的版本：1.0jQuery( html [, ownerDocument ] )

    • html
      类型：htmlString
      动态创建的 HTML 字符串。请注意，这会解析 HTML，notXML。
    • ownerDocument
      类型：Document
      将在其中创建新元素的文档。

  • 添加的版本：1.4jQuery( html, attributes )

    • html
      类型：htmlString
      定义单个独立 HTML 元素的字符串(例如 <div/> 或 <div></div>)。
    • attributes
      类型：PlainObject
      在新创建的元素上调用的属性、事件和方法的对象。

创建新元素

如果一个字符串作为参数传递给 $() ，jQuery 会检查该字符串是否看起来像 HTML(即，它以 <tag ... > 开头)。如果不是，则字符串被解释为选择器表达式，如上所述。但是如果字符串看起来是一个 HTML 片段，jQuery 会尝试按照 HTML 的说明创建新的 DOM 元素。然后创建并返回一个引用这些元素的 jQuery 对象。你可以在这个对象上执行任何常用的 jQuery 方法：

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

要将字符串显式解析为 HTML，请使用 $.parseHTML() 方法。

默认情况下，使用与加载 jQuery 库的文档相匹配的 .ownerDocument 创建元素。应使用该文档创建注入到不同文档中的元素，例如 $("<p>hello iframe</p>", $("#myiframe").prop("contentWindow").document) 。

如果 HTML 比没有属性的单个标记更复杂，如上例所示，则元素的实际创建由浏览器的 .innerHTML 机制处理。在大多数情况下，jQuery 会创建一个新的 <div> 元素并将元素的 innerHTML 属性设置为传入的 HTML 片段。当参数具有单个标记(带有可选的结束标记或 quick-closing)时 — $( "<img />" ) 或 $( "<img>" ) 、 $( "<a></a>" ) 或 $( "<a>" ) — jQuery 使用原生 JavaScript .createElement() 函数创建元素。

在传递复杂的 HTML 时，某些浏览器可能无法生成完全复制所提供的 HTML 源的 DOM。如前所述，jQuery 使用浏览器的.innerHTML 属性来解析传递的 HTML 并将其插入到当前文档中。在此过程中，某些浏览器会过滤掉某些元素，例如 <html> 、 <title> 或 <head> 元素。因此，插入的元素可能不代表传递的原始字符串。

但是，过滤不仅限于这些标签。例如，版本 8 之前的 Internet Explorer 还将链接上的所有 href 属性转换为绝对 URL，并且版本 9 之前的 Internet Explorer 在不添加单独的 compatibility layer 的情况下将无法正确处理 HTML5 元素。

为确保cross-platform 兼容性，代码段必须格式正确。可以包含其他元素的标签应与结束标签配对：

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

不能包含元素的标签可能是quick-closed，也可能不是：

$( "<img>" );
$( "<input>" );

将 HTML 传递给 jQuery() 时，请注意文本节点不被视为 DOM 元素。除了少数方法(例如 .content() )外，它们通常被忽略或删除。例如：

var el = $( "<br>2<br>3" ); // returns [<br>, "2", <br>]
el = $( "<br>2<br>3 >" ); // returns [<br>, "2", <br>, "3 &gt;"]

这种行为是预期的。从 jQuery 1.9.0 开始(除非使用jQuery 迁移插件),jQuery()要求 HTML 字符串以<(即文本节点不能出现在 HTML 字符串的前面)。

从 jQuery 1.4 开始，第二个参数jQuery()可以接受一个普通对象，该对象由可以传递给.attr()方法。

重要的：如果传递了第二个参数，则第一个参数中的 HTML 字符串必须表示一个没有属性的简单元素。从 jQuery 1.4 开始， 任何事件类型可以传入，可以调用以下jQuery方法：.val(),.css(),.html(),.text(),.data(),.width(),.height()， 或者.offset().

从 jQuery 1.8 开始，任何jQuery实例方法(一个方法jQuery.fn) 可以用作传递给第二个参数的对象的属性：

$( "<div></div>", {
  "class": "my-div",
  on: {
    touchstart: function( event ) {
      // Do something
    }
  }
}).appendTo( "body" );

名称"class" 必须在对象中引用，因为它是 JavaScript 保留字，并且不能使用 "className"，因为它指的是 DOM 属性，而不是属性。

虽然第二个参数很方便，但它的灵活性可能会导致意想不到的后果(例如，$( "<input>", {size: "4"} ) 调用 .size() 方法而不是设置 size 属性)。因此，前面的代码块可以写成：

$( "<div></div>" )
  .addClass( "my-div" )
  .on({
    touchstart: function( event ) {
      // Do something
    }
  })
    .appendTo( "body" );

例子：

动态创建一个 div 元素(及其所有内容)并将其附加到 body 元素。在内部，会创建一个元素并将其 innerHTML 属性设置为给定的标记。

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

创建一些 DOM 元素。

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

用法三

jQuery( callback ) => jQuery

说明：绑定一个在 DOM 完成加载时要执行的函数。

  • 添加的版本：1.0jQuery( callback )

    • callback
      类型：Function ()
      当 DOM 准备好时执行的函数。

此函数的行为就像 $( document ).ready() 一样，因为它应该用于包装页面上依赖于准备好的 DOM 的其他 $() 操作。虽然从技术上讲，这个函数是可链接的，但链接它并没有太多用处。

例子：

当 DOM 准备好使用时执行该函数。

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

使用 $(document).ready() 的快捷方式和使用 $别名编写故障安全 jQuery 代码的参数，而不依赖于全局别名。

jQuery(function( $ ) {
  // Your code using failsafe $ alias here...
});

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 jQuery()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。