码迷,mamicode.com
首页 > Web开发 > 详细

JS基础2

时间:2017-09-04 00:02:06      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:返回   function   时间   日期类   元素   return   最小值   font   arc   

一、JS中的事件
)JS中的事件分类
1、鼠标事件
click/dblclick/onmouseover/onmouseout
2、HTML事件
onload/onscroll/onsubmit/onchange/onfocus
3、键盘事件
keydown:   键盘按下时触发
keypress:键盘按下并松开的瞬间触发
keyup:        键盘抬起时触发
 
[注意事项]
① 执行顺序:keydown->keypress->keyup
② 当长按时,会循环执行keydown->keypress
③ 有keydown并不一定有keyup,当事件触发过程中,鼠标将光标移走,
     将导致没有keyup
④ keypress只能捕获键盘上的数字、字母、符号键,不能捕获各种符号键,
     而keydown和keyup可以。
⑤ keypress支持区分大小写,keydown和keyup并不支持。
 
[确定触发的按键]
① 在触发的函数中,传入一个参数e,表示键盘事件;
② 使用e.keyCode,取到按键的Ascll码值,进而确定触发按键;
③ 所有浏览器的兼容写法(一般并不需要):
    var evn = e || event;
     var code = evn.keyCode || evn.which || evn.charCode;
JS中的DOM0事件模型
1、内联模型(行内绑定):直接将函数名作为HTML标签的某个事件属性的属性值;
eg:<button onclick="func()">DOM0内联模型</button>
优点:使用方便。
缺点:违反了w3c关于HTML与JavaScript分离的基本原则;
2、脚本模型(动态绑定):在JS脚本中,取到某个节点,并添加事件属性;
优点:实现了HTML与JavaScript的分离;
缺点:同一个节点只能绑定一个同类型事件。如果绑定多个,最后一个生效。
JS中的DOM2事件模型
1、添加事件绑定方式:
① IE8之前:btn2.attachEvent("onclick",函数);
② 其他浏览器:btn2.addEventListener("click",函数,true/false);
参数三:false(默认):表示事件冒泡   true:表示事件捕获
 
③ 兼容写法:if (btn2.attachEvent) {
         btn2.attachEvent();
            }else{
              btn2.addEventListener();
           }
优点:① 可以给同一节点,添加多个同类型事件;
     ② 提供了可以取消事件绑定的函数。
3、取消DOM2事件绑定:
注意:如果要取消DOM2的事件绑定,那么在绑定事件时,处理函数必须
   要使用有名函数,而不能使用匿名函数。
btn2.removeEventListener("click",func2);
btn2.detachEvent("onclick",func2);
 JS中的事件流
1、事件冒泡:当某DOM元素触发一种事件时,会从当前节点开始,逐级往上触发其祖
                          先节点的同类型事件,知道DOM根节点。
>>> 什么情况下会产生事件冒泡:
① DOM0模型绑定的事件,全部都是冒泡;
② IE8之前,使用attachEvent()绑定的事件,全部都是冒泡;
③ 其他浏览器,使用addEventListener()添加事件,当第三个参数省略或为
    alse时,为事件冒泡;
2、事件捕获:当某DOM元素触发一种事件时,会从文档根节点开始,逐级向下触发其
                       祖先节点的同类型事件,直到该节点自身。
>>> 什么情况下会产生事件捕获:
① 使用addEventListener()添加事件,当第三个参数为true时,为事件捕获;
3、阻止事件冒泡
在IE浏览器中,使用e.cancelBubble()=true;
在其他浏览器中,使用e.stopPropagation();
 
兼容所有浏览器的写法:
   function myParagraphEventHandler(e) {
      e = e || window.event;
      if (e.stopPropagation) {
            e.stopPropagation(); //IE以外
      } else {
            e.cancelBubble = true; //IE
      }
   }
 
4、取消事件默认行为
在IE浏览器中,使用e.returnValue = false;
在其他浏览器中,使用e.preventDefault();
 
兼容所有浏览器的写法:
function eventHandler(e) {
    e = e || window.event;
    // 防止默认行为
    if (e.preventDefault) {
        e.preventDefault(); //IE以外
    } else {
        e.returnValue = false; //IE
    }
}
二、JS中的内置对象
)JS中的数组
1、数组的基本概念?
数组是在内存空间中连续存储的一组有序数据的集合。
元素在数组中的顺序,成为下标。可以使用下标访问数组的每个元素
 
