Javascript和jq

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jenniferzgh/article/details/94072777

事件和事件封装

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/ 匹配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次

{n,m} 匹配前一项至少n次,至多m次

{n,m}?  非贪婪模式

{?}     匹配前一项0次或1次

{+}    匹配前一项至少1次

{*}    匹配前一项0次或多次

特殊符号

\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)
					}
				})				
			})         
})

 

展开阅读全文

没有更多推荐了,返回首页