JQuery中$("ul li:first")和$("ul li:first-child")的區別
阿新 • • 發佈：2018-11-22
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜鳥教程</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ $("ul li:first").hide(); }); }); </script> </head> <body> <p>List 1:</p> <ul> <li>Coffee</li> <li>Milk</li> <li>Tea</li> </ul> <p>List 2:</p> <ul> <li>Coffee</li> <li>Milk</li> <li>Tea</li> </ul> <button>點我</button> </body> </html>
初始時，介面效果：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜鳥教程</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ $("ul li:first-child").hide(); }); }); </script> </head> <body> <p>List 1:</p> <ul> <li>Coffee</li> <li>Milk</li> <li>Tea</li> </ul> <p>List 2:</p> <ul> <li>Coffee</li> <li>Milk</li> <li>Tea</li> </ul> <button>點我</button> </body> </html>
從作用效果可以看出，first只對第一個ul中的第一個li隱藏，而first-child對每個ul中的第一個li隱藏。