JQuery 常見選擇器詳解練習1
阿新 • • 發佈：2018-12-25
1.常見基本選擇器程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function(){ //alert($("#ID").val());//查詢ID並顯示其內容 //alert($("a").html());//查詢ID並顯示其內容 //alert($('.classname').val()); //alert($("*").length); alert($("input,a").length);//顯示多個事件選擇器的長度 }); </script> </head> <body> <input type="text" id="ID" value="根據ID選擇"/> <a>根據元素名稱選擇</a> <input type="text" class="classname" value="根據元素css類名選擇"/> </body> </html>
截圖：
2.常見的層次選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function(){ //alert($("#divTest a").length); //alert($("#divTest>input").length); //alert($("#next+input").length); alert($("#next~input").length); }); </script> </head> <body> <div id="divTest"> <input type="text" value="投資"/> <input id="next" type="text"/> <input type="text" value="擔當"/> <input type="text" title="學習" value="學習"/> <a>1<input type="text" value="股票"/></a> <a>2<a>3</a></a> </div> </body> </html>
截圖：
3.常見的過濾選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function(){ //alert($('li:first').html()); //alert($('li:last').html()); //alert($("ul input:not(:checked)").val()); //alert($('li:even').length); //alert($('li:even').get(1).innerHTML);//將jquery物件轉換成DOM物件 //alert($('li:odd').get(1).innerHTML); //alert($('li:eq(2)').html()); //alert($('li:gt(1)').length); //alert($('li:lt(3)').length); alert($(':header').length);//查詢標題標籤 }); </script> </head> <body> <div id="divTest"> <ul> <li>投資</li> <li>理財</li> <li>成熟</li> <li>擔當</li> <input type="radio" value="學習" checked="checked" />學習 <input type="radio" value="不學習" />不學習 <h1>Header 1</h1> <h2>Header 2</h2> </ul> </div> </body> </html>
截圖：
