jquery - jQuery 元素选择

Question

我不能简单地在 API 文档中找到这些信息，因为我不知道如何正确调用它。所以问题：

我有这种 jQuery 选择器用法：

var $table = $('#sort-table');          // id of <table>
var $rows = $('tbody > tr', $table);    // , $table ???

那么 $rows 的第二个参数是什么意思呢？如果您好心，请您帮我在 jQuery 文档中找到它吗？

Answer 1

var $rows = $('tbody > tr', $table);

这里 $table 是上下文，根据jQuery 文档 jQuery( selector [, context ] )

$('tbody > tr', $table);  

或者

$table.find('tbody > tr'); 

用于使用context给定的选择标准调用 find

Answer 2

第二个参数为选择提供上下文。您的rows变量将包含tr元素的直接子元素tbody，这些元素是.$table

你也可以这样写，在这种情况下，它的行为方式完全相同：

var $rows = $("#sort-table tbody > tr");

context 参数有点等价于.find()方法，所以你也可以这样写：

var $rows = $table.find("tbody > tr");

Answer 3

这意味着tr在 $table 中查找

这类似于调用

var $rows = $table.find('tbody > tr');

第二个参数$('tbody > tr', $table); 是可选的上下文。

Answer 4

是上下文参数，相当于$table.find('tbody > tr')

给定的选择器tbody > tr将在给定的 context 中查找$table。

例如：在您的页面中，您可能有多个表，并且您只对一个表上的行感兴趣，在这种情况下，如果您使用选择器$('tbody > tr')将选择所有tr表中的所有 s。那不是你想要的。

但是在您将上下文作为您感兴趣的表传递时，$('tbody > tr', $table)选择器tbody > tr将仅针对$table表的子级执行，仅获取所需tr的 s。

演示：小提琴。

如果您查看演示，则 css 属性$rows.css('color', 'red');仅应用于第一个表，而 as$('tbody > tr').css('font-weight', 'bold');应用于所有表。

Answer 5

它被称为选择器的上下文，用于将您的查询限制在某个“范围”，由您用作上下文的 jQuery 对象指定。

从文档：

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

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

有关详细信息，请参阅：http ://api.jquery.com/jQuery/

在您的示例中，这意味着：

var $rows = $('tbody > tr', $table);

是相同的：

var $rows = $table.find('tbody > tr');

Answer 6

看看这里发生了什么：

var $table = $('#sort-table');  
var $rows = $('tbody > tr', $table); 

在第一行代码变量$table中保存着表 id #sort-table。

在第二行代码中说仅'tbody > tr'在此中找到$table。

这也可以这样写：

var $rows = $('tbody > tr', '#sort-table'); 
  //-says find-^^^^^^^^^--in-^^^^^^^^^^^----this table

您也可以使用 find 来实现：

var $rows = $('#sort-table').find('tbody > tr'); 

或者

var $rows = $table.find('tbody > tr');