JavaScript新手经常遇到的问题（二）

1、Form表单只提交数据而不进行页面跳转的方法

<script type="text/javascript" src="js/jquery/jquery-1.8.0.min.js"></script>  //必须
<script type="text/javascript" src="js/jquery/jquery.form.js"></script> //必须
<script type="text/javascript" src="/js/jquery/jquery.easyui.min.js"></script>  //非必须

<form id="form1"  method="post" onsubmit="return saveReport();">

function saveReport() { 
    $("#form1").ajaxSubmit(function(message) { 
                    // 对于表单提交成功后处理，message为提交页面saveReport.htm的返回内容 
                    alert('成功');
    }); 
    return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转 
}

 

2、ajax获取基本数据类型

Login: function() {
        $.ajax({
        type: "get",
        url: "http://localhost:8081/user/Login",
        dataType: "text",//这是获取String类型的，不写也可以获取基本数据类型
        success: function(data) {
                            
                alert(data);

        }
    }).done(function(data){
        alert(data);
    });
},


//注：后台返回R(json类型)，dataType就必须写json
//注：后台的传送的数据类型是int(基本数据类型)，如果跨域，前台加上dataType:"json"，否则返回的是object       XMLDocument

 

3、如果要用jq来实现DOM对象的话，需要加个下标

1、//("#files")是jquary对象，他实际是一个数组对象;document.getElementById("files")，它是一个DOM对象 ，可进行DOM操作。如果要用jq来实现DOM对象的话，需要加个下标 
//var docObj = document.getElementById("files")，和$("#files")[0]效果一样
var docObj = ("#files")[0];//实现dom对象

2、var dd = $("#preview")[0];//jq来实现DOM对象
    dd.innerHTML = "";//jq来操作

 

4、jQuery对 动态添加 的元素 绑定事件on()的用法

1. $(选择器).click(fn) 当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。

2. $(document).on('click','要选择的元素',function(){}) on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别是动态创建的元素在该选择器选中范围内是能触发回调函数。 也就是说 页面上元素有添加或变化后仍可绑定

 

5、阻止冒泡事件

//点击子元素不会触发父元素
$(".nav-content-right").click(function () {
    //阻止冒泡事件
    event.stopPropagation();
    $(".nav-search-center-input").animate({"width":"416px"},600);
    $(".nav-content-center").css("display","none");
    $(".mselect").css("display","block");
    $(".mselect").animate({"right":"446px"},600);
})

//相对于父元素
//点击除nav-content-right元素以外隐藏下拉
$(document).bind("click",function(){
    $(".nav-content-center").css("display","block");
    $(".nav-search-center-input").animate({"width":"216px"},300);
    $(".mselect").css("display","none");
    $(".mselect").css({"right":"246px"});
});

 

6、闭包

闭包概念：当一个内部函数被调用，就会形成闭包，闭包就是能够读取其他函数内部变量的函数，定义在一个函数内部的函，创建一个闭包环境，让返回的这个子程序抓住i，以便在后续执行时可以保持对这个i的引用。内部函数比外部函数有更长的生命周期；函数可以访问它被创建时所处的上下文环境。

 

//不闭包
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
    divs[i].onclick=function(){
        alert(i);
    }
}
//因为点击事件的函数内部使用外部的变量i一直在变化，当我们指定click事件时并没有保存i的副本，div都是弹出10


//闭包
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
    divs[i].onclick=(function(n){
        return function(){
            alert(n);    
        }
    })(i);
}

//第二种方法(推荐)
for(var i=0; i<$("div").length; i++){
    $("div")[i].onclick=(function(n){
        return function(){
            alert(n);    
        }
    })(i)
}

 

7、阻止移动端浏览器点击图片会预览的几种方法

1.在img元素上添加 οnclick="return false"
<img src="a.png" onclick="return false" />

2.图片用背景图的方式插入
background:url(a.png) norepeat center;

3.使用js事件阻止默认行为的方法，这里需要注意哦！
var img = document.getElementById('banner');
img.addEventListener('click',function(e){
　　e.preventDefault();
});

 

8、不能click里面放click，有叠加效果

//修改
        $("#table").on("click",".update" ,function () {
            var obj=$(this).data("obj");//在查询里获取obj的集合
             var sno=$(this).attr("cid")//获取是sno的值


            $("form").find("input").eq(0).val(obj.cname);
            $("form").find("input").eq(1).val(obj.ccolor);
            $("form").find("input").eq(2).val(obj.cspeed);
            $("form").find("input").eq(3).val(sno);
            $("form").find("input").eq(4).val(obj.cdescribe);


            //不能放在这里，否则buttom有叠加效果，因为有两个click
            // $("#sbu").click(function () {
            //     alert($("form").serialize())
            //     $.ajax({
            //         type: "post",
            //         url: "ServletSelect?action=up",
            //         data: $("form").serialize(),
            //         dataType:"json",
            //         success: function (dataSelect) {        //dataSelect是参数，自定义的
            //             select();
            //         }
            //     })
            // })

        })
        $("#sbu").click(function () {
            alert($("form").serialize())
            $.ajax({
                type: "post",
                url: "ServletSelect?action=up",
                data: $("form").serialize(),
                dataType:"json",
                success: function (dataSelect) {        //dataSelect是参数，自定义的
                    select();
                }
            })
        })

View Code

 

11、ajax

 $.ajax({
                url:"/Hello/zuoYe02",
                type:"POST",
                //发送到服务器的数据
                data:JSON.stringify(emp),
                //发送信息至服务器时内容编码类型。
                contentType : "application/json;charset=UTF-8",
                //预期服务器返回的数据类型；返回的数据类型可以不写，默认接收所有,ajax会自动识别
                dataType:"json",
                success:function (data) {
                    
                }
      })

 

转载于:https://www.cnblogs.com/bushui/p/11486002.html