$(function(){ $('p:first').css('border','5px solid red'); $('p:last').css('border','5px dashed blue'); $('p:first+p').css('border','5px solid gray') $('#item01 li:odd').css('border','5px solid green') $('#item01 li:even').css('border','5px dashed blue') $('#item02 li:nth-child(2)').css('border','5px dashed blue') $('#item03 li:nth-child(3n+2)').css('border','5px solid blue') $('#item04 :gt(4)').css('border','5px solid red') $('#item04 :lt(3)').css('border','5px solid gray') $('#item04 :eq(2)').css('border','5px dashed blue') $('#item05 li:last-child').css('border','5px solid gray') $('#item03 li:last-child').css('border','5px solid red') }) <h3>jQuery基础过滤器:first和:last示例</h3> <hr> <p id="p1">这是第一个段落元素。</p> <p>这是第二个段落元素。</p> <p>这是第三个段落元素。</p> <ul id="item01"> li:nth-child(odd) 筛选奇数项 <li>Apple</li> <li>Pear</li> <li>Grape</li> <li>Pineapple</li> </ul> <ul id="item02"> li:nth-child(2) 筛选第二个元素 <li>Milk</li> <li>Bread</li> <li>Coffee</li> </ul> <ul id="item03"> li:nth-child(3n+2) 筛选第3n+2个元素 <li>Red</li> <li>Blue</li> <li>Green</li> <li>Yellow</li> <li>Orange</li> <li>Purple</li> </ul> <ul id="item04"> eq gt lt <li>Milk</li> <li>Bread</li> <li>Coffee</li> <li>Bread</li> <li>Coffee</li> <li>Bread</li> <li>Coffee</li> </ul> <ul id="item05"> last-child <li>Milk</li> <li>Bread</li> <li>Coffee</li> <li>Coffee</li> </ul> 最后修改：2024 年 05 月 30 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 如果觉得我的文章对你有用，请随意赞赏
