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>

 

posted @ 2019-08-10 20:49  勤奋的园  阅读(155)  评论(0编辑  收藏  举报