JavaWeb开发中的javascript 合集

1. 删除确认

$(function(){

//给删除的a标签绑定单击事件，用于删除的确认提示操作

$("a.deleteClass").click(function(){

//在事件的响应函数里有一个this对象。

/*

confirm 是确认提示框函数

参数是它的提示内容

它有两个按钮，一个确认，一个是取消

返回true表示点击了确认，返回false表示点击取消(不提交请求)

*/

return confirm("你确定要删除【"+ $(this).parent().parent().find("td:first").text() + "】吗？")

})

})

2.点击按钮后重定向到另一个页面

        //给加入购物车按钮绑定单击事件
        $("button.addToCart").click(function(){
            var bookId = $(this).attr("bookId")
            location.href = "http://localhost:8080/bookShopping/cartServlet?action=addItem&id=" + bookId;
        });

3.给验证码绑定刷新事件

            //给验证码绑定刷新单击事件
                $("#code_img").click(function(){
                    //在事件响应的function函数中有一个this对象，这个this对象，是当前正在响应事件的dom对象
                    //src属性表示验证码img标签的图片路径，它可读可写
                    this.src= "${basePath}kaptcha.jpg?d=" + new Date();//相当于给src重新赋值
                })

4.给注册按钮绑定单击事件

                //给注册按钮绑定单击事件
                $("#sub_btn").click(function(){
                    //验证用户名：必须由字母，数字下划线组成，并且长度为5-12位
                    //1.获取用户名输入框里的内容
                    var usernameText = $("#username").val();
                    //2.创建正则表达式对象
                    var usernamePatt = /^\w{5,12}$/;
                    //3.使用test方法验证
                    if(!usernamePatt.test(usernameText)){
                        //4.提示用户结果
                        $("span.errorMsg").text("用户不合法");
                        return false;
                    }

5.验证密码：必须由字母，数字下划线组成，并且长度为5-12位

                    //验证密码：必须由字母，数字下划线组成，并且长度为5-12位
                    var passwordText = $("#password").val();
                    var passwordPatt = /^\w{5,12}$/;
                    if(!passwordPatt.test(passwordText)){
                        $("span.errorMsg").text("密码不合法");
                        return false;
                    }

6.验证确认密码需要和密码相同

                    //验证确认密码：和密码相同
                    var repwdText = $("#repwd").val();
                    if(repwdText != passwordText){
                        $("span.errorMsg").text("确认密码与密码不一致");
                        return false;
                    }

7.验证邮箱格式

                    //验证邮箱：xxxx@xxx.com
                    var emailText = $("#email").val()
                    var emailPatt = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                    if(! emailPatt.test(emailText)){
                        $("span.errorMsg").text("邮箱格式不合法");
                        return false;
                    }

8.验证验证码不能为空

                    var codeText = $("#code").val()
                    codeText = $.trim(codeText)
                    if(codeText == "" || codeText == null){
                        $("span.errorMsg").text("验证码不能为空");
                        return false;
                    }

 

function queryActivityByConditionForPage(){
        //收集数据
        var name = $("#query-name").val();
        var owner = $("#query-owner").val();
        var startDate = $("#query-startDate").val();
        var endDate = $("#query-endDate").val();
        var pageNo = 1;
        var pageSize = 10;

        //发送请求
        $.ajax({
            url:'workbench/activity/queryActivityByConditionForPage.do',
            data: {
                name:name,
                owner:owner,
                startDate:startDate,
                endDate:endDate,
                pageNo:pageNo,
                pageSize:pageSize
            },
            type:'post',
            dataType: 'json',
            success:function (data){
                //显示总条数
                $("#totalRowsB").text(data.totalRows);
                //显示市场活动的list
                //遍历activityList,拼接所有行数据
                var htmlStr="";
                $.each(data.activityList,function (index,obj){
                    //js
                    htmlStr +="<tr class=\"active\">";
                    htmlStr +="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
                    htmlStr +="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">" + obj.name + "</a></td>";
                    htmlStr +="<td>"+ obj.owner +"</td>";
                    htmlStr +="<td>"+ obj.startDate +"</td>";
                    htmlStr +="<td>"+ obj.endDate +"</td>";
                    htmlStr +="</tr>";
                });
                $("#tBody").html(htmlStr);
            }
        });

 

鼠标拖拽div

  var box01 = document.getElementById("box01");
            box01.onmousedown = function(e){
                
                var ol = e.clientX - box01.offsetLeft;
                var ot = e.clientY - box01.offsetTop;

                document.onmousemove=function(e){
                    var left = e.clientX- ol;
                    var top = e.clientY - ot;

                    box01.style.left=left + "px" ;
                    box01.style.top= top + "px";

                }
                document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }