JavaScript新手常常遇到的問題（二）

一、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，不然表單會本身再作一次提交操做，而且頁面跳轉 }

 

二、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

 

三、若是要用jq來實現DOM對象的話，須要加個下標

一、//("#files")是jquary對象，他實際是一個數組對象;document.getElementById("files")，它是一個DOM對象 ，可進行DOM操做。若是要用jq來實現DOM對象的話，須要加個下標 
//var docObj = document.getElementById("files")，和$("#files")[0]效果同樣
var docObj = ("#files")[0];//實現dom對象

二、var dd = $("#preview")[0];//jq來實現DOM對象
    dd.innerHTML = "";//jq來操做

 

四、jQuery對 動態添加 的元素 綁定事件on()的用法

1. $(選擇器).click(fn) 當選中的選擇器被點擊時觸發回調函數fn。只針對與頁面已存在的選擇器。

2. $(document).on('click','要選擇的元素',function(){}) on方法包含不少事件，點擊，雙擊等等事件。和$().click()的用法同樣，最大的區別是動態建立的元素在該選擇器選中範圍內是能觸發回調函數。 也就是說 頁面上元素有添加或變化後仍可綁定

 

五、阻止冒泡事件

//點擊子元素不會觸發父元素
$(".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"});
});

 

六、閉包

閉包概念：當一個內部函數被調用，就會造成閉包，閉包就是可以讀取其餘函數內部變量的函數，定義在一個函數內部的函，建立一個閉包環境，讓返回的這個子程序抓住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) }

 

七、阻止移動端瀏覽器點擊圖片會預覽的幾種方法

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(); });

 

八、不能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

 

十一、ajax

 $.ajax({
                url:"/Hello/zuoYe02",
                type:"POST",
                //發送到服務器的數據
                data:JSON.stringify(emp),
                //發送信息至服務器時內容編碼類型。
                contentType : "application/json;charset=UTF-8",
                //預期服務器返回的數據類型；返回的數據類型能夠不寫，默認接收全部,ajax會自動識別
                dataType:"json",
                success:function (data) {
                    
                }
      })

 

十二、select獲取值

<select id="sel">
    <option value="珠海">珠海</option>//value必須有當前的值
    <option value="雲浮">雲浮</option>
</select>

var sel=$('#sel').val();
alert(sel); //輸出：珠海