JavaScript入门基础

 

1、数组

         一、数组是一个能够存储一组或一系列相关数据的容器

         二、数组元素：是指存储在数组中并赋予惟一索引（下标）的数据段数组元素的数据类型能够不一样

         三、做用：解决大量相关数据的存储和使用问题

         四、定义数组

                   （1）字面量的方式（JSON）

                            [数据，数据...]或{"key":"value","key":"value",...}

                   （2）建立对象的方式（构造函数）

                            var arr = new Array();

                            var arr1 = new Array(5);      数组长度为5

                            var arr2 = [5];                                数组元素5，长度1

                            var arr3 = new Array("-5");  长度为1，去掉引号会出错

                            有且只有一个正整数做为参数时，表示数组长度，若是是负数，则会出错

         五、数组的方法（增删改截拼复排转）

                   （1）增

                                     i.前增

                                               方法：unshift(增长的内容)

                                               做用：在数组首部增长元素

                                               返回值：增长后数组的长度

                                               影响原数组

                                                        若是增长的是另一个数组，会将增长的数组当作一个元素添加到指定数组中

                                     ii.后增

                                               方法：push(增长的内容)

                                               做用：在数组尾部增长元素

                                               返回值：增长后数组的长度

                                               影响原数组

                   （2）删

                   i.前删

                   方法：shift()

                   做用：删除数组首部的元素（一次只能删除一个）

                   返回值：被删除的元素

                   影响原数组

                   ii.后删

                   方法：pop()

                   做用：删除数组尾部的元素（一次只能删除一个）

                   返回值：被删除的元素

                   影响原数组

                   （3）改

                   方法：splice(开始下标，删除的长度，新增元素...)

                   做用：在数组任意位置进行增、删、改元素

                   返回值：被删除的元素

                   影响原数组

                   （4）截

                   方法：slice(开始下标，结束下标)

                   做用：截取指定范围的元素（包含开始位置的元素，不包括结束位置的元素）

                   返回值：被截取到的元素

                   不影响原数组

                   参数支持负数，但不支持第一个参数>第二个参数

                   （5）拼

                   方法：concat(拼接的内容)

                   做用：将参数拼接到指定数组后面，并产生一个新数组

                   将一个数组拼接到指定数组后，会将该数组中的每个元素单独拼接到指定数组后

                   返回值：拼接后的新数组

                   不影响原数组

                   （6）复

                   复制数组：

                   i.slice(0);

                   ii.concat(0);

                   iii.遍历数组

                   （7）排

                   i.       方法：reverse();

                   做用：将数组元素逆序

                   返回值：逆序后的数组

                   影响原数组

         ii.      方法：sort();

                   做用：按编码排序（默认数组中全部的元素按照字符串的形式排序）

                   返回值：排序后的数组

                   影响原数组

                   sort(function(a,b){return a-b;})(从小到大按Number类型排序)

                   sort(function(a,b){return b-a;})(从大到小按Number类型排序)

                   （8）转

                   i.       方法：toString();

                   做用：将数组转换为字符串，转换后字符以逗号隔开

                   返回值：转换后的字符串

                   不影响原数组

                   若是是一个变量，调用toString()方法，参数是几，则将变量转换成几进制的字符串

                   ii.      方法：join(指定分隔符)

                   做用：将数组转为带有指定分隔符的字符串

                   返回值：转换后的字符串

                   不影响原数组

         六、数组遍历

                   for in循环（做用：遍历数组和对象）

                   for(变量 in 集合){

                   语句组;

                            }

         七、冒泡排序

                   从小到大（从上往下：相邻元素比较）

                   4 2 3 5 1

                   2 3 4 1 5

                   2 3 1 4

                   2 1 3

                   1 2

                   var arr = [4,2,3,5,1];

                   for(var i = 0;i<arr.length-1;i++){

                            for(var j = 0;j<arr.length-i;j++){

                                     if(arr[j]>arr[j+1]){

                                               var t = arr[j];

                                               arr[j] = arr[j+1]

                                               arr[j+1] = t;

                                     }

                            }

                   }

         八、选择排序（拿一个元素与它后面的元素比较）

                   从小到大

                   4 2 3 5 1

                   2 3 4 1 5

                   2 3 1 4

                   2 1 3

                   1 2

                  for(var i =0;i<arr.length-1;i++){

                            for(var j = i+1;j<arr.length;j++){

                                     if(arr[i]>arr[j]){

                                               var t = arr[i];

                                               arr[i] = arr[j];

                                               arr[j] = t;

                                     }

                            }

                   }

        

         十、栈：存放简单数据和指向堆地址，每个栈只能存放一个数据

                   堆：堆的地址是存入栈中的，堆中能够存放复杂数据类型，多个数据

 

 

