Javascript和jq

事件和事件封装

a.鼠标事件

click：单击，dblclick：双击，mousedown：鼠标按下，mouseup：鼠标抬起，mouseover：鼠标悬浮，mouseout：鼠标离开，mousemove：鼠标移动，mouseout：鼠标移出，mouseenter：鼠标进入，mouseleave：鼠标离开，onreset：重置按钮被点击，

b.键盘事件

keydown：按键按下，keyup：按键抬起，keypress：按键按下抬起，

c.html事件

onload：文档加载完成，select：被选中的时候，change：内容被改变，onfocus：得到光标，resize：窗口尺寸变化，scroll：滚动条移动，onabort：图像加载被中断，onblur:失去焦点，onchange：改变域的内容，onerror：加载文档或图像时出现错误，onunload：用户退出页面

事件类型	浏览器	方法	兼容性处理
添加事件	DOM2	addEventListener	addHandler: function (element, type, handler) {           if (element.addEventListener) {                element.addEventListener(type, handler, false);           } else if (element.attachEvent) {                element.attachEvent('on' + type, handler)           } else {                element['on' + type] = handler           }      }
	IE/Opera	attachEvent
	DOM0	onclick
删除事件	DOM2	removeEventListener	removeHandler: function (element, type, handler) {           if (element.removeEventListener) {                element.removeEventListener(type, handler, false);           } else if (element.detachEvent) {                element.detachEvent('on' + type, handler);           } else {                element['on' + type] = null;           }      }
	IE/Opera	detachEvent
	DOM0	onclick
捕获对象	Firefox	event	getEvent: function (event) {           return event ? event : window.event;      },
	IE/Opera	window.event
捕获事件目标	Firefox	target	getTarget: function () {           return event.target || event.srcElement;      }
	IE/Opera	srcElement
type属性		event.type	getType: function (event) {           return event.type      }
value属性		event.value	getValue: function (event) {           return event.value      }
阻止事件冒泡	非IE	stopPropagation	stopPropagation: function (event) {           if (event.stopPropagation) {                event.stopPropagation();           } else {                event.cancelBubble = true;           }      }
	IE/Chrome/Opera	cancelBubble
阻止默认行为		preventDefault	preventDefault: function (event) {           if (event.preventDefault) {                event.preventDefault();           } else {                event.returnValue = false;           }      }
		returnValue
获取事件相关节点		relatedTarget	getRelatedTarget: function (event) {           if (event.relatedTarget) {                return event.relatedTarget;           } else if (event.toElement) {                return event.toElement;           } else if (event.fromElement) {                return event.fromElement;           } else {                return null;           }      }
		toElement
		fromElement
获取键盘码		charCode	getCharCode: function (event) {           if (typeof event.charCode == "number") {                return event.charCode;           } else {                return event.keyCode;           }      }
		keyCode