2、如何声明一个数组?
     ① 使用字面量声明var arr = [];
   在JS中,同一数组,可以存储各种数据类型。
  例如:var arr=[1,"绾",true,null,func];
 
    ② 使用new关键字声明var arr = new Array(参数);
   >>> 参数可以是:
  a. 参数省略,表示创建一个空数组;
  b. 参数为一个整数,表示声明一个length为指定长度的数组,
     但是这个length可以随时可变可追加
        c. 参数为逗号分隔的多个数值,表示数组的多个值。
  new Array(1,2,3)==[1,2,3]
 
3、数组中元素的读写/增删
     ① 读写:通过下标访问元素。下标从0开始  arr[1]="hahaha";
     ② 增删:
a. 使用delete关键字,删除数组的某一个值。删除之后,数组的长度不变
     对应位置变为Undefined。 eg:delete arr[1];
b. arr.pop():删除数组的最后一个值。相当于arr.length -= 1;
c. arr.shift():删除数组的第一个值。
d. arr.unshift(值):在数组的第0个位置新增一个值;
e. arr.push(值):在数组的最后一个位置新增一个值;
f. 直接访问数组没达到的下标,可以动态追加。
 arr[100]=1; 中间如果有空余下标,将存入Undefined。
 
4、数组中的其他方法:
join("分隔符号"):将数组用指定分隔符链接为字符串。当参数为空时,
         默认用英文逗号分隔
concat():【原数组不会被改变】将数组,与两个或多个数组的值链接为新数组
oncat连接时,如果有二维数组,则至多能拆一层[]
[1,2].concat([3,4],[5,6])->[1,2,3,4,5,6]
[1,2].concat([3,4,[5,6]])->[1,2,3,4,[5,6]]
 
push() 数组最后增加一个,unshift(值) 数组开头增加一个。-返回数组的长度;
    pop() 数组最后删除一个,shift() 数组开头删除一个。-返回被删除的值
    【上述方法,均会改变原数组】
 
reverse():【原数组会改变】将数组翻转,倒序输出;
 