1、ES5

         一、严格模式 "use strict"

                   严格模式下，函数做用域中局部变量不会变量提高

                   建议在函数做用于内部使用，且放在函数开头部分

         二、ES5新增的数组方法

                   （1）indexOf:查找指定元素在数组中首次出现的下标位置，若是没有找到，返回-1

                                     indexOf(查找的元素，start)

                   （2）forEach(function(value,index,array){})

                                     做用：遍历数组

                                     value：表示数组中的每个元素

                                     index：表示数组的下标

                                     array：表示数组自己

                   （3）map:遍历数组，并返回结果

                   （4）reduce：归并

                                     reduce(function(pre,next,index,array){})

                                               pre：表示前一个元素

                                               next：表示下一个元素

                                               index：表示下标

                                               array：表示数组自己

                                               将pre与next运算的结果再次赋值给pre

                   （5）fiter过滤

                                     做用：经过遍历数组，设置过滤事件，返回过滤后的结果

2、字符串

         一、声明字符串

                   （1）字面量方式：var str = "hello"

                   （2）构造函数的方式：var str = new String("hello")

         二、字符串的属性：length：表示字符串的长度

         三、字符串的方法（查、替、截、转）

                   （1）查

                            i.       charAt(下标)：返回指定下标位置的元素

                            ii.      indexOf(查找的字符，start)

                            iii.     lastIndexOf(查找的字符，start):返回一个元素最后出现的位置

                            iV.              charCodeAt(下标)：返回指定下标位置字符的编码值

                   （2）替

                                      replace(被替换的内容，替换的内容)一次只能替换一个

                   （3）截

                            i.       substring(start,end) 参数位置大小随意，但不支持负数

                            ii.      substr(start,length)从指定位置开始截取固定长度的字符串

                            iii.     slice(start,end)参数大小不容许互换，参数支持负数

                   （4）转

                            i.       split(切割符,切割长度)：将字符串转为数组

                            ii.      toUpperCase()：将小写字母转为大写字母

                            iii.     toLowerCase()：将大写字母转为小写

         四、ASCII码

                   （1）汉字范围

                                     4E00(19968)

                                     9FA5(40869)

                                     共20902个

                   （2）charCodeAt():根据下表获取指定元素的编码值

                             String.fromCharCode():根据编码值返回字符

                             大写字母65~90

                             小写字母97~122

 

1、Math

         属性：Math.PI

         方法：

         一、Math.abs():求绝对值

         二、求近似值

                   （1）Math.round():四舍五入（若是是负数，>.5进1，<=.5舍去）

                   （2）Math.floor():向上取整

                   （3）Math.ceil():向下取整

         三、求最值

                   （1）Math.max():求最大值（不支持传递一个数组做为参数）

                   （2）Math.min():求最小值

         四、随机数

                   Math.random():表示0~1之间的随机数[0,1)

                   Math.floor(Math.random() * (n+1));   0~n的整数

                   Math.floor(Math.random() * (max-min+1)+min)

                   取从min到max之间的随机整数

         五、Math.pow(m,n)  m的n次方

         六、Math.sqrt(n):求平方根

         七、日期对象Date

                   建立日期对象

                            var date = new Date();

                   方法：

                   （1）getFullYear():获取年份

                            getYear():获取年份，两千年以前，只显示年份的后两位

                   （2）getMonth():获取月份（月份从0~11表示1月至12月）

                   （3）getDate():获取日期

                   （4）getDay():获取星期

                   （5）getHour():获取小时

                   （6）getMinutes():获取分钟

                   （7）getSeconds():获取秒

                   （8）getMillseconds():获取毫秒

                   （9）getTime();获取时间戳

                                     时间戳：从1970年1月1日0时整到如今的毫秒数

                   扩展：

                   （1）setFullYear():设置年份

                   （2）setMonth():设置月份

                   （3）setDate():设置日

                   （4）setHours():设置小时

                   （5）setMinutes():设置分钟

                   （6）setSeconds():设置秒

                   （7）setMillseconds():设置毫秒

                   toLocaleString()：显示本地日期格式的字符串                  2017/9/8 下午9:02:56

                   toLocaleDateString():显示本地日期                2017/9/8

                   toLocaleTimeString()：显示本地时间              下午9:02:56

 

