复选框
<!--
比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,
值为"checked"但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,
以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
什么时候使用attr(),什么时候使用prop()?
1.是有true,false两个属性使用prop();
2.其他则使用attr();-->
<script src="../js/jquery-3.1.1.js"></script> <script> $(function(){ //全选 $("#checkedAll").click(function(){ $("input[name='items']").prop("checked",true); }) //全不选 $("#checkedNo").click(function(){ $("input[name='items']").prop("checked",false); }) //反选 $("#checkRev").click(function(){ //方法一 // $("input[name='items']").each(function(){ // this.checked=!this.checked; // }) //方法二 $("input[name='items']").each(function(){ $(this).prop("checked",!$(this).prop("checked")) }) }) //获取选中复选框的值 $("#checkValue").click(function(){ var res=""; $("input[name='items']").each(function(){ if(this.checked){ res+=$(this).val(); } }) alert(res); }) //全选/全不选 $("#selectAll").change(function(){ $("input[name='items']").prop("checked",this.checked); }) }) </script>
表格
<script src="../js/jquery-3.1.1.js"></script> <script> $(function(){ //设置thead背景颜色 $("thead").css("background","#0050D0"); //tbody隔行换色 $("tbody>tr:even").addClass("even");//偶数行 $("tbody>tr:odd").addClass("odd");//偶数行 //设置选中的背景颜色 $("tbody>tr").click(function(){ //判断是否被选中 if($(this).hasClass("selected")){ //如果有selected移除该样式 //find();当前上下文查找符合条件后代 $(this).removeClass("selected").find(":checkbox").prop("checked",false); }else{ $(this).addClass("selected").find(":checkbox").prop("checked",true); } }) //全选全变色 $("thead input[name='choice']").change(function(){ $("tbody input[name='choice']").prop("checked",this.checked); if($(this).prop("checked")){ $("tbody>tr").addClass("selected"); }else{ $("tbody>tr").removeClass("selected"); } }) }) </script>
下拉框
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>下拉框</title> <script src="../js/jquery-3.1.1.js"></script> <script> $(function(){ //移动到右边 $("#btnAdd").click(function(){ $("#select1 option:selected").appendTo("#select2"); }); //全部移动到右边 $("#btnAdd_all").click(function(){ $("#select1 option").appendTo("#select2"); }); //从右边移动到左边 $("#btnRemove").click(function(){ $("#select2 option:selected").appendTo("#select1"); }); //全部移动到左边 $("#btnRemove_all").click(function(){ $("#select2 option").appendTo("#select1"); }); }) </script> <style> .centent { float: left; margin-left: 10px; } button { text-align: center; width: 50px; margin-top: 15px; } </style> </head> <body> <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <option value="1" >篮球</option> <option value="2">足球</option> <option value="3">排球</option> <option value="4">台球</option> <option value="5">乒乓球</option> <option value="6">羽毛球</option> <option value="7">冰球</option> </select> </div> <div class="centent"> <button id="btnAdd">></button><br /> <button id="btnAdd_all">>></button><br /> <button id="btnRemove"><</button><br /> <button id="btnRemove_all"><<</button> </div> <div class="centent"> <select multiple="multiple" id="select2" style="width: 100px;height:160px;"> <option value="8">棒球</option> </select> </div> </body> </html>
表单验证
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>注册</title> <style> .register { width: 500px; margin: 0px auto; } .field { width: 100%; text-align: left; height: 30px; margin-left: 10px; } label:first-child { display: inline-block; width: 70px; } .default { font-size: 12px; color:#aaa; } .success { font-size: 12px; color: green; } .fail { font-size: 12px; color: red; } .focus { border: 1px solid gray; } .blur { border: 1px solid red; } .contorl { padding-left:100px; } </style> <script src="../js/jquery-3.1.1.js"></script> <script> $(function(){ var result_name; var result_pwd; var result_pwd1; //验证用户名 //获取焦点添加焦点样式 $("#userName").focus(function(){ $(this).addClass("focus"); }).blur(function(){ //用户名正则 var pattern_userName=/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/; //判断用户输入的用户名是否正确 if(!pattern_userName.test($(this).val())){ $(this).addClass("blur"); $(this).next().text("用户格式不正确").removeClass("default").addClass("fail"); }else{ $(this).removeClass("blur"); $(this).next().text("ok").removeClass("fail").addClass("success"); result_name=true;//验证通过 } }); //密码 $("#userPwd").focus(function(){ $(this).addClass("focus"); }).blur(function(){ //用户名正则 var pattern_pwd=/^[a-zA-Z]\w{5,17}$/; //判断用户输入的用户名是否正确 if(!pattern_pwd.test($(this).val())){ $(this).addClass("blur"); $(this).next().text("用户密码不规范").removeClass("default").addClass("fail"); }else{ $(this).removeClass("blur"); $(this).next().text("ok").removeClass("fail").addClass("success"); result_pwd=true;//验证通过 } }); //确认密码 $("#userSPwd").focus(function(){ $(this).addClass("focus"); }).blur(function(){ //获取用户输入的密码 var pwd=$("#userPwd").val(); //判断用户输入的用户名是否正确 if(pwd!=$(this).val()){ $(this).addClass("blur"); $(this).next().text("两次输入的密码不一致").removeClass("default").addClass("fail"); }else{ $(this).removeClass("blur"); $(this).next().text("ok").removeClass("fail").addClass("success"); result_pwd1=true;//验证通过 } }); //邮箱 //手机号 //提交表单 $("#btnRegister").click(function(){ if(result_name&&result_pwd&&result_pwd1){ //表单通过 $("form").submit();//表单提交 }else{ alert("请填写完整信息"); return false; } }) }) </script> </head> <body> <div class="register"> <fieldset> <legend><strong>用户注册</strong></legend> <form action="" method=""> <div class="field"> <label for="userName">用户名:</label> <input type="text" name="username" id="userName" value="" required placeholder="请输入用户名" /> <span class="default">用户名由6-20位以字母开头或数字组成</span> </div> <div class="field"> <label for="userPwd">密码:</label> <input type="password" name="password" id="userPwd" value="" required placeholder="请输入密码" /> <span class="default">密码由6到20位字母和数字组成</span> </div> <div class="field"> <label for="userSPwd">确认密码:</label> <input type="password" name="spassword" id="userSPwd" value="" required placeholder="确认密码" /> <span class="default">再次输入密码</span> </div> <div class="field"> <label>性别:</label> <input type="radio" name="gender" value="male" checked="checked" id="rdoMale" /><label for="rdoMale">男</label> <input type="radio" name="gender" value="female" id="rdoFemale" /><label for="rdoFemale">女</label> </div> <div class="field"> <label for="userEmail">邮箱:</label> <input type="email" name="useremail" id="userEmail" value="" /> <span class="default"></span> </div> <div class="field"> <label for="userPhone">手机:</label> <input type="text" name="phone" id="userPhone" value="" /> <span class="default"></span> </div> <div class="contorl"> <input type="button" name="register" id="btnRegister" value="注册" /> </div> </form> </fieldset> </div> </body> </html>