jQuery 是一款廣受歡迎的 JavaScript 庫,它提供了許多便捷 API 來操作 DOM、樣式、響應事件等等,其中一個重要的功能就是子類遍歷。
jQuery 提供了多個 API 來遍歷子節點,例如children()
、find()
和next()
。這些方法可以讓我們在 HTML 層次結構中快速定位到需要操作的元素。
// 使用 children() 遍歷子節點 $('div').children('p').css('color', 'red'); // 使用 find() 遍歷后代節點 $('body').find('a').removeClass('active'); // 使用 next() 遍歷下一個兄弟節點 $('h1').next('p').addClass('active');
通過上面的代碼,我們可以看到這些 API 的具體用法。其中,children()
方法只會遍歷直接子元素,即元素之間的層數為一。而find()
方法則可以遍歷所有后代元素,無論他們的層數是多少。而next()
方法則是遍歷下一個兄弟元素。
當然,我們還可以使用siblings()
方法來遍歷同級元素,以及parent()
方法來遍歷父級元素。
// 使用 siblings() 遍歷同級元素 $('li').siblings().addClass('highlight'); // 使用 parent() 遍歷父級元素 $('h1').parent().css('background', 'blue');
總的來說,jQuery 提供的子類遍歷方法非常便捷和實用,可以使我們更加高效地操作 DOM 元素。
下一篇層級選擇器有css