1、BOM

         一、BOM（Browser object model） 浏览器对象模型

                   BOM提供了独立于内容而与浏览器窗口进行交互的对象

                   BOM主要用于管理窗口与窗口之间的通信，核心对象是window

         二、window子对象

                   document/frames/history/loction/navigator/screen

         三、window的内置对象（location/history/navigator）

                   (1)location对象

                            i.       window.location = "http://www.baidu.com";

                                               location对象包含有关当前URL(统一资源定位符)的信息，是window对象的一部分，可经过window.location属性来访问

                                               href属性:是一个可读可写的字符串，可设置或返回当前显示的文档的完整URL

                                                        location.href = "http://www.baidu.com"

                            ii.      方法：

                                     reload():用于从新加载当前文档（刷新）

                                     语法：location.reload();

                                               location.reload(true);:刷新页面，不使用缓存

                   （2）history对象

                            i.                 history.back():载入历史列表中的前一个网址，至关于按下“后退”

                            ii.                history.forward():载入后一个网址，至关于“前进”

                            iii.     history.go():打开历史列表中的一个网址，括号里有正数负数

                                               history.go(0):刷新页面

                   （3）navigator对象

                                     navigator.userAgent:用户代理信息。经过该属性能够获取浏览器及操做系统信息

         四、定时器

                   （1）setInterval（函数或表达式，毫秒数）   间歇性计时器

                            clearInterval():清除间歇性计时器

                   (2)setTimeout(函数或表达式，毫秒数)            一次性定时器

                            做用：在指定毫秒数后调用函数或执行表达式

                            clearTimeout():清除一次性计时器

         五、window.onscroll事件

                   兼容：var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

2、DOM

         一、DOM（Document Object Mode）文档对象模型

                   做用：经过JavaScript操做DOM，能够重构整个HTML文档，改变页面上的项目

         二、DOM的基本操做（查询，修改，建立，删除）

                   （1）查询

                            getElementById("id名")：获取指定ID元素的节点，找不到返回null

                            getElementsByTagName("标签名")：伪数组

                            getElementsByName("name名")：获取相同名称的节点列表：伪数组

                            getElementsByClassName("class名")：获取相同class属性的节点列表（IE9如下不兼容）

                            document.documentElement:获取html的方法

                            document.body:获取body

                            querySelector("选择器")：（IE8如下不兼容）

                            querySelectorAll（“选择器”）：经过选择器获取一组元素，返回一个集合

                   （2）建立

                            creatElement("标签名")：建立一个元素节点

                            createTextNode("文本内容")：建立一个文本节点

                   （3）追加/插入节点

                            父对象.appendChild("节点")：向指定父元素的子节点列表末尾追加新的节点

                            父对象.insertBefore("插入的节点","指定的子节点")：将节点添加到父对象中的指定子节点前面

                   （4）修改

                            父节点.replace(newNode,oldNode):用新节点替换某个子节点

                   （5）删除

                            父节点.removeChild("子节点")

                   （6）克隆

                            节点.cloneNode():克隆节点，复制节点（只克隆节点，不克隆内容）

         三、DOM元素类型

                   节点属性

                                               元素                    属性                    文本

                   nodeName                   元素名称    属性名称    #text

                   nodeType             1              2                3

                   nodeValue          null             属性值                 文本内容（纯文本）

事件捕获和事件冒泡的区别？

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

就是由子节点向父节点依次传递事件的过程。

 

（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，而后到最精确(也能够在窗口级别捕获事件，不过必须由开发人员特别指定)。

和冒泡相反的过程，由父元素向子元素依次传递事件的过程。

 

 

