jquery 的過濾和轉移
阿新 • • 發佈：2019-01-02
jquery 的過濾和轉移
!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> <title></title> <script type="text/javascript"> $(function () { //1、對選擇集進行過濾 $("div").has("p").css({"color":"blue"}); $("div").eq(4).css({"fontSize":"30px"}); $("div").not(".go").css({"text-align":"center"}); $('div').filter('.go').css({"color":"red"}); //2、對選擇器進行轉移 $(".prev").prev().css({"text-weight":"border","color":"red"}); $(".prev").prevAll().css({"border":"1px solid black","line-height":"40px"}); $(".prev").next().css({"text-weight":"border","color":"gray"}); $(".prev").nextAll().css({"border":"1px solid yellow","line-height":"50px"}); $('div').siblings().css({"color":"red"}); }) </script> </head> <body> <div class="go"><p>1</p></div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div class="prev">6</div> <div>7</div> <div><span class="span">8</span><span>9</span></div> </body> </html>
總結：綜上程式碼所述，總結過濾和轉移如下：
1、對選擇集進行過濾
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').eq(5); //選擇第6個div元素
2、選擇集轉移
$('div').prev(); //選擇div元素前面緊挨的同輩元素 $('div').prevAll(); //選擇div元素之前所有的同輩元素 $('div').next(); //選擇div元素後面緊挨的同輩元素 $('div').nextAll(); //選擇div元素後面所有的同輩元素 $('div').parent(); //選擇div的父元素 $('div').children(); //選擇div的所有子元素 $('div').siblings(); //選擇div的同級元素 $('div').find('.myClass'); //選擇div內的class等於myClass的元素