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()
方法可以幫助我們快速地找到我們需要的元素,而且可以和其他選擇器、過濾器等方法一起使用,靈活性很高,非常方便。
上一篇怎么用css繪出心形