2013-03-07 80 views
0
var firstBodyChild = document.body.children[0]; 
$('li', firstBodyChild); 

// make a selection within a previous selection 
var paragraph = $('p'); 
$('a', paragraph); 

这是来自网站http://jqfundamentals.com指南的示例。jQuery对象和属性

有几件事情我不明白:

  1. 格式$()创建一个对象,据我了解。这意味着paragraph是一个对象 - 但它的属性是什么?它是什么样的对象?

2.

var firstBodyChild = document.body.children[0]; 
$('li', firstBodyChild); 

我希望如果有人能解释这一部分。 firstBodyChild将在身体部分firstChild,但第二行意味着什么?

谢谢。

回答

1
  1. $()是的别名,这可能更具可读性。所以你正在调用一个函数并将参数传递给它。
  2. 通常,第一个参数是一个选择器,正如您从CSS中了解的那样。第二个参数是可选的,称为上下文。

假设你有两个列表ul在你的身体,并希望使第一个红色列表中的元素,你可以使用体.children[0]的情况下只得到这个元素列表中的项目,如你的第一个代码例。

然后,您可以继续使用jQuery来获取所有li元素的列表,整个文档或者在(通过使用$('li')),或一个特定的环境中,例如,第一个列表ul你已经保存在变量,使用$('li', firstBodyChild)

jQuery调用的返回对象是DOM节点的包装器。因此它存储了可以通过查询传递的元素以及可以用来过滤和修改这些元素的一大堆函数。

要完成此示例,要将这些列表元素染成红色,可以使用jQueries .css来修改这些元素的外观。

var firstBodyChild = document.body.children[0]; 
$('li', firstBodyChild).css({color: 'red'}); 
1
  1. '段'变量成为一个jQuery对象,可以使用jQuery的标准功能集。

  2. 第二行表示jQuery应该在'firstBodyChild'元素的上下文中寻找一个<li>元素。查看文档此处了解详情:http://api.jquery.com/jQuery/#jQuery1

1

$()延伸的对象 - 在这种情况下,DOM元素 - 与所有标准的jQuery方法。

和(IMHO):

$('li', document.body.children[0])是说的一个令人困惑的方式:

$('body *:first li')

换句话说,第二个参数传递给$()方法定义了li要素应中找到上下文。