引入
<script language="javascript" src="js/jquery-1.11.2.js"></script>这样就可以使用我们的jQuery了
选择器
基本选择器
id(#)
class(.)
元素选择器（div等）
复合选择器
祖先 后代
父亲>儿子
相邻兄的
$(form+input)
相隔兄的
$(form ~ input)
注册事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery练习一</title> <script type="text/javascript" src="../js/jquery-3.2.1.js" ></script> <script type="text/javascript"> $(function() { $("#btn").on("click",function(){ //区分绑定的属性，和是否被选中 console.debug($("input[name='hobbies']:checked").length); }) //alert($("input:checked").length); $("p").on("click",function(){ //选择当前被选择的谁点击谁触发 $(this).hide(); }) $("tr:even").css("background-color","aquamarine"); $("tr:odd").css("background-color","royalblue"); }); </script> </head> <body> 篮球 <input type="checkbox" name="hobbies" value="篮球"/> 足球 <input type="checkbox" name="hobbies" value="足球"/> 羽毛球 <input type="checkbox" name="hobbies" value="羽毛球"/> <input value="点击获取选中个数" type="button" id="btn" /> <br />点击p标签隐藏 <br /> <p>p1</p> <p>p2</p> <p>p3</p> <br />给不同的行添加颜色<br/> <table border="1" width="200px"> <tr> <td>item1</td> </tr> <tr> <td>item2</td> </tr> <tr> <td>item3</td> </tr> <tr> <td>item4</td> </tr> <tr> <td>item5</td> </tr> </table> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>select</title> <script language="javascript" src="../js/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ $("#btn1").on("click",function(){ //追加到后面 $("#select1 option:checked").appendTo($("#select2")); }) $("#btn2").on("click",function(){ //把所有的东西转移到 $("#select1 option").appendTo($("#select2")); }) $("#btn3").on("click",function(){ //把所有的东西转移到 $("#select2 option:checked").appendTo($("#select1")); }) $("#btn4").on("click",function(){ //把所有的东西转移到 $("#select2 option").appendTo($("#select1")); }) }); </script> </head> <body> <table border="1"> <tr> <td> <select id="select1" style="100px" size="10" multiple="multiple"> <option value="选项1">选项1</option> <option value="选项2">选项2</option> <option value="选项3">选项3</option> <option value="选项4">选项4</option> <option value="选项5">选项5</option> <option value="选项6">选项6</option> <option value="选项7">选项7</option> <option value="选项8">选项8</option> <option value="选项9">选项9</option> </select> </td> <td align="center"> <input type="button" id="btn1" value="-->"/><br/> <input type="button" id="btn2" value="==>"/><br/> <input type="button" id="btn3" value="<--"/><br/> <input type="button" id="btn4" value="<=="/> </td> <td> <select id="select2" style="100px" size="10" multiple="multiple"></select> </td> </tr> </table> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>checkbox</title> <script type="text/javascript" src="../js/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ $("#checkAll").on("click",function(){ $("input[name='hobbies']").prop("checked",true); }); $("#checkNotAll").on("click",function(){ $("input[name='hobbies']:checked").prop("checked",false); }); $("#checkUnAll").on("click",function(){ $.each($("input[name='hobbies']"), function(i,e) { e.checked=!e.checked; }); }); }); function checkChange(src){ if(src.checked){ $("input[name='hobbies']").prop("checked",true); }else{ $("input[name='hobbies']:checked").prop("checked",false); } } </script> </head> <body> 请选择你的爱好:<br/> <div> <input type="checkbox" name="hobbies"/>打篮球 <input type="checkbox" name="hobbies"/>踢足球 <input type="checkbox" name="hobbies"/>上网 </div> <div> <input type="checkbox" onchange="checkChange(this)"/>全选/全不选<br/> <input type="button" id="checkAll" value="全选"/> <input type="button" id="checkNotAll" value="全不选"/> <input type="button" id="checkUnAll" value="反选"/> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function() { // 使单选下拉框‘2号’选中 $("#btn1").on("click",function(){ $("#select").val("2号"); }); $("#btn2").on("click",function(){ $("#selectMultiple").val(["2号","5号"]); }); $("#btn3").on("click",function(){ $("input[name=checkbox]").val(["复选2","复选4"]); }); $("#btn4").on("click",function(){ $("input[name='radio']").get(1).checked = true; }); $("#btn5").on("click",function(){ $.each(($("body *:checked")),function(i,e){ $("e").val(); }) }); }); </script> <title>练习5</title> </head> <body> <input id="btn1" type="button" value="使单选下拉框‘2号’选中"/><br/> <input id="btn2" type="button" value="使多选下拉框‘2号’和‘5号’选中"/><br/> <input id="btn3" type="button" value="使复选框‘2号’和‘4号’选中"/><br/> <input id="btn4" type="button" value="使单选框‘单选2’选中"/><br/> <input id="btn5" type="button" value="打印已被选中的值"/><br/> <form name="userForm"> 单选下拉框<select id="select" name="select"> <option value="1号">1号</option> <option value="2号">2号</option> <option value="3号">3号</option> <option value="4号">4号</option> <option value="5号">5号</option> <option value="6号">6号</option> </select> 多选下拉框<select id="selectMultiple" multiple="multiple" size="6" name="selectMultiple"> <option value="1号">01号</option> <option value="2号">02号</option> <option value="3号">03号</option> <option value="4号">04号</option> <option value="5号">05号</option> <option value="6号">06号</option> </select> <br/> 复选框<input value="复选1" type="checkbox" name="checkbox"/>复选1 <input value="复选2" type="checkbox" name="checkbox"/>复选2 <input value="复选3" type="checkbox" name="checkbox"/>复选3 <input value="复选4" type="checkbox" name="checkbox"/>复选4 <input value="复选5" type="checkbox" name="checkbox"/>复选5 <br/> 单选框<input value="单选1" type="radio" name="radio"/>单选1 <input value="单选2" type="radio" name="radio"/>单选2 <input value="单选3" type="radio" name="radio"/>单选3 <input value="单选4" type="radio" name="radio"/>单选4 </form> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>用户新增</title> <script language="javascript" src="../js/jquery-3.2.1.js"></script> <script language="javascript"> $(function(){ //提交 $("#btn_submit").click(function(){ //先获取数据 var username=$("input[name='username']").val(); var email=$("input[name='email']").val(); var tel=$("input[name='tel']").val(); var delbtn='<input type="button" value="删除" onclick="del(this)"/>'; var tr="<tr><td>"+username+"</td><td>"+email+"</td><td>"+tel+"</td><td>"+delbtn+"</td></tr>"; $("#userTbody").append(tr); }); //删除所有 $("#btn_removeAll").click(function(){ $("#userTbody").empty(); }); }); function del(args){ //找到父元素 var tr= $(args).parent().parent(); tr.remove(); } </script> </head> <body> <a href="http://www.itsource.cn">首页</a> <form name="userForm"> <center> 用户录入<br/> 用户名:<input id="username" name="username" type="text"/> E-mail:<input id="email" name="email" type="text"/> 电话:<input id="tel" name="tel" type="text"/> <input type="button" value="提交" id="btn_submit"/> <input type="button" value="删除所有" id="btn_removeAll"/> </center> </form> <hr/> <table border="1" align="center"> <thead> <tr> <th>用户名</th> <th>E-mail</th> <th>电话</th> <th>操作</th> </tr> </thead> <tbody id="userTbody"> </tbody> </table> </body> </html>
$("#id").on("click",funcation(){})
二级联动台
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script language="javascript" src="js/jquery-1.11.2.js"></script> <script> // 1.在加载页面的时候就先获取 省的数据 // 提交ajax 请求 //加载的时候获得数据 $(function(){ //Ajax的get请求$.get(url,data,funcation,"json") $.get("cityServlet",function(data){ $.each(data,function(i,e){ var htmlstr = `<option id=${e.id}>${e.name}</option>`; $("#prov").append(htmlstr); }); },"json"); //当点击省份的时候获得绑定id获得数据 $("#prov").on("change",function(){ var data = $("#prov option:checked"); var id = data.prop("id"); if(id){ //Ajax的post请求$.get(url,data,funcation,"json") $.post("cityServlet",{"pro":id},function(data){ //每次加载的时候都要清空数据 $("#city").html(""); $.each(data,function(i,e){ //获得每次的数据 var htmlstr = `<option id=${e.id}>${e.name}</option>`; //追加到后面 $("#city").append(htmlstr); }); },"json"); } }); }); </script> </head> <body> <h1>二级联动</h1> <select id="prov"> <option>--- 请选择 ---</option> </select> 省 <select id="city"> <option>--- 请选择 ---</option> </select> 市 </body> </html>