什么叫会话跟踪技术，并说明cookie的特色？

在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态叫作会话跟踪。就是跟踪一个会话，并保留会话。正常状况下，当客户端向服务器端发送请求并获得服务器端响应后，此次会话关闭，客户端不会把请求获得的信息存储，那么下次再须要相同信息时，还要向服务器端再次请求，这样很浪费时间，因此须要会话跟踪技术，将请求到的信息保存到客户端本地，以便下次使用。这就是会话跟踪技术。

会话跟踪技术就是cookie

特色:：

(一)   只能使用文本文件

(二)   文件有大小限制（4KB）

(三)   数量限制。通常浏览器，限制大概在50条左右

(四)   读取有域名限制。不可跨域读取，只能由来自写入cookie的同一域名的网页可进行读取。

(五)   时效限制：每一个cookie都有时效，最短的有效期是，会话级别：就是当浏览器关闭，那么cookie当即销毁

 

一、设置或修改标签中的属性

         对象.属性 访问标签中支持的全部属性

         class属性：对象.className        class是保留字

二、自定义属性

         （1）getAttribute("属性名")获取属性值

         （2）getAttribute("属性名","属性值")设置或修改属性值

         （3）class兼容

                   对象.getAttribute("class") == null ? 对象.getAttribute("className") : 对象.getAttribute("class")

         (4)removeAttribute("属性名")：删除属性

三、    outHTML：获取指定标签及标签的左右内容

         innerText：获取或修改指定标签中的文本内容（纯文本）

         innerHTML：获取或修改制定标签中的文本内容（超文本）（解析标签）

四、childNodes属性:获取到指定节点中的全部子节点（伪数组）返回元素节点和文本节点，

六、children:获取制定对象中的全部元素节点（伪数组）忽略空白节点

         attributes:获取属性节点

七、高级选取

         层次节点结构：父节点与子节点、兄弟节点

         （1）firstChild:获取当前元素节点下的第一个子节点，至关于childNodes[0]

                            不会忽略空白文本节点

         （2）lastChild：获取当前元素节点的最后一个子节点

         （3）parentNode：返回该节点的父节点

         （4）previousSibling：返回该节点的前一个同级节点（兄弟节点），若是没有，返回           null

         （5）nextSibling：返回该节点的后一个同级元素

 

九、obj.offsetWidth：自身的宽度，单位像素

十、obj.offsetLeft:距离左方或上层对象的位置，单位像素

 

一、事件对象：当一个对象触发了所绑定的事件，所发生的一切详细信息都将保存在一个临时 的地方，这个地方叫作事件对象

二、获取时间对象

         兼容：

                   （1）IE及谷歌早期版本：利用内置的全局对象获取 window.event

                   （2）标准：经过给时间触发函数传递的第一个参数

                            var e = e || window.event

三、event.button属性

         （1）标准：鼠标左键                              0

                               鼠标中键（滚轮）            1

                               鼠标右键                                    2

         （2）IE早期版本

                                     左键           1

                                     右键           2

                                     滚轮           4

        

四、事件对象的属性

         （1）clientX/clientY

                   鼠标在页面上相对于浏览器可视区的位置；

         （2）offsetX/oddsetY

                   鼠标点击位置相对于点击（鼠标所在对象区域）的坐标位置

         （3）pageX/pageY

                   鼠标在页面上的位置

         （4）document.documentElement.clientWidth:可视宽度

         （5）screenX/screenY

                   鼠标点击位置到windows屏幕窗口的位置

五、键盘事件

         （1）keyup/keydown :获取到整个键盘的编码值（字母返回大写的编码值）

         （2）keypress：只能获取到键盘中字符的编码值，且火狐只能获取编码0，其余浏览器能够获取到字母的大小写编码

         属性：

                   兼容：var k = evt.keyCode || evt.charCode || evt.which

六、快捷键，组合键

         ctrlKey/shiftKey/altKey

七、事件捕获：（IE和Opera浏览器中，不支持捕获）

                   由祖先节点向子节点层层传递，传递到最底层的子节点，这个过程，称为事件捕获

   事件冒泡：由子节点向父节点，一直到祖先节点传递事件，这个过程称为事件冒泡

