標籤：
選取器的簡單使用
<%-- Created by IntelliJ IDEA. User: cxspace Date: 16-8-25 Time: 下午2:29 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>jquery選取器</title> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <style type="text/css"> .myClass{ font-size: 30px; color: aqua; } </style></head><body> <div id="div1ID">div1</div> <div id="div2ID">div2</div> <span class="myClass">span</span> <p>段落</p> <script type="text/javascript"> //1)尋找ID未"div1ID"的元素個數 //alert($("#div1ID").size()); //2)尋找DIV元素的個數 // alert($("div").length); //3)尋找所有樣式是"myClass"的元素的個數 // alert($(".myClass").size()); //4)尋找div,span,p元素的個數 //alert(($("div,span,p").size())); //5)尋找所有ID為div1ID,CLASS為myClass,p元素的個數 //alert($("#div1ID,.myClass,p").size()); </script></body></html>
<%-- Created by IntelliJ IDEA. User: cxspace Date: 16-8-25 Time: 下午2:29 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>jquery選取器</title> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <style type="text/css"> .myClass{ font-size: 30px; color: aqua; } </style></head><body><input type="radio" value="1"/><input type="radio" value="2"/><input type="radio" value="3"/> <form> <input type="text" value="a"/> <table> <tr> <td> <input type="checkbox" value="b"/> </td> </tr> </table> </form> <input type="radio" value="c"/> <input type="radio" value="d"/> <input type="radio" value="e"/> <script type="text/javascript"> //1)找到form內所有的input元素個數 // alert($("form input").size()); //2)找到form裡面所有的子級元素個數 // alert($("form>input").size()); //3)找到form同級第一個input元素的value的值 //alert($("form+input").val()); //4)找到所有與表單form同級input元素的個數 alert($("form~input").size()); </script></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <title>選取器</title></head><body> <ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> <li>list item4</li> <li>list item5</li> </ul> <input type="checkbox" checked/> <input type="checkbox" checked/> <input type="checkbox" /> <table border="1"> <tr><td>line1[0]</td></tr> <tr><td>line2[1]</td></tr> <tr><td>line3[2]</td></tr> <tr><td>line4[3]</td></tr> <tr><td>line5[4]</td></tr> <tr><td>line6[5]</td></tr> </table> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <p>p</p> <script type="text/javascript"> //1） 尋找ul中第一個li元素的內容 //html()要用於html/jsp,不能用在xml //text()既能用於html/jsp,且能用於xml // alert($("ul li:first").text()); //2)尋找ul中組後一個元素的內容 //alert($("ul li:last").text()); //3)尋找表格的索引號為1、3、5...奇數行的個數 //alert($("table tr:odd").size()); //4)尋找表格的索引號為2、4、6...偶數行個數 //alert($("table tr:even").size()); //5)尋找表格中第二行的內容 //html():強調的是標籤中的內容,即便標籤中的子標籤,也會顯示出來 //text():強調的是標籤中的常值內容,即使是標籤中的子標籤,也只會顯示出標籤中文本的內容 //alert($("table tr:eq(1)").text()); //6)尋找表格中索引值大於0的行的數量 //alert($("table tr:gt(0)").size()); //7)尋找索引值小於3的行的個數 //alert($("table tr:lt(3)").size()); //8)給頁面內所有標題加上紅色背景色,且文字加黃色 // $(":header").css("background-color","red").css("color","#ffff33"); //9)尋找所有[未]選中的input為checkbox的元素個數 alert($(":checkbox:not(:checked)").size()); </script></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>select</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <style type="text/css"> .myClass{ font-size: 44px; color:blue; } </style></head><body><div><p>John Resig</p></div><div><p>George Martin</p></div><div>Malcom John Sinclair</div><div>J. Ohn</div><div></div><p></p><p></p><script type="text/javascript"> //1)尋找所有包含文本"John"的div元素的個數 //alert($("div:contains(‘John‘)").size()); //2)尋找所有p元素為空白的元素個數 //alert($("p:empty").size()); //3)給所有包含p元素的div元素添加一個myClass樣式 // $("div:has(p)").addClass("myClass"); //4)尋找多有含有子項目或者文本的p元素個數,即p為父元素 alert($("p:parent").size());</script></body></html>
JQuery學習筆記-選取器-(一)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
