常用的jquery 中一些js

时间:2019-10-22
本文章向大家介绍常用的jquery 中一些js,主要包括常用的jquery 中一些js使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.验证用户登录信息

$(function () {
    
    $("#phone").blur(function () {
        var checkPhone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
        var username = $(this).val();
        //手机号匹配成功
        if(checkPhone.test(username)){
            $("#divErrorMssage").html("");
            
        }
        //手机号匹配不成功
        else{
            $("#divErrorMssage").html("<b><font style='color:red'>输入不合法</font></b>");
            
        }
    });
    
    $("#txtPassword").blur(function(){
        var reg = /^[a-zA-Z]\w{5,17}$/;
        var password = $(this).val();
        //密码匹配成功
        if(reg.test(password)){
            $("#divErrorMssage").html("");
            usn = true;
        }
        //密码号匹配不成功
        else{
            $("#divErrorMssage").html("<b><font style='color:red'>输入不合法</font></b>");
            usn = false;
        }
    });
    
})
    //总体校验表单是否可以提交了 如果返回的true表单才可以提交。
    function checkForm() {
        var username = checkUsername();
        var password = checkPassword();
        if (username && password) {
            
            return true;
        } else {
            return false;
        }
    }
//邮箱验证
$("#txtEmail").blur(function () {
    
    var checkPhone = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    var username = $(this).val();
    //手机号匹配成功
    
    if(checkPhone.test(username)){
        $("#emailValidMsg").html("");
    }
    //手机号匹配不成功
    else{
        $("#emailValidMsg").html("<b><font style='color:red'>输入不合法</font></b>");
        
    }
});
//邮箱验证
$("#txtNickName").blur(function () {
    
    var checkPhone = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
    var username = $(this).val();
    //手机号匹配成功
    
    if(checkPhone.test(username)){
        $("#nickNameValidMsg").html("");
    }
    //手机号匹配不成功
    else{
        $("#nickNameValidMsg").html("<b><font style='color:red'>输入不合法</font></b>");
        
    }
});
//重复验证密码
$("#txtRepeatPass").blur(function () {
    var checkPhone = /^[a-zA-Z]\w{5,17}$/;
    var username = $(this).val();
    //手机号匹配成功
    
    if(checkPhone.test(username)){
        $("#repeatPassValidMsg").html("");
    }
    //手机号匹配不成功
    else{
        $("#repeatPassValidMsg").html("<b><font style='color:red'>输入不合法</font></b>");
        
    }
});

   2. 获取下拉框所选中的元素

        js: 的实现

   $(function () {
       
       $("#address").change(function () {
           //获取地址的id并将结果查出来
             var opt = $("#address option:selected");
             var value =  opt.val();
             
             window.location.href="${pageContext.request.contextPath}/mybook/shouhuo_findAsignAddress?id="+value;
    }) 
    
})

                          html 代码

      <p>
            选择地址: <select id="address">
                <option value="0">填写新地址</option>
                <c:forEach items="${addressA }" var="address">
                  <option  id="${address.id }" value="${address.id }">${address.xiangaddress }</option>
                </c:forEach>
            </select>
        </p>

                        3.  动态获取 id 和对应文本框的值

    <td >
           <input class="del_num" id="${item.value.book_id}" type="text" size="3" maxlength="34"/>
           <a href="#" onclick="change(${item.value.book_id})">变更</a>
     </td>

                           js 实现:

       <script>
            function change(id){
                
              //正则表达式  验证正整数
              //var rule = /^[0-9]*[1-9][0-9]*$/;
              var rule = /^[1-9]*[1-9][1-9]*$/;
              //输入框的值
              var count = $("#"+id).val();  //获取 指定id 处的文本框的值
              
              if(rule.test(count)){
                  
                  location.href="${path}/mybook/showPage_updateCart?indexId="+id+"&count="+count;
              }else{
                  alert("输入错误");
              }
        </script>      

                         4. table 中 tr  的隐藏

               $(function () {
                /* 点击删除按钮改变状态 */
                $("#id").click(function () {
                   $("#id").css("display","none"); //搞定
                 $("#tr").css("display","block")
//或者
$("#id").hide(); //$("#tr").show() //将这一行数据隐藏 })

                       5 . 更换图片

                  <td rowspan="3">
                        <label id="file_upload1_label" for="file_upload1">
                            <!-- <span id="uploadtip">添加图书封面</span>  -->
                            <img id="uploadimg"  alt="添加图书封面" src="" alt="" width="118px" height="143px" />
                        </label> 
                        <input type="file" name="file" class="" id="file_upload1"    onchange="upload_review()">
                    </td>

                           js 代码:

        function upload_review() {
            var img = document.getElementById("uploadimg");
            var input = document.getElementById("file_upload1");
            var tip = document.getElementById("uploadtip");            

            var file = input.files.item(0);
            var freader = new FileReader();
            freader.readAsDataURL(file);
            freader.onload = function(e) {
                img.src = e.target.result;
                tip.style.display = "none";
            };
        } 
        

                         6. ajax  进行提交

      $(function () {        
            $("#addActivity").submit(function(){
                $(this).ajaxSubmit({
                    url:"${path }/mybook/uploadFile_UploadSingleFile",
                    success:function(data){
                        console.log("========="+data);
                        //alert('保存成功'); 
                        return false;
                    },
                    resetForm:true,
                  //  dataType:'json' 
                })
                return false;
            });  
           
        });

                  7. 判断图片是否改变 

    $(function () {
            //获取图片的路径
             
            //点击提交按钮出发事件
            $("#mytijiao").click(function() {
                //当点击提交按钮判断地址
                var src = $('img').attr('src');//获取src中的地址
                var yuan = "${path }${product.picture }";  //原图片的地址
                if(src===yuan){                            //判断两个地址是否相同
                    //改变input的类型和name属性就可以了
                    $("input[name='file']").attr('name','file1');     //如果相同我后台就不接收这个图片 不定义这个类型的参数  
                    //使用ajax进行交互显示  图片没有改变
                    //获取标签体的类型
                   var msg =    $("input[type='file']").attr('name');   
                    
                  $("#addActivity").submit(function(){
                  $(this).ajaxSubmit({
                    url:"${path }/mybook/uploadFile_UploadSingleFile?judgePage=2",
                    success:function(data){
                        alert("成功")
                        return false;
                    },
                    resetForm:true,
                   /*  dataType:'json' */
                })
                return false;
            });
                                   
                }else{
                    //图片改变就不改变file的类型
                    alert("图片改变");
                   
                     $("#addActivity").submit(function(){
                          $(this).ajaxSubmit({
                            url:"${path }/mybook/uploadFile_UploadSingleFile?judgePage=2",
                            success:function(data){
                                alert("成功")
                                return false;
                            },
                            resetForm:true,
                           /*  dataType:'json' */
                        })
                        return false;
                    });
                    
                    
                    
                }
            })

                      8. el 表达式在 js 中的使用 就要借助数据

$(function () {
    
    var array = new Array();
      <c:forEach items="${firstCategory }" var="category">
       var msg = {"name": " ${category.category_name }"} 
       array.push(msg);
      </c:forEach>
      
     
    var ch = false;
    $("#onetijiao").click(function() {
        
       var value =    $("#fname").val();
        if(value === null || value === ''){
            alert("内容不能为空");
            return false;
        }
       for(i in array){
           if(array[i].name.trim() === value.trim()){
              
               alert("一级类别已存在,请重新输入");
              return false;
           }
       }
    
    });
    /*  $('#jq').css('border','3px solid red'); */

    $('#fnameMsg').css('color','red');
    
    
    
})

                        应用场景二: 使用el表达式进行判断

<script type="text/javascript">
   var second = new Array(); //定义二级类别数组
   <c:forEach items="${sesondCategory }" var="category">
   <c:if test="${category.parent_id !=0}">
    var module = {"name":"${category.category_name }"}
    second.push(module); 
   </c:if>

</c:forEach>

$(function () {
    //判断二级类别
    //判断一级类别
    
    $("#tijiao").click(function () {
        var value = $("#checkName").val();
        if(value === null|| value === ''){
            alert("参数不能为空");
            return false;
        }
        var array = new Array(); //定义一级数组
        
            $("#myselect option").each(function(){ //遍历全部option
                var txt = $(this).text(); //获取option的内容
                if(txt != "全部") //如果不是“全部”
                    array.push(txt); //添加到数组中
        });
        for(i in array){
            if(array[i].trim() === value.trim()){
                alert('一级类别存在,请更换');
                return false;
            }
        }
        
        for(var j=0;j<array.length;j++){
            if(second[j].name === value){
                alert("二级类名已存在请重新取值");
                return false;
            }
        }
        
    });
})

</script>

原文地址:https://www.cnblogs.com/zhulina-917/p/11720677.html