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