jquery層級選擇器， 選取td
阿新 • • 發佈：2018-12-30
$("div span") 選取<div>裡的所有<span>元素 (測試環境： W3School 網頁測試)
$("div > span") 選取<div>元素下元素名是<span>的子元素 不包括子元素的子元素例如:
<div>
<span>
<span></span>
</span>
</div>
$("div span") .length return 2
$("div > span") .length return 1
隨機選取 td 例項：
</pre><pre name="code" class="html"><!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> var int; var stop =function (){ if(int!= null){ clearInterval(int); } } var rand = function (){ //$操作td var rows = $("table tbody>tr").size(); var cols = $("table tbody>tr:eq(0)>td").size(); var han = Math.round(Math.random()*rows-0.5); var lie = Math.round(Math.random()*cols-0.5); var it = $("table tbody>tr").eq(han); it = it.find("td").eq(lie); $("td").css("background-color",""); it.css("background-color","red"); //js操作td var table = document.getElementById("ta"); var tr = table.rows[han]; var td = tr.cells[lie].innerHTML; document.getElementById("blank").innerHTML = td; } $(document).ready(function(){ $("#ks").click(function(){ int = setInterval("rand()",200); $(this).attr("disabled",true); $("#js").attr("disabled",false); setTimeout("stop()",2000); }); $("#js").click(function(){ clearInterval(int); $(this).attr("disabled",true); $("#ks").attr("disabled",false); }); }); </script> </head> <body> <table id='ta'> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> </table> <button id="ks">開始</button> <button id="js">再來一次</button> <span id ="blank" style ="background-color: blue"></span> </body> </html>