jQuery核心篇-jQuery()匹配元素

最新推荐文章于 2023-11-17 11:13:31 发布

傲雪kimi

最新推荐文章于 2023-11-17 11:13:31 发布

阅读量1.3k

点赞数

jQuery API翻译专栏收录该内容

35 篇文章

订阅专栏

接收一段包含选择器（CSS selector）的字符串，用来匹配元素。（译者注：并返回jQuery对象）

jQuery(selector[,context])

jQuery(element)

jQuery(elementArray)

jQuery(object)

jQuery(jQuery object)

jQuery()

selector

类型是选择器。

包含选择器表达式的的字符串。

context

类型是元素，jQuery

一个DOM元素，Document或者jQuery来作为context使用。

element

类型是元素(Element).

一个DOM元素在jQuery对象中被包裹。

elementArray

类型是数组。

一个包含DOM元素集合的数组在jQuery对象中被包裹。

object

类型是普通对象。

一个普通对象在jQuery对象中被包裹。

jQueryobject

类型是普通对象。

一个用来克隆的存在的jQuery对象。

首先说明的是，jQuery()可以简写成$()--在DOM中查找任何能够和选择器匹配的元素，并创建对应元素的jQuery对象：

$('div.foo');

如果没有元素和提供的选择器匹配，那么新创建的jQuery对象就是“空”，意思是它不包含元素，属性.length值为0。

选择器上下文

默认情况下，选择器是从文档的根节点开始查找DOM。同时也可以在$()中使用第二个参数替换上下文来查找（也就是说重新指定一个context）。比如，查找event handler，这个查找可以被这样限制：

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

当查找span选择器时被this这个context限制，只有单击后的span元素才能被添加class。在内部实现时，选择器上下文被使用了.find()方法来查找，因此$('span', this）和$(this).find('span')是实现是类似的。

使用DOM元素

这个函数可以通过一个或多个被某种方式选择的DOM元素创建jQuery对象。一种比较常用方式是在一个已经被通过关键字this传递给回调函数的元素上调用jQuery方法：

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

这个例子是一个元素被单击时，会以滑动的样式消失。因为，事件处理者接收到使用了this关键字的DOM元素的单击，这个元素必须在调用jQuery方法（slideUp()）之前被传递给$()。

Ajax调用返回的XML数据能够被传递给$()函数，因此，XML结构的元素能够使用.find()和其他DOM遍历方法获取。

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

克隆jQuery对象

当一个jQuery对象被传递给了$()函数，jQuery对象副本就被创建。这个副本也是关联相同DOM元素。

返回空集合

jQuery1.4 版本调用无参的jQuery（）方法返回一个空的jQuery集。在早期的版本中，这个会返回包含文档元素节点的集合。

操作简单对象

目前，在jQuery封装的操作中仍对简单javascript对象支持的有：.data(),.prop(),.bind(),.unbind(),.trigger() and.triggerHandler()。.data() 的使用（或所有需要.data()的方法）在简单对象上会导致一个在这个对象上产生新的属性jQuery{randomNumber} .

// 定义简单对象foo
var foo = {foo:'bar', hello:'world'};
// 使用jQuery包裹foo
var $foo = $(foo);
// 测试可访问的属性的值
var test1 = $foo.prop('foo'); // 值为bar
// 测试设置属性的值
$foo.prop('foo', 'foobar');
var test2 = $foo.prop('foo'); // 值为foobar
// 测试.data()方法
$foo.data('keyName', 'someValue');
console.log($foo); // 现在会包含 jQuery{randomNumber} 属性
// 测试绑定一个事件的名字和触发的事件
$foo.bind('eventName', function (){
        console.log('eventName was called');
});
$foo.trigger('eventName'); // 日志记录 'eventName was called'

.trigger('eventName')应该被使用，它会在对象上查找eventName属性，并且尝试在所有被绑定在jQuery上的事件被执行后执行。它不会检查这个属性是否是函数。为了避免这发生，应该使用.triggerHandler('eventName')方法替换。

$foo.triggerHandler('eventName'); // 也会记录 'eventName was called'

找到所有是div的子节点的p元素，为之添加边框。

$("div > p").css("border","1px solid gray");

在文档中的第一个form中查找属性type为radio的input元素。

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

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

$("div", xml.responseXML);

设置页面的背景色为black。

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

隐藏form中的所有input元素。

$(myForm.elements).hide();