JS核心参考
* 函数
1.arguments[]
//1、argumnets[]只定义在函数体中,本质是一个局部变量,每个函数中都会自动声明并初始化该变量; //2、callee指代当前正在执行的函数,可以实现递归函数 var k = function (n){ var actual= arguments.length; //实际参数个数 var expected = arguments.callee.length; //期待的参数个数 console.log(arguments[0]); // 4, 3, 2, 1 if(n < 2) return n; else return n * arguments.callee(n-1); } k(4); k.length; //function的length
2.递归
//递归函数 var fn = function(x){ if(x < 2) return 1; else return x* arguments.callee(x-1); };
3.$.load()
//load传入的第一个参数是字符串,则表示是Ajax方法;传入的是function则是事件处理程序注册方法; //后面的#btn1,截取加载好的html中指定选择器的部分; $("div").load("test1.html #btn1"); //第二个参数是字符串,可以追加到url后面,用GET请求 $("div").load("test1.html", "zidpcode=01233"); //test1.html?zidpcode=01233 //第二个参数是对象,会发送POST请求,后面的对象会在请求体中提交 $("div").load("test1.html",{zipcode:0122, units:'F'}); //第三个参数是回调函数,success、error、timeout
4.触发事件
$("#btn1").click(function(e){ // $("#btn2").trigger(e); //触发button2的click事件,与此事件相同的事件 $("#btn2").trigger("mouseover"); //触发button2的mouseover事件 }); $("#btn2").mouseover(function(e){ console.log(e); alert("是由button1触发的"); });
5.注册多事件
//可以一次注册多个事件 $("#btn1").bind({click:function(){ console.log("click事件"); }, mouseleave:function(){ console.log("mouseleave事件"); }} ); $("#btn1").dblclick(function () { //取消事件绑定 $(this).unbind("mouseleave"); })
6.定时器
window.onload = function(){ //这里的function传入的是方法名 window.setTimeout("StartTimer()", 1000) }; function StartTimer(){ $("div").html("timer事件"); }
7.动画
//动画,fadeIn淡入 $("div").fadeIn(500).animate( {width:"+=50"}, {queue:false,duration:1000} ).fadeOut(500); //animate(); 第一个参数必须是对象,属性名必须是CSS属性名,是动画的目标值 //动画支持支数值属性, +=增加 -=减少 //"margin-left" 或者 marginLeft大小写混合 //可以用"show"、“hide”, "toggle" $("div").animate({ height:0, opacity:"-=.1", "margin-left": "+=10px", borderLeft:"toggle", },3000)
8.追加元素
$("body").append("<hr/>append追加"); //在body的最后追加元素 $("h1").prepend("*"); //在h1标签里追加* //另取一行,在<h1>元素的前后,即在h1标签的外面 $("h1").before("before"); $("h1").after("#") $("hr").replaceWith("</br>"); //替换
9.阻止冒泡
var e = $(obj).event || window.event; //得到当前的事件 //阻止默认行为(表单提交) e.preventDefault(); //阻止冒泡, e.stopPropagation(); //不断阻止冒泡,而且还阻止对象的后续响应 e.stopImmediatePropagation(); e.isDefaultPrevented(); e.isPropagationStopped(); e.isImmediatePropagationStopped();
10.页面操作
var k1 = $("h1").position(); $("h1").html(); //获取html内容 $("h1").text(); //获取纯文本内容 $("h1").addClass(function(n){return "dd"+n;}); $("h1").removeClass("dd1"); $("h1").toggleClass("dd2"); //类检测 $("h1").hasClass("dd1"); $("h1").is(".dd1"); //is()比较灵活 $("input").css({backgroundColor:"yellow", color:"red"}); $("div").css({border:"1px solid red", width:"100px", height:"60px"}); $("form").attr("action"); $("a").removeAttr("target"); //移除属性 //一次性设置多个属性 $("img").attr({"src":"icon.gif", width:720, height:360}); //可以传入函数 $("a").attr({target:function(){return "_self"; }})
11. ajax
$.ajax({ type:"POST", url: "test1.html", cache: false, //不使用缓存 async: true, //false同步,默认true异步 success :function(result){ $("body").html(result); },failure:function(){ layer.msg("失败"); } })
12. call和apply
https://blog.csdn.net/ganyingxie123456/article/details/70855586
/* 1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法。 2. 相同点:这两个方法的作用是一样的。 都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。 一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向 3. 不同点:aplly(对象,参数数组);参数数组必须是有效数组或者arguments对象; call(对象,参数);参数间用逗号隔开 */ function add(c, d){ return this.a +this.b + c + d; } var o = {a:1, b:2}; add.apply(o, [3, 4]); //apply传入数组,当前this指向o add.call(o, 3, 4); //call传入参数,当前this指向o
function log(){ //实际调用的对象是console,arguments实参 console.log.apply(console, arguments); } log(23, 33);
13. $.extend(p1, p2)
var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); //settings={validate: true, limit: 5, name: "bar"}
14. location.reload() 页面刷新
window.location.reload(true);
15. enter键查询
//回车键 查询 document.onkeydown = function (e) { e = e || event; var keycode = e.which || e.keyCode; if (keycode == 13 && typeof (callurl) == "function") { callurl(); } };
documnet是window的一个对象,在页面上按回车键可以直接进行查询