7、jQuery选择器及绑定方法
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','太阳','23@qq.com','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){
if(confirm("确认执行吗？")){ 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 }
}else{
alert("看，后悔了吧！！")；
}
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>