slice(begin,end):【原数组不会被改变】截取数组中的某一部分,并返回
                   被截取的新数组将
     >>> 传入一个参数,表示开始区间,默认截到数组最后;
     >>> 传入两个参数,表示开始和结束的下标,左闭右开区间(包含begin,不包含end
     >>> 两个参数可以为负数,表示从右边开始数,最后一个值为-1;
 
sort():【原数组被改变】将数组进行升序排列
     >>> 默认情况下,会按照每个元素首字母的ASCII值进行排序;
[3,1,5,12].sort()->[1,12,3,5];
    >>> 可以传入一个比较函数,手动指定排序的函数算法;
   函数将默认接收两个值a,b 如果返回值>0,则证明a>b;
       arr.sort(function(a,b){           
      return a-b;//升序排列
      return b-a;//降序排列
  });                                             
 
indexOf(value,index):返回数组中第一个value值所在的下标,如果没有找到返回-1
    lastIndexOf(value,index):返回数组中最后一个value值所在的下标,如果没有找到
                                                  返回-1;
>>> 如果没有指定index,则表示全数组查找value;
>>> 如果指定了index,则表示从index开始,向后查找value;
 
forEach():专门用于循环遍历数组。接收一个回调函数,回调函数接受两个参数,
第一个参数为数组每一项的值,第二个参数为下标。
【IE8之前,不支持此函数】
   arr.forEach(function(item,index){
  console.log(item);
  console.log(index);
  });
 
map():数组映射。使用方式与forEach()相同。不同的是,map可以有return
返回值,表示将原数组的每个值进行操作后,返回给一个新数组。
【IE8之前,不支持此函数】
       var arr1=arr.map(function(item){
     console.log(item);
     return item+2;
  });
 
5、二维数组与稀疏数组(了解)
二维数组:数组中的值,依然是一个数组形式。
eg:arr = [[1,2,3],[4,5,6]];//相当于两行三列
读取二维数组:arr[行号][列号];
稀疏数组:数组中的索引是不连续的。(length要比数组中实际的元素个数大)
 
6、基本数据类型&引用数据类型:
基本数据类型:赋值时,是将原变量中的值,赋值给另一个变量。赋值完成后,两个
     变量相互独立,修改其中一个的值,另一个不会变化。
 
引用数据类型:赋值时,是将原变量在内存中的地址,赋值给另一个变量。赋值完成
     后,两个变量中存储的是同一个内存地址,访问的是同一份数据,修改其中一个的
     值,另一个也会变化。
 
数值型、字符串、布尔型等变量属于基本数据类型;
     数组,对象属于引用数据类型
 
(二)内置对象
1、Boolean类
    也有两种声明方式:
    可以使用字面量方式声明一个单纯的变量。用typeof检测为Boolean类型;
    也可以使用new Boolean() 声明一个Boolean类型的对象。用typeof检测为Object类型
 
2、Number类
    Number.MAX_VALUE 返回Number类可表示的最大值;
     Number.MIN_VALUE 返回Number类可表示的最小值;
 
 toString():将数值类型转换为字符串类型
 toLocaleString():将数值按照本地格式顺序转换为字符串,一般从右开始,
                     三个一组加逗号分隔;
 toFixed(n):将数字保留n位小数,并转为字符串格式;
 toPrecision(n):将数字格式化为指定长度。n表示不含小数点的位数长度。
                  如果n<原数字长度,则用科学计数法表示;
                  如果n>原数字长度,则小数点后补0;
 valueOf():返回Number对象的基本数字值;
 
3、String 类
3.1、属性str.length 返回字符串的长度,字符数
字符串支持类似数组的下标访问方式:str[0];
 
3.2、方法:
toLowerCase():将字符串所有字符转成小写;
toUpperCase():将字符串所有字符转成大写;
charAt(n):截取数组的第n个字符,相当于str[n];
indexOf("str","index"):查找字串在字符串中出现的位置,如果没有找到返回-1;
     其他同数组的indexOf方法;
lastIndexOf():同数组
substring(begin,end):从字符串中截取子串
>>> 传入一个参数,表示从begin开始,到最后;
>>> 传入两个参数,表示从begin到end的区间,左闭右开;
split("分隔符"):将字符串以指定分隔符分隔,存入数组中。传入空""表示将字符串
  的每个字符分开放入数组;
replace("old","new"):将字符串中的第一个old替换为new;
>>> 第一个参数,可以是普通字符串,也可以是正则表达式;
>>> 如果是普通字符串,则只替换第一个old。
如果是正则表达式,则可以根据正则的写法要求,进行替换。
 
4、Date 日期类
4.1、new Date():返回当前最新时间;
new Date("2017,12,12,12:12:12"):返回指定的时间;
4.2、常用方法
getFullYear():获取4位年份;
getMonth():获取月份0-11;
getDate():获取一个月中的第几天 1-31;
getDay():获取一周中的第几天 0-6,0表示周天
getHours():获取小时
getMinutes():获取分钟
getSeconds():获取秒
            function getTime(){
                var dates=new Date();
                var year=dates.getFullYear();
                var month=dates.getMonth();
                var date1=dates.getDate();
                var day=dates.getDay();
                var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六",]
                var hours=dates.getHours()<10?"0"+dates.getHours():dates.getHours();
                var minutes=dates.getMinutes()<10?"0"+dates.getMinutes():dates.getMinutes();
                var seconds=dates.getSeconds()<10?"0"+dates.getSeconds():dates.getSeconds();
                
                var div1=document.getElementById("div1");
                div1.innerText=year+""+(month+1)+""+date1+""+weeks[day]
                               +hours+":"+minutes+":"+seconds;
            }
            
            setInterval(getTime,1000);
            window.onload=function(){
                getTime();
            }
(三)自定义对象
1、基本概念:
① 对象:对象是拥有一系列无序属性和方法的集合。
② 键值对:对象中的数据,是以键值对的形式存在。对象的每个属性和方法,都对
                           应值得一个键名,以键取值。
③ 属性:描述对象特征的一系列变量,称为属性。【对象中的变量】
④ 方法:描述对象行为的一系列函数,称为方法。【对象中的函数】
 
2、对象的声明:
① 字面量声明:   var obj = {
           key1:value1,
           key2:value2,
           func1:function(){}
            }
>>> 对象中的数据是以键值对形式存储,键与值之间用:分隔。多个键之间用,分隔。
>>> 对象中的键,可以是除了数组/对象以外的任何数据类型。但是,一般我们只用
               普通变量名作为键。
>>> 对象中的值,可以是任何数据类型。包括数组和对象。
② 使用new关键字声明:var obj= new Object();
           obj.key1=value1;
            obj.key2=value2;
           obj.function=function(){}
 
3、对象中属性和方法的读写:
① .运算符:
      对象内部:this.属性   this.方法()
      对象外部:对象名.属性    对象.方法();
② 通过["key"]调用:对象名.["属性名"] 对象名.["方法名"]();
     >>> 如果键中包含特殊字符,则只能使用第②种方式;
  >>> 对象中,直接写变量名,默认为调用全局变量。如果需要调用对象自身的属性或者方法。需要使用对象名.属性,或者this.属性。
     person.age   this.age   都可以,但推荐使用this关键字。
③ 删除对象的属性和方法:delete 对象.属性名/方法名
   delete person.age;
 
ps:不足之处,请多多指教(#^.^#)

JS基础2

标签:返回   function   时间   日期类   元素   return   最小值   font   arc   

原文地址:http://www.cnblogs.com/sin0/p/7471433.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!