Jquery
1、选择器
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/8/7 Time: 14:12 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>jquery测试</title> <!-- 引入jQuery包--> <script src="js/jquery-1.11.3.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> //如果定义jq函数可以不卸载这个块中，其他jq代码最好都写在这里，为了防止文档未加载完全就执行代码出错误 $(function () { // alert("你好") //选择器 id 标签选择器 类选择器 $("#hh").css("color","red"); //类选择器 $(".bb").css("color","blue"); // 标签选择器 // $("h3").css("color","yellow"); }) //定义一个方法 function m1() { } </script> <h3 class="bb">你好</h3> <h3 class="bb">你好</h3> <h3 class="bb">你好</h3> <h3 id="hh" class="bb">你好</h3> <h3 class="bb">你好</h3> <h3 class="bb">你好</h3> <h3 class="bb">你好</h3> <h3 class="bb">你好</h3> <h3 class="bb">你好</h3> </body> </html>
2、注册验证（正则）
<%-- Created by IntelliJ IDEA. User: 123 Date: 2019/8/8 Time: 15:11 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script type="text/javascript" src="js/jquery-1.11.3.js" ></script> </head> <body> <!-- 模拟注册中的前端验证，学会使用高级验证方式 正则表达式--> <form method="post" action="https://www.baidu.com/" onsubmit="javascript:return sb()"> <table> <tr><td>用户名</td><td><input id="username" onblur="yzname()"/></td><td id="message1"></td></tr> <tr><td>性别</td><td><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女</td><td></td></tr> <tr><td>密码</td><td><input id="pwd1" type="password" onblur="yzpwd1()"/></td><td id="message2"></td></tr> <tr><td>再次确认密码</td><td><input id="pwd2" type="password" onblur="yzpwd2()"/></td><td id="message3"></td></tr> <tr><td>手机</td><td><input id="phone" onblur="yzphone()"/></td><td id="message4"></td></tr> <tr><td>邮箱</td><td><input id="mail" onblur="yzmail()"/></td><td id="message5"></td></tr> <tr><td><input type="submit" value="注册" /></td><td><input type="reset" value="重置"/></td><td></td></tr> </table> </form> <script type="text/javascript"> //非空验证 function yzname() { var name= $("#username").val(); //alert(name); if(name.trim().length==0){ $("#message1").html("用户名不能为空！").css("color","red"); return false; }else{ $("#message1").html(""); return true; } } //验证密码 密码不能少于6位，密码一致 function yzpwd1() { var pwd1= $("#pwd1").val(); if(pwd1.length<6){ $("#message2").html("密码不能少于6位！").css("color","red"); return false; }else{ $("#message2").html(""); return true; } } //验证密码2 function yzpwd2(){ var pwd1= $("#pwd1").val(); var pwd2= $("#pwd2").val(); if(pwd1!=pwd2){ $("#message3").html("密码不一致！").css("color","red"); return false; }else{ $("#message3").html(""); return true; } } //验证手机---1开头 11位 纯数字不包含字母 function yzphone() { var phone= $("#phone").val(); /* var one =phone.substring(0,1); if(one!=1||phone.trim().length!=11){ $("#message4").html("手机格式错误！").css("color","red"); }else{ $("#message4").html(""); }*/ //定义一个正则表达式 var reg1=/^1\d{10}$/g; //验证 var result= reg1.test(phone); if(!result){ $("#message4").html("手机格式错误！").css("color","red"); return false; }else{ $("#message4").html(""); return true; } } function yzmail() { var mail= $("#mail").val(); var reg2=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g; //rewr34838@sina.com var result=reg2.test(mail); if(!result){ $("#message5").html("邮箱格式错误！").css("color","red"); return false; }else{ $("#message5").html(""); return true; } } //讨论：在前端结束完验证后，如果出现非法数据，怎么阻止表单的提交！！！！ function sb(){ if(yzname()&&yzpwd1()&&yzpwd2()&&yzphone()&&yzmail()){ return true; } else{ return false; } } </script> </body> </html>
3、全选反选（使用第三方日期插件My97DatePicker）
<%-- Created by IntelliJ IDEA. User: 123 Date: 2019/8/7 Time: 16:14 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script type="text/javascript" src="My97DatePicker/WdatePicke.js"></script> </head> <body> <table> <tr><td><input type="checkbox" id="a" onclick="mall()"/></td><td>已选中<span id="show"></span>条</td></tr> <tr><td><input type="checkbox" class="cc" onclick="count()" /></td><td>西瓜</td></tr> <tr><td><input type="checkbox" class="cc" onclick="count()" /></td><td>苹果</td></tr> <tr><td><input type="checkbox" class="cc" onclick="count()"/></td><td>香蕉</td></tr> <tr><td><input type="checkbox" class="cc" onclick="count()"/></td><td>葡萄</td></tr> <tr><td><input type="checkbox" class="cc"onclick="count()" /></td><td>荔枝</td></tr> <tr><td><input type="checkbox" class="cc" onclick="count()"/></td><td>火龙果</td></tr> <tr><td><input type="checkbox" class="cc" onclick="count()"/></td><td>榴莲</td></tr> <tr><td><input type="checkbox" class="cc" onclick="count()"/></td><td>橘子</td></tr> </table> 1<hr/> <!-- 使用第三方日期插件--> <input class="Wdate" onclick="WdatePicker()"/> <script type="text/javascript"> $(function () { }) function mall(){ //使用单击事件触发该方法 //1获取全选按钮的状态 // var status= $("#a").attr("checked"); jq获取属性值这有问题 var status= document.getElementById("a").checked;//选中true/没选中false //alert(status); var cc=document.getElementsByClassName("cc"); //n个元素 for (var i=0;i<cc.length;i++){ cc[i].checked=status; } //调用计算方法 count(); } function count() {//计算选中的条数 var num = 0; var cc = document.getElementsByClassName("cc"); for (var i = 0; i < cc.length; i++) { if (cc[i].checked) { num++; } } //显示在页面上 $("#show").html(num); //判断是否勾选全选按钮 if (num == cc.length) { document.getElementById("a").checked = true; } else { document.getElementById("a").checked = false; } } </script> </body> </html>
