7、jQuery選擇器及繫結方法
阿新 • • 發佈：2021-07-21
jQuery中的選擇器分類：
基本選擇器
id選擇器： 語法： $("#id屬性值") 通過id屬性值獲取元素
類選擇器： 語法： $(".class屬性值") 通過class屬性值獲取元素
標籤選擇器： 語法： $("標籤名") 通過標籤名獲取元素
層級選擇器
表單域選擇器
$(":input") 可以獲取所有的input標籤、select標籤、textarea、button
$(":text") 可以獲取type="text"的元素 獲取所有的輸入框
$(":password") 可以獲取type="password"的元素 獲取所有的輸入框
$(":button") 可以獲取type="button" 以及 雙<button>提交</button的元素 獲取所有的輸入框
$(":checkbox") 可以獲取所有複選框
$(":radio") 可以獲取所有單選框
$(":file") 可以獲取所有單選框
$("tr:hidden") 獲取所有的隱藏的tr標籤
表單域屬性選擇器
$(":checked") ： 獲取所有選中的單選框或者複選框
$(":radio:checked") ： 獲取所有選中的單選框或者複選框
單選框和複選框有checked屬性，
位置選擇器
$("tr:even") 匹配所有行索引值為偶數的元素，從 0 開始計數
$("tr:odd") 匹配所有行索引值為奇數的元素，從 0 開始計數
$("option:first")匹配所有option標籤的第一個
$("option:last")匹配所有option標籤的最後一個
$("tr:eq(index)")匹配所有option標籤的最後一個
$("tr:gt(index)")匹配所有行索引值大於index的元素
$("tr:lt(index)")匹配所有行索引值小於index的元素
屬性選擇器
$("[屬性選擇器1] [屬性選擇器2]") 匹配具有該些屬性名的元素
$("[屬性名]") 匹配具有該屬性名的元素
$("[屬性名= 屬性值]")
$("[name='beijing']")匹配具有該屬性名 及屬性值的元素
jQuery元素繫結事件語法”
$("選擇器").事件型別(function(){
//程式碼塊
})
1 create database student_in_ 2 use student_in_3 create table admin( 4 adminId int primary key auto_increment, 5 adminName varchar(25) not null, 6 adminPwd varchar(25) not null 7 ); 8 select * from admin 9 insert admin values (0,'root','root') 10 create table t_clazz( 11 cid int primary key auto_increment, 12 cname varchar(25) 13 ); 14 create table t_student( 15 sid int primary key auto_increment, 16 sname varchar(200), 17 pwd varchar(200), 18 tel varchar(100), 19 address varchar(200), 20 email varchar(100), 21 birthday date, 22 sal double, 23 cid int, 24 hobby varchar(200), 25 sex varchar(10), 26 status int ,# 0(即將入學),1(在讀)2(退學) 27 FOREIGN key (cid) REFERENCES t_clazz(cid) 28 ) 29 select * from t_student left join t_clazz on t_student.cid=t_clazz.cid where true and sname like '%白%' and t_student.cid = 1 30 insert into t_clazz values (3,'3班') 31 insert into t_student values (0,'王昭君','word','1773','太陽','[email protected]','2016-10-25',20800.5,'2','喝酒','女',0) 32 select * from t_student.
1 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 2 <%-- 3 Created by IntelliJ IDEA. 4 User: Administrator 5 Date: 2021/7/21 6 Time: 15:02 7 To change this template use File | Settings | File Templates. 8 --%> 9 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 10 <html> 11 <head> 12 <title>Title</title> 13 <script src="../jquery-1.8.2.min.js"></script> 14 </head> 15 <body> 16 <h1>查詢頁面</h1><hr> 17 <form action="ListServlet" method="post"> 18 姓名:<input type="text" name="sname" value="${param.sname}"> 19 班級:<select name="cid"> 20 <option value="">請選擇班級</option> 21 <option value="1" ${param.cid == 1 ? "selected":""}>1年1班</option> 22 <option value="2" ${param.cid == 2 ? "selected":""}>1年2班</option> 23 <option value="3" ${param.cid == 3 ? "selected":""}>1年3班</option> 24 <option value="4" ${param.cid == 4 ? "selected":""}>2年1班</option> 25 </select> 26 住址:<input type="text" name="address" value="${param.address}"><br> 27 生日:<input type="text" name="startBir" value="${param.startBir}">--<input type="text" name="endBir" value="${param.endBir}"><br> 28 薪資:<input type="text" name="startSal" value="${param.startSal}">--<input type="text" name="endSal" value="${param.endSal}"><br> 29 <input type="submit" value="查詢"> 30 <input type="button" value="重置" onclick="testReSet()"> 31 </form> 32 <table border="1"> 33 <tr> 34 <td> 35 </td> 36 <td>姓名</td> 37 <td>密碼</td> 38 <td>電話</td> 39 <td>地址</td> 40 <td>郵箱</td> 41 <td>生日</td> 42 <td>薪水</td> 43 <td>班級號</td> 44 <td>愛好</td> 45 <td>性別</td> 46 <td>狀態</td> 47 <td>班級名</td> 48 <td>操作</td> 49 </tr> 50 51 <c:forEach items="${list}" var="s"> 52 <tr class="cl"> 53 <td> 54 <input type="checkbox" name="sids" value="${s.sid}"> 55 </td> 56 <td>${s.sname}</td> 57 <td>${s.pwd}</td> 58 <td>${s.tel}</td> 59 <td>${s.address}</td> 60 <td>${s.email}</td> 61 <td>${s.birthday}</td> 62 <td>${s.sal}</td> 63 <td>${s.cid}</td> 64 <td>${s.hobby}</td> 65 <td>${s.sex}</td> 66 <td> 67 <c:if test="${s.status==0}">即將入學</c:if> 68 <c:if test="${s.status==1}">在讀</c:if> 69 <c:if test="${s.status==2}">退學</c:if> 70 </td> 71 <td>${s.cname}</td> 72 <td> 73 <c:if test="${s.status==0}"><input type="button" onclick="update(${s.sid},${s.status})" value="入學"></c:if> 74 <c:if test="${s.status==1}"><input type="button" onclick="update(${s.sid},${s.status})" value="退學"></c:if> 75 <c:if test="${s.status==2}"><input type="button" onclick="update(${s.sid},${s.status})" value="報名"></c:if> 76 </td> 77 </tr> 78 </c:forEach> 79 <input type="button" value="全選" onclick="qx()"> 80 <input type="button" value="全不選" onclick="qbx()"> 81 <input type="button" value="反選" onclick="fx()"> 82 </table> 83 84 <script> 85 function update(id,status){ 86 switch (status){ 87 case 0:location.href="/UpdateStatus?sid="+id+"&status=1" 88 break; 89 case 1:location.href="/UpdateStatus?sid="+id+"&status=2" 90 break; 91 case 2:location.href="/UpdateStatus?sid="+id+"&status=0" 92 break; 93 } 94 } 95 96 $("tr:odd").css("background-color","red") 97 $("tr:even").css("background-color","green") 98 $("tr:eq(0)").css("background-color","dodgerblue") 99 var color; 100 $("tr.cl").mouseover(function (){ 101 color=$(this).css("background-color"); 102 $(this).css("background-color","yellow") 103 }) 104 $("tr.cl").mouseout(function (){ 105 $(this).css("background-color",color) 106 }) 107 function testReSet(){ 108 location.href="ListServlet" 109 } 110 function qx() { 111 $("[name='sids']").prop("checked",true) 112 } 113 function qbx() { 114 $("[name='sids']").prop("checked",false) 115 } 116 function fx(){ 117 $("[name=sids]").each(function (){ 118 $(this).prop("checked",!$(this).prop("checked")) 119 }) 120 } 121 </script> 122 </body> 123 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.8.2.min.js"></script> 7 <script> 8 $(function (){ 9 $("#btn").click(function (){ 10 $("tr:odd").css("background-color","dodgerblue") 11 // $("tr:odd")(function (){ 12 // $("tr:odd").css("background-color","blue") 13 // }) 14 $("tr:even").css("background-color","red") 15 $("tr:first").css("background-color","white") 16 }) 17 }) 18 </script> 19 </head> 20 <body> 21 <input type="button" id="btn" value="點選變色"> 22 <table border="1" > 23 <tr> 24 <th>編號</th> 25 <th>姓名</th> 26 <th>年齡</th> 27 </tr> 28 <tr align="center"> 29 <td>1</td> 30 <td>張三</td> 31 <td>18</td> 32 </tr> 33 <tr align="center"> 34 <td>2</td> 35 <td>李四</td> 36 <td>19</td> 37 </tr> 38 <tr align="center"> 39 <td>3</td> 40 <td>王五</td> 41 <td>17</td> 42 </tr> 43 <tr align="center"> 44 <td>4</td> 45 <td>趙六</td> 46 <td>20</td> 47 </tr> 48 <tr align="center"> 49 <td>5</td> 50 <td>孫權</td> 51 <td>21</td> 52 </tr> 53 <tr align="center"> 54 <td>6</td> 55 <td>候八</td> 56 <td>19</td> 57 </tr> 58 </table> 59 <input id="i1" type="button" value="red" style="background-color: red" onclick="f1()"> 60 <input id="i2" type="button" value="blue" style="background-color: blue" onclick="f2()"> 61 <input id="i3" type="button" value="green" style="background-color: green" onclick="f3()"> 62 <input id="i4" type="button" value="grey" style="background-color: darkgrey" onclick="f4()"> 63 <div id="d1" style="border:solid 1px; width: 500px;height: 100px">red</div> 64 <div id="d2" style="border:solid 1px; width: 500px;height: 100px">blue</div> 65 <div id="d3" style="border: solid 1px; width: 500px;height: 100px">green</div> 66 <div id="d4" style="border: solid 1px; width: 500px;height: 100px">grey</div> 67 <script> 68 function f1(){ 69 if ( $("#d1").css("background-color")=='rgba(0, 0, 0, 0)'){ 70 $("#d1").css("background-color","red") 71 }else{ 72 $("#d1").css("background-color",'rgba(0, 0, 0, 0)') 73 } 74 } 75 function f2(){ 76 if ( $("#d2").css("background-color")=='rgba(0, 0, 0, 0)'){ 77 $("#d2").css("background-color","blue") 78 }else{ 79 $("#d2").css("background-color",'rgba(0, 0, 0, 0)') 80 } 81 } function f3(){ 82 if ( $("#d3").css("background-color")=='rgba(0, 0, 0, 0)'){ 83 $("#d3").css("background-color","green") 84 }else{ 85 $("#d3").css("background-color",'rgba(0, 0, 0, 0)') 86 } 87 } function f4(){ 88 if ( $("#d4").css("background-color")=='rgba(0, 0, 0, 0)'){ 89 $("#d4").css("background-color","grey") 90 }else{ 91 $("#d4").css("background-color",'rgba(0, 0, 0, 0)') 92 } 93 } 94 </script> 95 </body> 96 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../jquery-1.8.2.min.js"></script> 7 <script> 8 //文件就緒函式 9 $(function () { 10 //給id=btn的元素繫結點選事件 11 $("#btn").click(function () { 12 //獲取下標為奇數的tr標籤 13 $("tr:odd").css("background-color","blue") 14 //獲取下標為偶數的tr標籤 15 $("tr:even").css("background-color","red") 16 17 $("tr:first").css("background-color","#fff") 18 }) 19 }) 20 </script> 21 </head> 22 <body> 23 <input type="button" value="點選變色" id="btn"> 24 <table border="1"> 25 <tr> 26 <td>編號</td> 27 <td>姓名</td> 28 </tr> 29 <tr> 30 <td>1</td> 31 <td>rose</td> 32 </tr> 33 <tr> 34 <td>2</td> 35 <td>雷少</td> 36 </tr> 37 <tr> 38 <td>3</td> 39 <td>芷若</td> 40 </tr> 41 <tr> 42 <td>4</td> 43 <td>智超</td> 44 </tr> 45 <tr> 46 <td>5</td> 47 <td>峰域</td> 48 </tr> 49 </table> 50 </body> 51 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../jquery-1.8.2.min.js"></script> 7 </head> 8 <body> 9 <input type="file"> 10 <table> 11 <tr style="display:none"> 12 <td>Value 1</td> 13 </tr> 14 <tr> 15 <td style="display: none">Value 2</td> 16 </tr> 17 </table> 18 <input type="radio" id="sex01" value="男" checked>男 19 <input type="radio" id="sex02" value="女">女<br> 20 <input type="checkbox" name="hobby" value="睡覺">睡覺 21 <input type="checkbox" name="hobby" checked value="打嗝">打嗝 22 <input type="checkbox" name="hobby" checked value="磨牙">磨牙 23 <br> 24 <ul> 25 <li>list item 1</li> 26 <li>list item 2</li> 27 <li>list item 3</li> 28 <li>list item 4</li> 29 <li>list item 5</li> 30 </ul> 31 </body> 32 </html> 33 <script> 34 // 獲取隱藏元素 35 console.log($("tr:hidden")) 36 console.log($("td:hidden")) 37 console.log($(":checked")) 38 console.log($(":radio:checked"))//獲取所有選中的單選框 39 console.log($(":checkbox:checked"))//獲取所有選中的複選框 40 console.log($(":checked:checkbox"))//獲取所有選中的複選框 41 console.log($("li:first"))//獲取所有選中的複選框 42 //獲取所有下標為奇數的li標籤 43 console.log($("li:odd")) 44 console.log($("li:first"))//獲取第一個li標籤 45 console.log($("li:last"))//獲取最後一個li標籤 46 console.log($("li:eq(1)"))//獲取給定下標的元素 47 </script>