八、阻止事件冒泡

         （1）标准：Event.stopPropagatior();

         （2）IE：Event.cancelBubble = true;

         兼容：Event.stopPropagatior() ? Event.stopPropagatior() : Event.cancelBubble=true;

day12

1、浏览器默认行为

         一、右键菜单        oncontextmenu

         二、超连接

         三、拖拽      ondragstart       

2、阻止浏览器默认行为

         一、超连接

                   兼容：

                   evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;

         二、右键菜单：return false；

         三、拖拽：return false；

3、事件监听

         添加事件监听：

                   （1）标准           对象.addEventListener("事件名click"，执行函数，布尔值)

                            true：表示捕获

                            false：表示冒泡（默认值）

                   （2）IE     对象.attachEvent("事件驱动onclick"，执行函数)

                   兼容：

                   function listener(obj.evt,evtname,fn,boo){

                            obj.addEventLister ? obj.addEventListener(evt,fn,boo):obj.attachEvent(eventname,fn);

                   }

         移除事件监听：

                   （1）标准           对象.removeEventListener("事件名",移除函数，false)；

                   （2）IE     detachEvent("事件驱动"，移除事件函数)

                   兼容：

                   function removelistener(obj.evt,evtname,fn,boo){

                            obj.removeEventListener ? obj.removeEventListener(evt,fn,boo):obj.detachEvent(eventname,fn);

                   }

4、事件源

         （1）标准：event.target

         （2）IE：event.srcElement

         兼容：

                   var target = event.target || event.srcElement

5、JSON

         一、JSON是一种基于文本的数据交换方式，或者叫作数据描述格式

         二、JSON的优势

                   （1）基于纯文本，跨平台传递极其简单

                   （2）JS原生支持，后台语言几乎所有支持

                   （3）轻量级数据格式，占用字符数量极少，特别适合互联网传递

                   （4）可读性较强

                   （5）容易编写和解读

6、构造函数

         一、使用JS语法

                   function person(name,sex){

                            this.name=name;

                            this.sex = sex;

                   }

                   var p = new person("张三","男")

                   alert（p.name）;

         二、使用JSON语法建立对象

                   var obj = {"name:":"张三","sex:":"男"};

                   alert(obj.name);

 

兼容总结

             

1、 className兼容

 

function byClassName (className){

         if(document.getElementsByClassName){

                   return document.getElementsByClassName(className);

         }else{

                   var arr = [];

                   var ele = document.getElementsByTanName("*");

                   for(var i = 0; i < ele.length; i++){

                            if(ele[i].className == className){

                                     arr.push(ele[i]);

                            }

                   }

                   return arr;

         }

}

 

2、 滚动高度兼容

         document.documentElement.scrollTop ? document.documentElement.scrollTop :document.body.scrollTop;

 

3、 滚动宽度兼容

         document.documentElement.scrollLeft ? document.documentElement.scrollLeft :document.body.scrollLeft;

 

4、 class的兼容

         function getAttr (obj){

                   return obj.getAttribute("class") == null ? obj.getAttribute("className") : obj.getAttribute("class");

         }

 

6、获取事件Event兼容

         var oBtn = document.getElemenetById("btn");

         oBtn.onclick = function(event){

                   event = event || window.event;

         }

 

 

8、onkeypress的兼容

         document.onkeypress = function (e){

                   var e = e || window.event;

                   var code = e.keyCode || e.which || e.charCode;

                            alert(code);

         }

 

9、阻止事件冒泡

         function stop (e){

                   var e = e || window.event;

                   return e.stopPropagtion ? e.stopPropagtion() : e.cancelBubble = true;

         }

 

10、阻止超连接的默认行为

         oA.onclick = function (e){

                   var e = e || window.event;

                   e.preventDefault ? e.preventDefault() : e.returnValue = false;

         }

十3、右键默认行为

         document.oncontextmenu = function (e){

                   e = e || window.event;

                   return false;

         }

 

十4、事件源委托兼容

         var oUl = document.getElementById("ul");

         oUl.onclick = function (evt){

                   evt = evt || window.event;

                   var target = evt.target || evt.srcElement;

                   alert(target.innerText);

         }

 

十5、拖拽图片的默认行为

         document.ondragstart = function(){

                   return false;

         }