获取鼠标按键		MouseEvents	getButton: function (event) {           if (document.implementation.hasFeature("MouseEvents", "2.0")) {                return event.button;           } else {                switch (event.button) {                     case 0: //没有按下按钮                     case 1: //按下主鼠标按钮                     case 3: //同时按下主次鼠标按钮                     case 4: //按下鼠标中间按钮                          return 1; //次                     case 5: //同时按下主中间                     case 6: //同时按下次中间                          return 2; //中间                     case 7: //同时按下三个                          return 0; //主                     case 2: //按下了次鼠标按钮                                                                  }           }      }
鼠标滚轮事件		wheelDelta	getWheelDelta: function (event) {           if (event.wheelDelta) {                return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);           } else {                return -event.detail * 40;           }      }
获取剪切版数据		event.clipboardData	getClipboardText: function (event) {           var clipboardData = (event.clipboardData || window.clipboardData);           return clipboardData.getData("text");      }
		window.clipboardData
为剪切板设置数据		event.clipboardData.setData	setClipboardText: function (event, value) {           if (event.clipboardData) {                event.clipboardData.setData("text/plain", value);           } else if (window.clipboardData) {                window.clipboardData.setData("text", value);           }      }
		window.clipboardData.setData

数据类型，类型检测，类型转换，运算符

数据类型	基本数据类型： Number，String，Boolean，null，undefine			Object对象类型： Function，Array，Date...
	分类	例子		解释
隐式转换	+-运算符	“37”-7  //30(Number) "37"+7  //377(String) num-0 //转化为数字 num+0 //转化为字符串		减号运算符会将字符串和数字做减法运算; 加号会将字符串和数字做字符串拼接;
	==运算符	Number == String  0 == false null == undefine Object ==Number | String new Object == new Object [1,2] == [1,2]		字符串和数字比较，字符串会转化为数字； Boolean和其他基本类型，true转化为Number1，false转化为Number0； Object和基本类型比较，Object会转化为基本类型
	===运算符	null ===null NaN≠NaN new Object ≠ new Object		===可以用于null类型检测
类型转换	+-	num+' ' //转化为数字 num-0 //转化为字符串
	Boolean	Boolean(undefine) //false Boolean(NaN) //false Boolean(null) //false Boolean(' ') //false Boolean(0) //false Boolean([]) //true		除了Boolean(undefine | NaN | null | ' ' |0)是false之外全是true
	Number	Number(false) //0 Number([ ]) //0 Number({ }) //NaN
类型检测	方法	适用场合	不适用	例子
	typeof	基本类型检测 函数检测	不适用于function以外的对象类型检测； 遇到null失效	typeof 100     // "number" typeof NaN  // "number" typeof  '123'   // "string"   typeof true     // "boolean" typeof undefine // "undefined" typeof null  // "object" typeof  new object() // "object" typeof [1,2] // "object" typeof Symbol  //Symbol
	Object.prototype.toString	内置对象类型检测 基本类型检测	IE7/8中null和undefine检测	Object.prototype.toString.appply([ ]) // [object Array]; Object.prototype.toString.apply(function(){ })  // [object Function] Object.prototype.toString.apply(null)  // [object null] Object.prototype.toString.apply(undifined)  // [object undefined]
	instanceof	自定义对象检测是否继承原形链上xxx 原生对象类型检测 （涉及原形链上继承）	不同window和iframe间不能用instanceof	[1,2] instanceof Array === ture new Object() instanceof Array ===false   function Person(){}; function Student(){}; Student.prototype = new Person(); var one=new Person();  one instanceof  Person; //ture one instanceof  Student; //false

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Ajax

<script>
			document.getElementById("search").onclick=function(){
				var request=new XMLHttpRequest(); // XMLHttpRequest()对象用于在后台与服务器交换数据,这个对象使得浏览器可以发出HTTP请求与接收HTTP响应
				request.open("GET","service.php?number="+document.getElementById("keyword").value);//规定请求的类型、URL 以及是否异步处理请求。
			    request.send(); // 将请求发送到服务器。
				request.onreadystatechange=function(){
					if(request.readystate===4){
						if(request.status===200){
					document.getElementById("searchResult").innerHTML=request.responseText;//使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性获得来自服务器的响应
						}
						else{alert("发生错误："+request.status)}
					}
				}

					
			}
</script>

数组

创建	方法	例子	解释
	字面量	var arr = ["1",2] var arr = [{a:1},{b:2}] var arr = [[1,2],[3,4]] var arr = [1,,3] var arr =[,,] //length=2	数组的长度为0到2^23-1
	new Array	var arr =new Array() var arr = new Array(100) //length=100 var arr = new Array(1,2) //[1,2]	new Array方法创建数组
方法	增（添加）	arr.unshift(0);	头部添加
		arr.push(3);	尾部添加(参数不能是数组)
		arr[arr.length]=4;	尾部添加
		arr.splice();	在指定位置添加
	删	delete arr[2];	删除指定变为undefine
		arr.shift();	移除头部元素
		arr.length-=1;	移除尾部元素
		arr.pop();	移除尾部元素
		arr.splice();	删除指定几个元素(或删+增)
		arr.indexOf(2,-1);
	转化 join()	arr.join();	数组转化为字符串并指定分隔符(默认为,)
	排序 reverse() sort()	arr.reverse();//将数组逆序
		arr.sort();	数组元素为字母及字符串升序排序
		arr.sort(function(a,b){return a-b;});	数组元素为数字的升序排序
		arr.sort(function(a,b){return b-a;});	数组元素为对象的升序排序
		arr.sort(function(a,b){return a.age-b.age;});	数组元素为数字的降序排序
	合并 concat()	arr.concat([[1,2],3])	数组合并(原数组未被改变，数组拉平一次)
	遍历 forEach() for...of for...in	arr.forEach(function(x,index,a){     console.log(x+'|'+index+'|'+a===arr)  });	forEach获取键值对
		for(v of arr){//}	for of获取键值
		for(v in arr){//}	for in获取键名
	映射 map()	arr.map(function(x){     return x+10   });	映射到每一个元素并返回(原数组不会改变)
	过滤 filter()	arr.filter(function(x,index){     return index%3===0||x>8 //返回符合条件的元素 });
	拼接(删除,插入,替换) aplice()	arr.splice(1,2) //从index为1开始删除2个元素并拼接剩下的元素 arr.splice(1,1,'a','b') //删除>插入>拼接
	判断 every() some()	arr.every(function(x){     return x>5 }) arr.some(function(x){     return x===5 })	判断是否有元素大于5,返回ture/false    判断是否有元素等于5,返回ture/false
	检索 indexOf() lastIndexOf()	arr.indexOf(1,2);     arr.lastIndexOf(1,2)	从索引值为2开始查找返回第一个值为1的元素的索引，没有匹配值则返回-1 从索引值为2开始查找返回最后一个值为1的元素的索引
	截取 slice()	arr.slice(2,-1);	返回指定首尾数组片段(原数组不修改)
	判断是否为数组	Array.isArray(arr); arr indexOf Array; ({}).toString.apply(arr)===[Object Array]; arr.constructor===Array;

 

函数

函数类型	类型	创建	例子	说明
	声明 （不可匿名）	function foo(){};	foo();  function foo(){};	函数声明会被前置，故可以先调用再声明，不允许匿名，不能立即调用，可以通过函数名调用
	表达式	return function(){};		函数作为返回值
		var add = function(){};	var add = function(){}; var num = add();	匿名式函数表达式
		var add = function foo(){};	var add = function foo(){foo()} //递归调用	命名式函数表达式
		(function(){})();	立即调用	立即调用函数表达式
	构造函数 （匿名）	Function()()	立即调用 1.Function('var a="1";alert(a);')() // "1" alert(a)  //undefine 2.var a = "1" //全局变量 (function(){     var b = "2"; //Function的外层函数对象     Function('console.log(a,b)')  //"1",undefine })()	函数体内创建的变量是局部变量，例子1中的a是局部变量     拿得到全局对象，拿不到外层函数对象
		var add = new Function()	var add = new Function('x','y','console.log(x+y)') //创建 add()  //调用	new可省略
this	类型	指向	例子
	全局this	this => window this.document => document this.a => 全局a	console.log(this===window) //true console.log(this.document===document) //true this.a =37 console.log(this.a) //37 console.log(window.a) //37	document,window,和全局变量
	一般函数的this	非严格模式下 this => window (浏览器) this => global (node)	function foo(){ return this } foo()===window //true	指向全局对象
		严格模式下 this => undefine	function foo(){ 'use strict' return this } foo()===undefine //true	指向undefine
	构造函数的原形链上this	this =>原形	function father(){this.a = "1"}; child的原形 var child = new foo(); //构造函数 console.log(child.a) //"1"	this指向father
	函数作为 对象的方法	this => Object	var obj = { a:1; foo:function(){return this.a}  } console.log(obj.foo()) //1	指向对象
	对象原形链上this	this => 调用的对象	var father = {a:2,foo:function(){return this.a}}; //child原形链上对象 var child = Object.create(father); //child对象 child.a = 1; console.log(child.foo()) //1	child继承father，father在child的原形链上，child原形链上this指向child
	对象的 get/set方法上的this	this => Object	function foo2(){return Math.atan2(this.a,this.b)} var obj = { a:1; b:2 get foo(){return Math.atan2(this.a,this.b)}  } Object.defineProperty(obj,'foo2',{get:foo2,enumerable:true,configuration:true}) console.log(obj.foo)	指向调用get/set方法的对象 foo和foo2都是obj对象上的方法，方法内this指向obj对象
	call/apply/	this =>被绑定的对象	function add(){return this.a}; var obj = {a:1}; add.call(object); //1
闭包
oop

 

正则表达式

按照某种规则去匹配字符串

	例子	解释
创建	var re=new RegExp(‘a’,’i’) var re=/a/i	修饰符 i：不区分大小写 g：全局匹配 m：多行匹配
	var re=/*/i	匹配所有
字符类	/[abc]/g 匹配a/b/c	\w       匹配任何ASCII单字符，即A-Z,a-z,0-9 \W      匹配任何ASCII单字符以外的字符    \d        匹配任何数字0-9 \D        匹配任何数字以外字符 \s         匹配任何Unicode空白符 \S        匹配任何Unicode空白符以外字符 []       匹配方括号中所有字符 [^]      匹配除方括号中所有字符
特殊符号	var re=/\*/   匹配星号 var re=/ａ｜ｂ／ 匹配a或b	特殊符号需要转义 特殊符号有 !  $　 *　＋　＝　． ？　／　｜　＼　（）［］　｛｝
特殊字符	\t 水平制表符 \v 垂直制表符 \n 换行符 \r 回车符 \f 换页符 \0 空字符 \cX 与x对应的控制字符(ctrl+x) \cN (ctrl+n)	特殊字符有 0　t　n　v　f　r　xnn　uxxx　cX
范围类	[a-z]	表示a-z所有字母
	\x00-xff	表示所有单字节
	\bis\b	表示’is’左右都是空格才被选中
	\u4e00-\u9fa5	表示所有中文字符
重复类	/a{5}/   /a{5,}/ /a{5,8}/ /a{?}/ /a{+}/ /a{*}/	{n} 匹配前一项ｎ次 {n,} 匹配前一项至少n次 {n,m} 匹配前一项至少ｎ次，至多ｍ次 {n,m}?  非贪婪模式 {?}     匹配前一项０次或１次 {+}    匹配前一项至少１次 {*}    匹配前一项０次或多次
特殊符号	\bhello\b  匹配单词hello	|    或者 $    匹配字符串的结尾 ^    匹配字符串的开头 \b   匹配一个单词的边界 \B   匹配一个非单词边界
方法		exec()    返回一个数组 test()           返回一个布尔值 toSource()   返回一个RegExp对象 toString()     将RegExp转化为字符串 replace()      替换
实例	http://xxx.jpg var re=/http:(\/\/.+\.jpg)	匹配http://开头.jpg结尾的字符串
	2006/02/03 \^/d{4}[/-]/d{2}[/-]/d{2}$\	匹配日期 4数字(开头)一斜杠，2数字一斜杠，2数字一斜杠(结尾)
	"He is a boy,Is he".replace(/\bis\b/ig,0); //"He 0 a boy, Is he"	文本替换

jq

Ajax

$(document).ready(function(){
			$('#search').click(function(){
				$.ajax({
					type:"GET",
					url:"service.php?number="+$('#keyword').val(),
					dataType:'json',
					success:function(data){
						if(data.success){
							$('#searchResult').html(data.msg);
						}
						else{
							$('#searchResult').html('出现错误'+data.msg);
						}
					},
					error:function(jqXHR){
						alert('发生错误：'+jqXHR.status)
					}
				})				
			})         
})