find方法jquery

笔记2024-04-202 人已阅来源:网络

jQuery中有一个非常常用的方法——find(),它可以从一个元素内部查找所有匹配某个选择器的元素。

这个方法有很多用法,下面我们来看一些例子:

// 在id为container的元素内查找类名为item的元素
$('#container').find('.item');
// 在当前页面内找到所有带有data属性的div元素
$('body').find('div[data]');
// 在ul元素内找到子元素li,并筛选出第二个li
$('ul').find('li:eq(1)');
// 在元素内查找直接包含文本“Hello”的元素
$('#container').find(':contains("Hello")');
// 在表格中找到所有带有disabled属性的input元素,并将它们的背景色改变
$('table').find('input[disabled]').css('background-color', 'gray');

可以看到,find()方法返回的是一个包含所有匹配元素的jQuery对象,因此我们可以对这个对象进行链式操作,如下:

$('#container').find('div')
.addClass('red')
.filter(':first')
.css('color', 'white');

以上代码先将id为container的元素内的所有div元素添加一个red类,然后从中筛选出第一个元素,最后将它的字体颜色变为白色。

find()方法可以帮助我们快速地找到我们需要的元素,而且可以和其他选择器、过滤器等方法一起使用,灵活性很高,非常方便。