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

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

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

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

 

 

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

$("#id")是jquary对象，他实际是一个数组对象，他实际是一个数组对象；document.getElementById("id")，它是一个DOM对象 ，可进行DOM操作；

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

var docObj = ("#files")[0];//实现dom对象
docObj .innerHTML = "";//jq来操作

注：var docObj = document.getElementById("files")，和$("#files")[0]效果一样

 

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

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

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

 

 

5、闭包

闭包概念：当一个内部函数被调用，就会形成闭包，闭包就是能够读取其他函数内部变量的函数。

不使用闭包，点击事件的函数内部使用外部的变量i一直在变化，当我们指定click事件时并没有保存i的副本

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

 使用闭包

//闭包
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）CSS方式，图片用背景图的方式插入

background:url(a.png) norepeat center;

（3）使用js事件阻止默认行为的方法，这里需要注意哦！

var img = document.getElementById('banner');
img.addEventListener('click',function(e){
　　e.preventDefault();
});

8、ajax

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

    }
})

9、select获取值

<select id="sel">
    <option value="珠海">珠海</option>//value必须有当前的值
    <option value="云浮">云浮</option>
</select>

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

10、通过jq设置不可点击

$(this).attr("disabled",true);
$(this).css("cursor","not-allowed");

11、点击获取当前元素的下标

点击列表项可获得其相对于同胞元素的 index 位置，元素必须是相邻的

$("li").click(function(){
    alert($(this).index());
});

12、函数的可变参数

function sum(...itme) {
    console.log(itme);//这里输出的数组
}
sum(1,2,3,4,5,6);