您的位置：首页 > Web前端 > JavaScript

javaScript学习基础知识汇总

2016-01-04 09:27 806 查看

•一：学习要求
•熟悉html，div+css
•肯做练习
•好了，没有第三条，不要求会html5、css3，不要求数学好英语棒，不要求你有程序基础，不要求你逻辑性很好，认真听讲，多做练习，足以。
•二：开发工具
•能写代码就行，没有要求，按自己习惯来。

•一个简单的JS过程

•元素①，当点击它/ 移上去/… 的时候②，做出一些反应/执行一条命令③

①：JS如何获取元素

JS里面获取元素的方法有很多，我们先了解一种最简单常见的获取ID：

document.getElementById(' '); //注意大小写

②：JS的事件

通过鼠标、键盘、页面变化等都会产生事件，

比如：onclick ondblclick onmouseover onmousedown onmouseup

onkeypress onkeydown onkeyup onresize onload ……

③：函数--（反应/命令）

function 名字(){ }; // 比如：function aaa(){ };

函数是不会主动执行的，执行函数的方法有很多种…

直接调用 aaa();

事件调用元素.事件 = aaa;

•定义变量 var
var btn = document.getElementById('btn');

•script标签放置的位置
window.onload的使用

•

• JS对HTML元素属性的操作

–读、写过程
–注意事项：
•1. 驼峰命名
•2.class不能直接写，className
•3. 操作的样式较多，一般用css代替
•4. 相对路径地址、颜色值不能用来判断
•5.input的type可以改变但是不兼容IE6 7 8
元素的浮动属性是不兼容IE6 7 8 （ie：styleFloat 非ie:cssFloat）

采用其他的方式规避这些不兼容的效果。

- 元素属性[]的用法

js数据类型：

typeof 可以查看数据类型；

var a = 123; // number 数字类型

var b = '阿飞'; // string 字符串

var c = true; // boolean 布尔值，两个值 true false

var d = function(){} // function 函数

var e = [1,2,3,'',true,function(){}] // object 对象

var e = document // object 对象

var e = { } // object 对象

varf = null // object 对象

varg ; // undefined 未定义

数据类型之间的转换：

显式类型转换：

Number(); parseInt(); parseFloat();

隐式类型转换：

+ // 100 + ‘1’ ==> ‘1001’ 变字符串

-* / % ++ -- // '200' - 3 ==> 197 变数字

>< // '10' > 2 true '10' > '2' false 字符串比较对应位置比较

== ！！= ===// 转成布尔值

NaN：

（ not a number ）typeof NaN==> number

isNaN() :

isnot a number // 是不是（is）不是数字啊？

//是数字 false

//不是数字 true

//根据Number() 转换以后再判断是不是数字

function(){}

传参：

所有数据类型都可以当参数传递；

多个参数’, ‘隔开；

function(){}

传参：

所有数据类型都可以当参数传递；多个参数’, ‘隔开；

实参，形参，不定参：

a('阿飞' ); // ‘阿飞’ 实参

functiona( name ){ // name 形参

alert(name )

}

//arguments 不定参

return:

作用域：

浏览器在读js代码时候的步骤：

先找var function

再逐行执行代码

注：JS中执行代码是 1.定义 var .. function... ... 2.执行表达式 +-*/= == ++ -- alert(); 先定义再执行

作用域链：

从内往外找:子级中找不到变量则往父类中找；而父类不可以到子级中找

要找函数内的变量；

字符串的操作：/*****55g这个知识点很重要/

长度：str.length;

返回某位置的字符：str.charAt( ); //括号里写要找的位置（根据下标查找对应的字符)

返回字符编码：str.charCodeAt(); //括号里写要找的位置(根据下标返回对应字符的Unicode编码)

返回字符：String.fromCharCode(, ); //括号里面写编码可多个

返回某个字符位置（左→右）：str.indexOf(); //括号里面写某个字符找不到返回-1

（‘aa’,5）//从第5位开始找aa，第二参数为负数，当成0

返回某个字符位置（右→左）：str.lastIndexOf();

截取字符串：str.substring(); // (0,5)从0到5;(5,0)从0到5;(-2,5)从0到5

：str.slice( ); //(0,5)从0到5;(5,0)找不到；(-2,5）倒数第二位

拆分字符串：str.split(); // ('.')以.为界限分割，返回一个数组；第二参数为长度

转换成大写：str.toUpperCase();//

转换成小写：str.toLowerCase();

以下为字符串操作的补充:

String对象属性

(1) length属性

length算是字符串中非常常用的一个属性了，它的功能是获取字符串的长度。当然需要注意的是js中的中文每个汉字也只代表一个字符，这里可能跟其他语言有些不一样。

var str = 'abc';
console.log(str.length);

(2) prototype属性

prototype在面向对象编程中会经常用到，用来给对象添加属性或方法，并且添加的方法或属性在所有的实例上共享。因此也常用来扩展js内置对象，如下面的代码给字符串添加了一个去除两边空格的方法：

String.prototype.trim = function(){
return this.replace(/^\s*|\s*$/g, '');
}

String对象方法

1.获取类方法

(1) charAt()

stringObject.charAt(index)

charAt()方法可用来获取指定位置的字符串，index为字符串索引值，从0开始到string.leng – 1，若不在这个范围将返回一个空字符串。如：

var str = 'abcde';
console.log(str.charAt(2));     //返回c
console.log(str.charAt(8));     //返回空字符串

(2) charCodeAt()

stringObject.charCodeAt(index)

charCodeAt()方法可返回指定位置的字符的Unicode编码。charCodeAt()方法与charAt()方法类似，都需要传入一个索引值作为参数，区别是前者返回指定位置的字符的编码，而后者返回的是字符子串。

var str = 'abcde';
console.log(str.charCodeAt(0));     //返回97

(3) fromCharCode()

String.fromCharCode(numX,numX,…,numX)

fromCharCode()可接受一个或多个Unicode值，然后返回一个字符串。另外该方法是String 的静态方法，字符串中的每个字符都由单独的数字Unicode编码指定。

String.fromCharCode(97, 98, 99, 100, 101)   //返回abcde

2.查找类方法

(1) indexOf() ------------返回的是下标

stringObject.indexOf(searchvalue,fromindex)

indexOf()用来检索指定的字符串值在字符串中首次出现的位置。它可以接收两个参数，searchvalue表示要查找的子字符串，fromindex表示查找的开始位置，省略的话则从开始位置进行检索。

var str = 'abcdeabcde';
console.log(str.indexOf('a'));  // 返回0
console.log(str.indexOf('a', 3));   // 返回5
console.log(str.indexOf('bc')); // 返回1

(2) lastIndexOf()方法

stringObject.lastIndexOf(searchvalue,fromindex)

lastIndexOf()语法与indexOf()类似，它返回的是一个指定的子字符串值最后出现的位置，其检索顺序是从后向前。(返回最后出现改指定字符串的下标)

var str = 'abcdeabcde';
console.log(str.lastIndexOf('a'));  // 返回5
console.log(str.lastIndexOf('a', 3));   // 返回0 从第索引3的位置往前检索
console.log(str.lastIndexOf('bc')); // 返回6

(3) search()方法

stringObject.search(substr)
stringObject.search(regexp)

search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。它会返回第一个匹配的子字符串的起始位置，如果没有匹配的，则返回-1。

var str = 'abcDEF';
console.log(str.search('c'));   //返回2
console.log(str.search('d'));   //返回-1
console.log(str.search(/d/i));  //返回3

(4) match()方法

stringObject.match(substr)
stringObject.match(regexp)

match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

如果参数中传入的是子字符串或是没有进行全局匹配的正则表达式，那么match()方法会从开始位置执行一次匹配，如果没有匹配到结果，则返回null。否则则会返回一个数组，该数组的第0个元素存放的是匹配文本，除此之外，返回的数组还含有两个对象属性index和input，分别表示匹配文本的起始字符索引和stringObject 的引用(即原字符串)。

var str = '1a2b3c4d5e';
console.log(str.match('h'));    //返回null
console.log(str.match('b'));    //返回["b", index: 3, input: "1a2b3c4d5e"]
console.log(str.match(/b/));    //返回["b", index: 3, input: "1a2b3c4d5e"]

如果参数传入的是具有全局匹配的正则表达式，那么match()从开始位置进行多次匹配，直到最后。如果没有匹配到结果，则返回null。否则则会返回一个数组，数组中存放所有符合要求的子字符串，并且没有index和input属性。

var str = '1a2b3c4d5e';
console.log(str.match(/h/g));   //返回null
console.log(str.match(/\d/g));  //返回["1", "2", "3", "4", "5"]

3.截取类方法

(1) substring()

stringObject.substring(start,end)

substring()是最常用到的字符串截取方法，它可以接收两个参数(参数不能为负值)，分别是要截取的开始位置和结束位置，它将返回一个新的字符串，其内容是从start处到end-1处的所有字符。若结束参数(end)省略，则表示从start位置一直截取到最后。

var str = 'abcdefg';
console.log(str.substring(1, 4));   //返回bcd(含头不含尾)
console.log(str.substring(1));  //返回bcdefg(如果只有一个参数则表示从该下标到字符串结尾)
console.log(str.substring(-1)); //返回abcdefg，传入负值时会视为0

(2) slice()

stringObject.slice(start,end)

slice()方法与substring()方法非常类似，它传入的两个参数也分别对应着开始位置和结束位置。而区别在于，slice()中的参数可以为负值，如果参数是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符。

var str = 'abcdefg';
console.log(str.slice(1, 4));   //返回bcd(正规截取法也遵循含头不含尾的规则)
console.log(str.slice(-3, -1)); //返回ef(如果是负数则从最后一位开始数，最后一位为-1，也遵循含头不含尾的规则）
console.log(str.slice(1, -1));  //返回bcdef
console.log(str.slice(-1, -3)); //返回空字符串，若传入的参数有问题，则返回空（截取规则都是从左往右截)

(3) substr()

stringObject.substr(start,length)(第一个参数为截取开始的下标位置，第二个为从下标开始截取的长度)

substr()方法可在字符串中抽取从start下标开始的指定数目的字符。其返回值为一个字符串，包含从 stringObject的start（包括start所指的字符）处开始的length个字符。如果没有指定 length，那么返回的字符串包含从start到stringObject的结尾的字符。另外如果start为负数，则表示从字符串尾部开始算起。

var str = 'abcdefg';
console.log(str.substr(1, 3))   //返回bcd
console.log(str.substr(2))  //返回cdefg
console.log(str.substr(-2, 4))  //返回fg，目标长度较大的话，以实际截取的长度为准

4.其他方法

(1) replace()方法

stringObject.replace(regexp/substr,replacement)

replace()方法用来进行字符串替换操作，它可以接收两个参数，前者为被替换的子字符串（可以是正则），后者为用来替换的文本。****************55g

如果第一个参数传入的是子字符串或是没有进行全局匹配的正则表达式，那么replace()方法将只进行一次替换（即替换最前面的），返回经过一次替换后的结果字符串。

var str = 'abcdeabcde';
console.log(str.replace('a', 'A'));
console.log(str.replace(/a/, 'A'));

如果第一个参数传入的全局匹配的正则表达式，那么replace()将会对符合条件的子字符串进行多次替换，最后返回经过多次替换的结果字符串。

var str = 'abcdeabcdeABCDE';
console.log(str.replace(/a/g, 'A'));    //返回AbcdeAbcdeABCDE
console.log(str.replace(/a/gi, '$'));   //返回$bcde$bcde$BCDE

(2) split()方法

stringObject.split(separator,howmany)

split()方法用于把一个字符串分割成字符串数组。第一个参数separator表示分割位置(参考符)，第二个参数howmany表示返回数组的允许最大长度(一般情况下不设置)。

var str = 'a|b|c|d|e';
console.log(str.split('|'));    //返回["a", "b", "c", "d", "e"]
console.log(str.split('|', 3)); //返回["a", "b", "c"]
console.log(str.split('')); //返回["a", "|", "b", "|", "c", "|", "d", "|", "e"]

也可以用正则来进行分割

var str = 'a1b2c3d4e';
console.log(str.split(/\d/)); //返回["a", "b", "c", "d", "e"]

(3) toLowerCase()和toUpperCase()

stringObject.toLowerCase()
stringObject.toUpperCase()

toLowerCase()方法可以把字符串中的大写字母转换为小写，toUpperCase()方法可以把字符串中的小写字母转换为大写。

var str = 'JavaScript';
console.log(str.toLowerCase()); //返回javascript
console.log(str.toUpperCase()); //返回JAVASCRIPT

for in 遍历的方法：

JSON:
varjson = {name = '阿飞', age = 18}
varjson1 = {'name' = '阿飞', 'age' = 18}
forin 遍历
for(var key in json){
alert(json[key])//遍历出key取value
}

js中操作json数据以下为补充:

/*****************************js中json数据的操作*********************************************/

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
本文主要是对JS操作JSON的要领做下总结。
    在JSON中，有两种结构：对象和数组。
    1. 一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间运用 “,”（逗号）分隔。名称用引号括起来；值如果是字符串则必须用括号，数值型则不须要。例如：
    var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"}；
    2. 数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间运用 “,”（逗号）分隔。
    例如：
    var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];
    为了方便地处理JSON数据，JSON提供了json.js包，下载地址：http://www.json.org/json.js
    在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：
    JSON字符串:
    var str1 = '{ "name": "cxh", "sex": "man" }';
    JSON对象:
    var str2 = { "name": "cxh", "sex": "man" };
    一、JSON字符串转换为JSON对象
    要运用上面的str1，必须运用下面的要领先转化为JSON对象：
    //由JSON字符串转换为JSON对象
    var obj = eval('(' + str + ')');
   或者
    var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
    或者
    var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
    然后，就可以这样读取：
    Alert(obj.name);
    Alert(obj.sex);
    特别留心：如果obj本来就是一个JSON对象，那么运用 eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用 parseJSON（）函数处理后会有疑问（抛出语法异常）。
    二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。
    例如： var last=obj.toJSONString(); //将JSON对象转化为JSON字符
    或者   var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
    alert(last);
    留心：
    上面的多个要领中，除了eval()函数是js自带的之外，其他的多个要领都来自json.js包。新版本的 JSON 修改了 API，将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面，前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领，则说明您的json包版本太低。
三、JSON 合并函数
//Json合并
var extend =function(des, src, override){
if(src instanceof Array){
for(var i = 0, len = src.length; i < len; i++)
extend(des, src[i], override);
}
for( var i in src){
if(override || !(i in des)){
des[i] = src[i];
}
}
return des;
}

四、JSON排序函数
//函数功能：json 排序
// filed:(string)排序字段，
// reverse: (bool) 是否倒置(是，为倒序)
// primer (parse)转换类型
// Json.sort(sortBy('CourseLength', false, parseInt));
var sortBy = function (filed, rev, primer) {
rev = (rev) ? -1 : 1;
return function (a, b) {
a = a[filed];
b = b[filed];
if (typeof (primer) != "undefined") {
a = primer(a);
b = primer(b);
}
if (a < b) {
return rev * -1;
}
if (a > b) {
return rev * 1;
}
return 1;
}
}
/*****************************js中json数据的操作*********************************************/

Js中数组的操作：

定义：var arr = [1,2,3]; // vararr = new Array(1,2,3);

数组长度： arr.length // 可读可写

添加值： arr.push(); // 后面添加，返回数组长度

    arr.unshift(); //前面添加，返回数组长度

删除： arr.pop(); //删除数组最后一个，返回删除的那个

arr.shift(); //删除数组第一个，返回删除的那个

splice ：arr.splice( ); //(0,1); 从第0位开始删除1个,返回删除的那个

   //(0,1,'a');把第0位开始的第一位替换为'a',

   // (0,0,'a'); 在第0位后面添加'a'

小案例：取出字符串中的数字（非正则）

<script>

          var ss="sfaf236dafs4631fafdfadf516fadfdsf45265416daf";

          var len = ss.length;

           var s="";

          var sss=new Array();

          for(var i=0;i<len;i++){

               if(ss.charAt(i)==parseInt(ss.charAt(i))){

                   s+=ss.charAt(i);

               }else{

                 if(ss.charAt(i-1)==parseInt(ss.charAt(i-1))){

               sss.push(s);

               s="";

               //   s+=",";

                  }

               }

          }



          alert(sss);

排序：arr.sort(); // 按照字符编码来排序*********************55g

// 可传函数参数

//倒序可以用reverse

两数组拼接：concat(); // arr1.concat(arr2)

变为字符串：jion(); //arr.jion('a' )以a为界限符拼成字符串

js中数组排序问题：如何生成随机序列（特效会用到)*********? 55g

案例：图片随机定位，切换

js中运算符：

算数运算符 + - * / % ++ -- （运算优先级 () ）

复制运算符 = += -= *= /= %=

比较运算符 < > <= >= == != === !==

逻辑运算符 && || ！

条件运算符 ( * )? * : *

移位运算符 & | ^ ~ << >>

案例：全选反选

(function(){})()

列子：

obj.checked = 'checked'/true;//选择

obj.checked = !obj.checked;//反选

给元素设置属性：

为标签元素设置属性有4种方法；

1.obj.style.属性 =属性值

2.obj.style.cssText=多个属性值

3.obj.className='on';//通过对标签添加class属性，通过class属性设置CSS（也可以添加ID)

4.可以对<style></style>标签设ID 获取 styleObj.innerHTML+=样式表达式

   css样式的优先级（数值为优先权重，越高则优先级越高):

   1.内联样式 1000

   2.ID样式     100

   3.class样式/伪类 10

    4.标签样式   1

.style.width= '100px'

.cssText= 'width:100px'

获取元素属性：

getComputedStyle(obj ).width // 得到元素最终宽度 IE6 7 8不兼容

currentStyle.width// 兼容IE6 7 8，不兼容别的浏览器

获取元素属性：

getComputedStyle(obj ).width // 得到元素最终宽度 IE6 7 8不兼容

currentStyle.width// 兼容IE6 7 8，不兼容别的浏览器

js方法：//此方法兼容性写法；可以通过元素标签对象获取其相关属性的值。一般情况下需要对返回的属性值进行parseInt()处理；*****************************55g

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr];

}

}

通过class获取元素；兼容写法：

getElementsByClassName()//扩展方法

var divs = getClassNames('tabs_div' , 'div');

function getClassNames(classStr,tagName){

if (document.getElementsByClassName) {

return document.getElementsByClassName(classStr)

}else {

var nodes = document.getElementsByTagName(tagName),ret = [];

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

if(hasClass(nodes[i],classStr)){

ret.push(nodes[i])

}

}

return ret;

}

}

function hasClass(tagStr,classStr){

var arr=tagStr.className.split(/\s+/ ); //这个正则表达式是因为class可以有多个,判断是否包含

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

if (arr[i]==classStr){

return true ;

}

}

return false ;

}

//不兼容IE 6 7 8

/**************************************js中的运动框架**********************************************/

setInterval setTimeout 时间运动框架*************************55g

注意：定时器不适合用于写时间表示，定时器时间过长会有时间不准确的缺点；

vartime =setInterval(function(){} , 2000);

// 每隔2000毫秒执行一次 function，如果不清楚，会一直执行下去

clearInterval('time' )

// 清楚定时器

vartime1 = setTimeout(function(){} , 2000);

// 2000毫秒后执行一次function，只执行一次

clearTimeout('time1' )

// 清楚定时器

（

window.location.href='http://www.baidu.com';

window.open('http://www.baidu.com' )

）

运动框架分：1速度版运动框架 2.时间版运动框架*

时间版运动框架；

tween算法（flash运用的运动算法，JQ也是基于这个写的）

四个参数分别是：

t：currenttime（当前时间）；

b：beginningvalue（初始值）；

c：change in value（变化量）；

d：duration（持续时间）。

/**************************************js中的运动框架**********************************************/

JS中系统时间的获取:

通过系统时间对象：   var date = new Date();

具体的获取方法：

getFullYear();

getMonth();

getDate();

getDay();

getHours();

getMinutes();

getSeconds();

getTime()；

myDate.getMilliseconds(); //获取当前毫秒数(0-999)

myDate.toLocaleDateString(); //获取当前日期

var mytime=myDate.toLocaleTimeString(); //获取当前时间

myDate.toLocaleString( ); //获取日期与时间

/********************************************操作实例*****************************/

日期时间脚本库方法列表

Date.prototype.isLeapYear 判断闰年

Date.prototype.Format 日期格式化

Date.prototype.DateAdd 日期计算

Date.prototype.DateDiff 比较日期差

Date.prototype.toString 日期转字符串

Date.prototype.toArray 日期分割为数组

Date.prototype.DatePart 取日期的部分信息

Date.prototype.MaxDayOfDate 取日期所在月的最大天数

Date.prototype.WeekNumOfYear 判断日期所在年的第几周

StringToDate 字符串转日期型

IsValidDate 验证日期有效性

CheckDateTime 完整日期时间检查

daysBetween 日期天数差

js代码：

//---------------------------------------------------

// 判断闰年

//---------------------------------------------------

Date.prototype.isLeapYear = function()

{

return (0==this.getYear()%4&&((this.getYear()%100!=0)||(this.getYear()%400==0)));

}

//---------------------------------------------------

// 日期格式化

// 格式 YYYY/yyyy/YY/yy 表示年份

// MM/M 月份

// W/w 星期

// dd/DD/d/D 日期

// hh/HH/h/H 时间

// mm/m 分钟

// ss/SS/s/S 秒

//---------------------------------------------------

Date.prototype.Format = function(formatStr)

{

var str = formatStr;

var Week = ['日','一','二','三','四','五','六'];

str=str.replace(/yyyy|YYYY/,this.getFullYear());

str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100));

str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():'0' + this.getMonth());

str=str.replace(/M/g,this.getMonth());

str=str.replace(/w|W/g,Week[this.getDay()]);

str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());

str=str.replace(/d|D/g,this.getDate());

str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours());

str=str.replace(/h|H/g,this.getHours());

str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());

str=str.replace(/m/g,this.getMinutes());

str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());

str=str.replace(/s|S/g,this.getSeconds());

return str;

}

//+---------------------------------------------------

//| 求两个时间的天数差日期格式为 YYYY-MM-dd

//+---------------------------------------------------

function daysBetween(DateOne,DateTwo)

{

var OneMonth = DateOne.substring(5,DateOne.lastIndexOf ('-'));

var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ('-')+1);

var OneYear = DateOne.substring(0,DateOne.indexOf ('-'));

var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf ('-'));

var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ('-')+1);

var TwoYear = DateTwo.substring(0,DateTwo.indexOf ('-'));

var cha=((Date.parse(OneMonth+'/'+OneDay+'/'+OneYear)- Date.parse(TwoMonth+'/'+TwoDay+'/'+TwoYear))/86400000);

return Math.abs(cha);

}

//+---------------------------------------------------

//| 日期计算

//+---------------------------------------------------

Date.prototype.DateAdd = function(strInterval, Number) {

var dtTmp = this;

switch (strInterval) {

case 's' :return new Date(Date.parse(dtTmp) + (1000 * Number));

case 'n' :return new Date(Date.parse(dtTmp) + (60000 * Number));

case 'h' :return new Date(Date.parse(dtTmp) + (3600000 * Number));

case 'd' :return new Date(Date.parse(dtTmp) + (86400000 * Number));

case 'w' :return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));

case 'q' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) +

Number*3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(),

dtTmp.getSeconds());

case 'm' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) +

Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(),

dtTmp.getSeconds());

case 'y' :return new Date((dtTmp.getFullYear() + Number),

dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(),

dtTmp.getSeconds());

}

}

//+---------------------------------------------------

//| 比较日期差 dtEnd 格式为日期型或者有效日期格式字符串

//+---------------------------------------------------

Date.prototype.DateDiff = function(strInterval, dtEnd) {

var dtStart = this;

if (typeof dtEnd == 'string' )//如果是字符串转换为日期型

{

dtEnd = StringToDate(dtEnd);

}

switch (strInterval) {

case 's' :return parseInt((dtEnd - dtStart) / 1000);

case 'n' :return parseInt((dtEnd - dtStart) / 60000);

case 'h' :return parseInt((dtEnd - dtStart) / 3600000);

case 'd' :return parseInt((dtEnd - dtStart) / 86400000);

case 'w' :return parseInt((dtEnd - dtStart) / (86400000 * 7));

case 'm' :return (dtEnd.getMonth()+1)+((dtEnd.getFullYear()-dtStart.getFullYear())*12) - (dtStart.getMonth()+1);

case 'y' :return dtEnd.getFullYear() - dtStart.getFullYear();

}

}

//+---------------------------------------------------

//| 日期输出字符串，重载了系统的toString方法

//+---------------------------------------------------

Date.prototype.toString = function(showWeek)

{

var myDate= this;

var str = myDate.toLocaleDateString();

if (showWeek)

{

var Week = ['日','一','二','三','四','五','六'];

str += ' 星期' + Week[myDate.getDay()];

}

return str;

}

//+---------------------------------------------------

//| 日期合法性验证

//| 格式为：YYYY-MM-DD或YYYY/MM/DD

//+---------------------------------------------------

function IsValidDate(DateStr)

{

var sDate=DateStr.replace(/(^\s+|\s+$)/g,''); //去两边空格;

if(sDate=='') return true;

//如果格式满足YYYY-(/)MM-(/)DD或YYYY-(/)M-(/)DD或YYYY-(/)M-(/)D或YYYY-(/)MM-(/)D就替换为''

//数据库中，合法日期可以是:YYYY-MM/DD(2003-3/21),数据库会自动转换为YYYY-MM-DD格式

var s = sDate.replace(/[\d]{ 4,4 }[\-/]{ 1 }[\d]{ 1,2 }[\-/]{ 1 }[\d]{ 1,2 }/g,'');

if (s=='') //说明格式满足YYYY-MM-DD或YYYY-M-DD或YYYY-M-D或YYYY-MM-D

{

var t=new Date(sDate.replace(/\-/g,'/'));

var ar = sDate.split(/[-/:]/);

if(ar[0] != t.getYear() || ar[1] != t.getMonth()+1 || ar[2] != t.getDate())

{

//alert('错误的日期格式！格式为：YYYY-MM-DD或YYYY/MM/DD。注意闰年。');

return false;

}

}

else

{

//alert('错误的日期格式！格式为：YYYY-MM-DD或YYYY/MM/DD。注意闰年。');

return false;

}

return true;

}

//+---------------------------------------------------

//| 日期时间检查

//| 格式为：YYYY-MM-DD HH:MM:SS

//+---------------------------------------------------

function CheckDateTime(str)

{

var reg = /^(\d+)-(\d{ 1,2 })-(\d{ 1,2 }) (\d{ 1,2 }):(\d{ 1,2 }):(\d{ 1,2 })$/;

var r = str.match(reg);

if(r==null)return false;

r[2]=r[2]-1;

var d= new Date(r[1],r[2],r[3],r[4],r[5],r[6]);

if(d.getFullYear()!=r[1])return false;

if(d.getMonth()!=r[2])return false;

if(d.getDate()!=r[3])return false;

if(d.getHours()!=r[4])return false;

if(d.getMinutes()!=r[5])return false;

if(d.getSeconds()!=r[6])return false;

return true;

}

//+---------------------------------------------------

//| 把日期分割成数组

//+---------------------------------------------------

Date.prototype.toArray = function()

{

var myDate = this;

var myArray = Array();

myArray[0] = myDate.getFullYear();

myArray[1] = myDate.getMonth();

myArray[2] = myDate.getDate();

myArray[3] = myDate.getHours();

myArray[4] = myDate.getMinutes();

myArray[5] = myDate.getSeconds();

return myArray;

}

//+---------------------------------------------------

//| 取得日期数据信息

//| 参数 interval 表示数据类型

//| y 年 m月 d日 w星期 ww周 h时 n分 s秒

//+---------------------------------------------------

Date.prototype.DatePart = function(interval)

{

var myDate = this;

var partStr='';

var Week = ['日','一','二','三','四','五','六'];

switch (interval)

{

case 'y' :partStr = myDate.getFullYear();break;

case 'm' :partStr = myDate.getMonth()+1;break;

case 'd' :partStr = myDate.getDate();break;

case 'w' :partStr = Week[myDate.getDay()];break;

case 'ww' :partStr = myDate.WeekNumOfYear();break;

case 'h' :partStr = myDate.getHours();break;

case 'n' :partStr = myDate.getMinutes();break;

case 's' :partStr = myDate.getSeconds();break;

}

return partStr;

}

/********************************************操作实例*****************************/

[b]系统时间对象：[/b]

newDate();

创建一个时间点：

1）new Date("month dd,yyyy hh:mm:ss");

2）new Date("month dd,yyyy");

3）new Date(yyyy,mth,dd,hh,mm,ss);

4）new Date(yyyy,mth,dd);

5）new Date(ms);

month:用英文表示月份名称，从January到December

mth:用整数表示月份，从0（１月）到１１（１２月）

dd:表示一个月中的第几天，从1到31

yyyy:四位数表示的年份

hh:小时数，从0（午夜）到23（晚11点）

mm: 分钟数，从0到59的整数

ss:秒数，从0到59的整数

ms:毫秒数，为大于等于0的整数

JS中的DOM对象: document object model;

DOM节点相关操作；

NodeType:节点类型有12种（常见的有元素节点1、文本节点3、属性节点2）；

childNodes：（子节点集合）

IE678只包含元素，其他包含文本和元素（包括非标准元素）；

可以用.length得到长度；

children：（只包含元素节点，推荐使用）；

firstChild：（第一个子节点）IE678只会是元素，其他可能是文本或元素；

列子:

/*********************firstChild****************/

    alert( obj.firstChild.nodeType )

               alert( obj.firstElementChild.nodeType )

               firstChild 和 childNodes一样存在兼容问题

               firstElementChild

                   IE 6 7 8里面没有这个属性

firstElementChild：IE678没有这个属性，其他第一个元素节点；

兼容性写法:

if ( obj.firstElementChild )

           {

                obj.firstElementChild.style.color = 'red';

           }else{

               obj.firstChild.style.color = 'red';

           }

    if ( obj.children )

           {

               obj.children[oList.children.length-1].style.color = 'red';

           }

/*********************firstChild****************/

lastChild/ lastElementChild : （最后一个子节点）；

nextSibling/ nextElementChild：(下一个节点);

列子:

if ( oList.nextElementSibling )

           {

               oList.nextElementSibling.style.color = 'red';

           }else{

               if ( oList.nextSibling.nodeType == 1 )

               {

                   oList.nextSibling.style.color = 'red';

               }



           }

previousSibling/ previousElementSibling：（上一个节点）；

列子:

           oList.previousSibling.style.color = 'red';

parentNode：（元素的父节点）

offsetParent：（元素有定位属性的父节点）

元素.offsetParent

               得到的是第一个定位父元素，找不到就是body

               在IE7 ，得到的是第一个layout属性变化的父元素;IE7中每个元素都有一个默认的layout属性

兼容性写法:

function siblings( obj , fn ){

               var oLiParChild = obj.parentNode.children

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

               {

                   if ( oLiParChild[i] != obj )

                   {

                       fn.call(oLiParChild[i]);//call方法详见event事件中对象指向的讲解

                   }

               }

           }

offsetLeft/ offsetTop

元素.offsetLeft

                   //父级没有定位的时候

                   在其他浏览器，得到的是到HTML的距离

                   //父级有定位

                   得到的是元素到offsetParent的距离

                       //元素自己有定位：

                           得到的是元素到定位父级的距离

offset函数功能：得到obj到页面顶部的绝对距离

           function offset( obj ){

               var pos = {'left' : 0,'top' : 0};

               while ( obj )

               {

                   pos.left += obj.offsetLeft;

                   pos.top += obj.offsetTop;

                   obj = obj.offsetParent;//循环知道找到顶层对象

               }

               return pos;

           }

height;clientHeight;offsetHeight;之间的区别：

                alert( obj.style.height ) 样式高度

               alert( obj.clientHeight ) 可视区高度样式+padding

               alert( obj.offsetHeight ) 实际高度样式+padding+border

元素属性的操作：

    <div id="box" style="" class="wrap" afei="handsome"></div>

alert( oBox.attributes[3].name )

               oBox['afei'] = 'ww'//

               . [] 不能修改或者读取自定义属性的

           alert( oBox.getAttribute('afei') );

           //oBox.setAttribute( 'afei' , 'aaaaaa' )

           //oBox.removeAttribute( 'afei' )

由于兼容性问题。在JS中常用的是obj.parentNode,和obj.children；常用的节点是元素节点

BOM : (Browser Object Model)

（对浏览器的一些操作）

window.open();

//打开一个新窗口，参数1：[href] ，参数2：[target] :参数1是打开的连接路径；参数2是打开的方式。

open();//可以不用window对象也可以执行

                   参数1 ：地址路径，不写打开空白页

                   参数2 ：【target】，不写在新窗口打开

               close();

//返回新窗口的window对象；

window.close();

//关闭窗口，浏览器禁止问题，作用不大

window.navigator.userAgent //浏览器信息；通过这个方法可以的到浏览器的版本用于提供兼容性问题的解决方案

列子：

if(window.navigator.userAgent.indexOf('MSIE') != -1 )

               {

                   alert('我是IE');

               }else

               {

                   alert('我不是IE')

               }

window.location //地址信息 ['href'] ['search'] ['hash']

滚动距离

document.body.scrollTop //scrollLeft

函数列子：

document.onclick = function(){

               var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

               //alert( scrollTop );

               document.documentElement.scrollTop = 0;

               document.body.scrollTop = 0;

           };

document.documentElement.scrollTop //scrollLeft

//窗口改变事件

window.onresize = function(){}

函数列子：

var i = 0;

           window.onresize = function(){

               document.title = i++

           }

           window.onscroll = function(){

               document.title = i++

           }

window.onscroll = function(){}

clientHeight / offsetHeight / scrollHeight 区别

    var oBox = document.getElementById('box');

           //alert( getStyle( oBox , 'height' ) ); // 100px

           //alert( oBox.clientHeight) // 120

           //alert( oBox.offsetHeight ) // 124

           alert( oBox.scrollHeight ) // 120 279 290 286 287 340 340//再不同的浏览器中值不同

    function getStyle( obj , attr ){//获取元素对象对应的属性值

               return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle(obj,0)[attr];

           }

表单操作:

可以用过name名获取改变值；

form.user.value= 'afei';

表单事件：

onchange// 表单值改变时触发

onchange对不同类型元素对象的表现 :

                   text - 当表单value值改变的时候触发

                   radio - 选中的时候触发

                   checkbox - 选择反选都触发

                   select - 切换触发

onsubmit// 提交表单是触发

onreset// 重置时触发

document.getElementsByTagName('select')[0].onchange = function(){

               alert( this.value );

           };

           oForm.onsubmit = function(){

               if ( oInp[0].value == '' )

               {

                   alert('用户名不能为空')

               }

           }

           oForm.onreset = function(){

               alert( 1 )

           }

           */

           oInp[0].onfocus = function(){

               if ( this.value == "请输入用户名" )

               {

                   this.value = '';

               }

           }

           oInp[0].onblur = function(){

               if ( this.value == '' )

               {

                   this.value = "请输入用户名" ;

               }

           }

           /*

           document.onclick = function(){

               oInp[0].focus();

           }

           */

           //oInp.blur();

           document.getElementById('btn').onclick = function(){

               oInp[10].select();

           }

onfocus //获得焦点触发

onblur // 失去焦点触发

.focus().blur() .select()

event事件对象:

事件对象-- 当事件发生时和该事件相关的一些信息；

不同浏览器的兼容问题；

event是一个对象，有很多属性，常用的比如clientX , clientY;

   event,事件对象的属性具体运用：

    // onmousemove 鼠标移动的时候触发

           document.onmousemove = function( ev ){

               var ev = ev || event;

               var x = ev.clientX;

               var y = ev.clientY;

               var oDiv = document.createElement('div');

               oDiv.style.cssText = 'width:3px;height:3px;position:fixed;top:'+y+'px;left:'+x+'px;background:red;';

               document.body.appendChild( oDiv );

           }

详述:

event : 事件对象 -- 当一个事件发生的时候，存储这个事件的相关信息

                   ie / chrome : event ,初始的内容

                       ie : null chrome : undefined

                   firefox : event没有

                   只有在事件发生时，event才有意思

                   ie 8- 在事件发生的时候直接用 event

                   chrome ：可以直接event或者事件函数的第一个参数

                   firefox ：事件函数的第一个参数

function fn( ev ){//通过这个方法可以获取事件对象的所有属性

               var ev = ev || event;

               for ( var key in ev )

               {

                   // key 属性名 ev[key] 值

                   document.write( key + ' = ' + ev[key] + '<br>' );

               }

           }

           //fn();

           document.onclick = fn;

在chrom中可以正常获取，具体信息如下：

/**************************event事件对象具体信息****************************/

screenX = 1003
screenY = 485
clientX = 849
clientY = 282
ctrlKey = false
shiftKey = false
altKey = false
metaKey = false
button = 0
relatedTarget = null
movementX = 0
movementY = 0
webkitMovementX = 0
webkitMovementY = 0
offsetX = 849
offsetY = 282
x = 849
y = 282
fromElement = null
toElement = [object HTMLHtmlElement]
which = 1
dataTransfer = null
initMouseEvent = function initMouseEvent() { [native code] }
buttons = 0
view = [object Window]
detail = 1
layerX = 849
layerY = 282
pageX = 849
pageY = 282
charCode = 0
keyCode = 0
initUIEvent = function initUIEvent() { [native code] }
type = click
target = [object HTMLHtmlElement]
currentTarget = [object HTMLDocument]
eventPhase = 3
bubbles = true
cancelable = true
defaultPrevented = false
timeStamp = 1453254766731
path = [object HTMLHtmlElement],[object HTMLDocument],[object Window]
srcElement = [object HTMLHtmlElement]
returnValue = true
cancelBubble = false
stopPropagation = function stopPropagation() { [native code] }
stopImmediatePropagation = function stopImmediatePropagation() { [native code] }
preventDefault = function preventDefault() { [native code] }
initEvent = function initEvent() { [native code] }
NONE = 0
CAPTURING_PHASE = 1
AT_TARGET = 2
BUBBLING_PHASE = 3
MOUSEDOWN = 1
MOUSEUP = 2
MOUSEOVER = 4
MOUSEOUT = 8
MOUSEMOVE = 16
MOUSEDRAG = 32
CLICK = 64
DBLCLICK = 128
KEYDOWN = 256
KEYUP = 512
KEYPRESS = 1024
DRAGDROP = 2048
FOCUS = 4096
BLUR = 8192
SELECT = 16384
CHANGE = 32768

/**************************event事件对象具体信息****************************/

事件冒泡 ev.cancelBubble=true；事件冒泡：当一个元素在触发事件的时候，这个事件会传递给他的父元素

事件冒泡

               ev.cancelBubble   默认取值是false ，不阻止冒泡，true则阻止事件冒泡

    box3.onclick = function( ev ){

               var ev = ev || event;

               alert( this.id );

               ev.cancelBubble = true;//true则为当前对象清除事件冒泡

           };;

绑定事件的方式；

1.   2. attachEvent() / addEventlistener()

               绑定事件的另一种方式；

                    IE中 : obj.attachEvent( 事件名 , 事件函数 ) ;

                   其他浏览器中 : obj.addEventListener( 事件名 , 时间函数 , 是否捕获 );



               fn.call();



                   fn( arg1 , arg2 , arg3 );

                   fn.call( ‘this指向’ , arg1 , arg2 , arg3 );

this指向，call方法;

bind 给元素绑定一个事件；

           function bind( obj , eName , fn ){

               if ( obj.addEventListener )

               {

                   obj.addEventListener( eName , fn , false );

               }

               else

               {

                   obj.attachEvent( 'on' + eName , function(){

                       fn.call( obj );//指向当前对象

                   } );

               }

           }

       绑定方法对应的解绑方法：

attachEvent() | detachEvent()

               addEventListener() | removeEventListener()

事件捕获；

obj.addEventListener( 事件名 , 时间函数 , 是否捕获 );

键盘事件；

    键盘事件：

               不是所有的元素都能触发键盘事件；可以获得焦点的元素才能触发

               onkeydown -- 键盘按下 // onkeypress

                   down在press之前触发

                   press只会响应字母数字符号，其他的比如F1-F12 ctrl shift alt

               onkeyup -- 键盘抬起

           */

           var oTxt = document.getElementById('txt');

           var oBox = document.getElementById('box');

           var oradio = document.getElementById('radio');

           /*

           oTxt.onkeyup = function(){

               alert( this.value );

           }

           oradio.onkeydown = function(){

               alert( 12 );

           }

           */

           /*

           document.onkeydown = function(){

               alert(1);

           }*/



           /*

           document.onkeypress = function(){

               console.log('press');

           }

           document.onkeydown = function(){

               console.log('down');

           }

ev.keyCode // 键值

                   shift 16 ctrl 17 alt 18

                   ctrlKey = false

                   shiftKey = false

                   altKey = false

document.onclick = function( ev ){

               var ev = ev || event;

               //ev.keyCode 键值//通过键值来判断

               //alert( ev.keyCode )

               if ( ev.ctrlKey )

               {

                   // Code ……

               }

           }



           oBtn.onclick = liuyan;

           oTxt.onkeydown = function(ev){

               var ev = ev || event;

               if (ev.keyCode == 13)

               {

                   liuyan();

               }



           };



           function liuyan(){

               txtVal = oTxt.value;

               oTxt.value = '';

               if ( txtVal )

               {

                   var oP = document.createElement('p');

                   oP.innerHTML = txtVal;

                   oBox.appendChild( oP );

               }

           }

默认事件；

默认事件；

                   让要禁用默认事件的时候，找到事件触发的源头，return false;

document.oncontextmenu = function(){

               return false;

           }

           document.onkeydown = function(ev){

               var ev = event;

               if ( ev.keyCode == 32 )

               {

                   return false;

               }

           }

           /*document.onmousedown = function(){

               function (){}

               return false;

           }*/

           document.onselectstart = function(){

               return false;

           }
清楚默认事件：

document.oncontextmenu = function(ev){

               var ev = ev || event;

               var x = ev.clientX;

               var y = ev.clientY;

               oBox.style.cssText = 'display:block;top:'+y+'px;left:'+x+'px;';

               return false;

           }

           document.onclick = function(){

               oBox.style.display = 'none';

           }

回到顶部的列子

var bTop = document.getElementById('bTop');

           bTop.onclick = function(){

               //var scrollElement = document.documentElement

               var obj = null;

               if ( document.documentElement.scrollTop )

               {

                   obj = document.documentElement;

               }else

               {

                   obj = document.body;

               }



               var timer = null;

               timer = setInterval(function(){

                   var num = obj.scrollTop;

                   console.log( num )

                   num -= 400;

                   if ( num <= 0 )

                   {

                       num = 0;

                       obj.scrollTop -= num;

                       clearInterval( timer );

                   }

                   obj.scrollTop = num;

               },30);

           };

/*****************************************************************************面向对象js***************************************************************************/

1.函数声明与函数表达式的区别

函数声明： function 函数名(){};

           函数表达式：function 函数名（可以没有）(){};

列子：

    var fn = function aa(){alert('abc')}；函数声明

函数表达式：

     (function aa(){alert('abc')})

       ~function aa(){alert('abc')}

       +function aa(){alert('abc')}

       -function aa(){alert('abc')}

       !function aa(){alert('abc')}

区别1：函数表达式可以在后面直接加()执行

           //~function aa(){alert('abc')}()

区别2：函数声明能够被预解析，先定义（找var）；再执行（表达式)

比如这种情况就是最好用表达式；才会正常执行。b()

if ( true )

       {

           var a = function a(){alert('a');};

       }else

       {

           var b = function b(){alert('b');}

       }

       b();

2.闭包

1）概念：函数里面嵌套函数；

                   内部函数可以访问外部函数的参数和变量

                   外部函数的参数和变量不会被回收；

2）垃圾回收机制；

       /*

       function fn(){

           var a = 3;

           alert(a);

       }

a如果没有要调用的函数弹出后会被清除掉

3）闭包的作用：

           //需要一个变量长期存留在内存中的话

           //避免全局变量的污染

           //模块化代码

/****************************列子*****************************************/

var b = (function aa(){

           var a = 1;

           return function(){

               a++;

               alert(a);

           };

       })();

       b();

       b();

       alert(a);

       */

       /*

模块化列子:

        var bb = (function(){

           var a = 1;

           function cc(){

               a++;

               alert(a);

           };

           function dd(){

               a--;

               alert(a);

           }

           return {

               'c' : cc ,

               'd' : dd

           }

       })();

       bb.d();

http://www.itxueyuan.org/view/5628.html 有讲解关于闭包的注意事项

/******************************************************列子***************************************************************/

// 递归方法自己调用自己(递)，直到满足条件返回(归)



    var a = 10;

           var b = a; // 赋值

           b += 10;

           alert(b);

           alert(a);

           // number string boolean null undefined这类型数据赋值是赋予的值本身

   //对象，function 这类数据赋值是对象的引用；如果一个改变则会影响另一个对象

           /*

           var a = [1,2,3];

           var b = a; // 对象引用

           b.push(4);

           alert(b); // 1,2,3,4

           alert(a); // 1,2,3,4

           */

           /*

           var a = [1,2,3];

           var b = a;

           b = [1,2,3,4];

           alert(b);

           alert(a);

//如果要避免这种情况那么可以用递归的方式复制对象给一个新的对象然后赋值

列子：

            var obj = {

               a : 10 ,

               c : 'afei' ,

               d : {

                   name : '阿飞',

                   e : {

                       age : 2

                   }

               }

           }

//浅拷贝

           /*

           function copy( obj ){

               var newObj = {};

               for ( var attr in obj )

               {

                   newObj[attr] = obj['d'];

               }

               return newObj;

           }

           */

           //深拷贝（如果对象里面还有对象则用到递归的方式进行完全复制）

           function dCope( obj ){

               if ( typeof obj != 'object' )

               {

                   return obj;

               }

               var newObj = {};

               for ( var attr in obj )

               {

                   newObj[attr] = dCope(obj[attr]);

               }



               return newObj;
           }

//递归的简单列子

        function a(n){

               if ( n == 1 )

               {

                   return 1;

               }

               return n * a(n-1)

           }

           alert( a(4) );

           //

           function a(4){

               if ( 4 == 1 )

               {

                   return 1;

               }

               return 4 * 6

               }

           }

/**************************************************************递归*********************************************/

DOM优化

DOM优化:

           规则： getElementById

                   getElementsByTagName

                   .innerHTML

                   .appendChild

                   .length

           JS

           尽量减少JS和DOM的交互操作;js逻辑中尽量不要用DOM进行处理

以下是列子:

/*

       var str = '';

       console.time('a');

       for ( var i=0;i<5000;i++ )

       {

           str += '<li>li</li>'

       };

       oUl.innerHTML = str;

       console.timeEnd('a');

       */

       /*

       console.time('a');

       var oLi = document.createElement('li');

       oLi.innerHTML = 'li'

       for ( var i=0;i<5000;i++ )

       {

           var a = oLi.cloneNode(true);//如果要用到document.createElement则用cloneNode(true)更优化一些；true代表是否克隆文本信息

           oUl.appendChild(a);

       };

       console.timeEnd('a');

       */

       /*

       var oLi = document.getElementsByTagName('li');

       var len = oLi.length;//对于需要计算的表达式将结果用一个变量来接收这样循环的时候就不用计算了，也有一定的优化效果

       for ( var i=0;i<len;i++ )

       {

           oLi[i].onclick =

       }

       for ( var i=len; i-- ; )//for循环的优化

       {

           oLi[i].onclick =

       }

       */

       /*

       var str = '';



       1800ms

       console.time('a');

       for ( var i=0;i<5000;i++ )

       {

           oUl.innerHTML += '阿飞';

       }

       console.timeEnd('a');



       console.time('a');

       for ( var i=0;i<5000 ;i++ )

       {

           str += '阿飞';//js中处理字符串

       }

       oUl.innerHTML = str;//将js中处理好的结果一起赋予给DOM方法处理，这样DOM方法只调用一次就可以了，也达到了优化的效果

       console.timeEnd('a');

       */

       /*

           DOM 浏览器中内容发生改变都会触发以下操作：

               重排：

               重绘：有重排那么一定会触发重绘

       */

       /*

       console.time('a');

       var oF = document.createDocumentFragment();

       for ( var i=0;i<5000;i++ )

       {

           var oLi = document.createElement('li');

           oLi.innerHTML = 'li';//这个放在appendChild之前会少一个重排和重绘的操作，也达到了一定的优化效果

           oF.appendChild(oLi);

       };

       oUl.appendChild(oF);

       console.timeEnd('a');

       */

//事件委托

               //利用冒泡的原理，让父节点代替元素去执行事件

               //event : 事件源：不管在哪个事件中，你操作的那个对象就是事件源

               //   iE ev.srcElement ev.target

<html>

<head>

<title> New Document </title>

<meta charset="utf-8">

<meta name="Generator" content="EditPlus">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

</head>

<body>

    <ul id="ul">

      <li>1</li>

      <li>2</li>

      <li>3</li>

      <li>4</li>

   </ul>

<script>

// window.onload=function(){

//事件委托

               //利用冒泡的原理，让父节点代替元素去执行事件

               //event : 事件源：不管在哪个事件中，你操作的那个对象就是事件源

               //   iE ev.srcElement ev.target

/*

    var lis = document.getElementsByTagName("li");

   var len = lis.length;

   for(var i=0;i<len;i++){

   lis[i].onmouseover=function(){

        this.style.background="red";

       };

       lis[i].onmouseout=function(){

       this.style.background="";

       }

   }

   */

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

ul.onmouseover=function(ev){

    var eve = ev||event;

   var elm = eve.srcElement||eve.target;

if(elm.nodeName.toLowerCase()=="li"){

      elm.style.background="red";

}

}

ul.onmouseout=function(ev){

    var eve = ev||event;

   var elm = eve.srcElement||eve.target;

if(elm.nodeName.toLowerCase()=="li"){

      elm.style.background="";

}

}

//   }

</script>

</body>

</html>

/**************************************************面向对象编程*******************************************************************/

/* 创建对象的方法有三种：1.函数申明方式 2.表达式方式 3.new 的方式

           面向对象编程：

               流程式写法；

               面向对象写法

对象的组成：

                   属性：

                   方法：                new Array()

               new Object()

               new Image()

           面向对象编程（OOP）的特点：

               抽象：抓住核心问题

               封装：只能通过对象来执行方法

               继承：从已有对象上继承出新的对象

               多态：多个对象的不同形态

关于比较相等的问题:1.值类型比较的是值等不等。2.引用类型比较的是引用地址和值两者相等才相等 3.在原型创建的新的属性或者对象则是相等的

一般创建对象的列子：

var obj = new Object(); // 创建的是空对象

           obj.name = '亲爱的艳儿';

           obj.showName = function(){

               alert( this.name );

           }

           obj.showName();

           */

           //工厂模式 == 封装函数

           function person( name ){

               //原料

               var obj = new Object();

               //加工

               obj.name = name;

               obj.showName = function(){

                   alert( this.name );

               }

               //出厂

               return obj;

           }

           var p1 = person('圣君');

           var p2 = person('成尐');

           p1.showName();

           p2.showName();

// 用new去调用一个函数的时候，

                   //这个函数创造的对象就是this

                   //所调用的函数，默认返回对象，（隐式返回）

            //注意在普通函数中不用new的方式，如果函数中没有return 数据那么默认返回的是undefined

           //工厂模式 == 封装函数



           //构造函数

           function Person( name ){

               this.name = name;

               this.showName = function(){

                   alert( this.name );

               }

           }



           var p1 = new Person('圣君');

           var p2 = new Person('成尐');

           p1.showName();

           p2.showName();
//原型 prototype的运用：***** js中面向对象设计相关

js中每个function/对象中都有一个prototype属性；（_proto_非正式）

对象找属性或者方法的顺序 1。在new的对象当前中查找，如果没有则到构造方法中找，如果构造方法中也没有则到它的prototype属性中查找；从内存和效率上来考虑，我们在设计对象的时候，把共享（公共）部分的属性或者方法定义再prototype原型中，则公共部分在内存中只需要一份就可以了；

               //去改写对象下面的方法或者属性，为了让公用的方法或者属性在内存中存在一份

               //prototype，只能给构造函数加

    function Person( name ){

               this.name = name;

           }

           Person.prototype.showName = function(){

               alert( this.name );

           }

           Person.prototype.isHandsome = true;



           var p1 = new Person('圣君');

           var p2 = new Person('成尐');

           alert(p2.isHandsome)

//面向对象的写法规则（函数名称首字母大写)

           function 构造函数(){

               this.属性 = ^;

           }

           构造函数.prototype.方法 = function(){

           }

           var obj1 = new 构造函数();
           obj.方法()

/****************************************************************************************/

Ajax

   同步：阻塞（代码逐行执行，上一个执行了再执行下一个)

异步：不阻塞(上一步和下一步可以同时执行)

浏览器中:Ajax的兼容性写法:

window.onload=function(){

   var xhr ;

if(window.XMLHttpRequest()){

   xhr = new XMLHttpRequest();

}else{

   xhr=new ActiveXObject("Microsoft.XMLHTTP“);

}

//var xhr=window.XMLHttpRequest?(new XMLHttpRequest()):(new ActiveXObject("Microsoft.XMLHTTP"));//三目运算符号处理

xhr.open("method","url","true/false”);//请求方式，请求路径，是否同步

xhr.send();//发送ajax请求;

xhr.onreadstatechange=function(){

   if(readstate=="4"){

    if ( xhr.status >= 200 && xhr.status < 300 )

                       {

                          alert(xhr.reponseText);//请求成功返回信息

                       }else{

                 alert("请求失败"+xhr.status)//失败状态码

                       }

}

}

    /***ajax封装注释版本*******************************************/

    function ajax(myJson){

       var xhr=new XMLHttpRequest()?(new XMLHttpRequest()):(new ActiveXObject("Microsoft.XMLHTTP"));//获取ajax对象

       var method=myJson.method||"get";//确定请求方式

       var data = myJson.data;//请求参数（参数的组织方式最好参考jquery）的

       var url=myJson.url;//请求路径

       var asyn=myJson.asyn||true;//确定异步还是同步

       var success=myJson.success;//成功回调函数

       var error = myJson.error;//失败处理函数

       if(method=="get"&&data){//根据不同的请求方式确定不同的请求路径

           url+="&"+data+"&"+Math.random();

       }

       xhr.open(method,url,asyn);//准备请求完成

        xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');//设置请求头文件格式

       if(method=="POST"&&data){       //如果是post的情况

           xhr.send(data);//发送请求

       }else{//如果没有参数

           xhr.send();

       }

       xhr.onreadystatechange = function(){//请求状态改变事件

           if ( xhr.readyState == 4 )

           {

               if ( xhr.status >= 200 && xhr.status < 300 )//请求成功返回的状态码范围

               {

                   alert(xhr.responseText);

                   success && success(xhr.responseText);//将请求成功返回的数据传递给success函数进行处理

               }else{

                   error&&error(xhr.status );//失败处理

                   alert('出错了！' + xhr.status );

               }

           }

       }

    }

/************************************************************************************/

jsonP跨域请求

三种方式:1.flash插件    2.后台服务器代理   3.script标签

前端跨域方式代码列子：

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>百度搜索</title>

<style type="text/css">

body,input,box,input,ul,li{

     margin:0;padding:0;list-style:none;

}

      #box{

          width:400px;

          height:100%;

          position:relative;

          margin:100px 35%;

      }

     #ss{

        width:400px;

        height:30px;

        border-radius:7px;

        margin:10px auto;

        position:absolute;

     }

     #liList{

       width:500px;

       margin:43px auto;

       position:absolute;

     }

     #box ul li{

           width:100%;

           height:20px;

           margin:5px;

          text-decoration:none;

     }

     #box ul li a{

               display:block;

               color:#000;

               text-decoration:none;

     }

</style>

</head>

<body>

<div id="box">

<input type="text" id="ss"/>

    <ul id="liList" > </ul>

</div>

<script type="text/javascript">

//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&cb=ss



          var ss = document.getElementById("ss");

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

    ss.onkeyup=function(){

       var ssValue=ss.value;

       var scriptE = document.createElement("script");

       scriptE.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+ssValue+"&cb=fly_ss";

       document.body.appendChild(scriptE);

       //document.body.removeChild("scriptE");

    }



    function fly_ss(values){

       var gvs = values["s"];

       var len = gvs.length;

       var strV="";

       for(var i=0;i<len;i++){

           strV += "<li><a href='https://www.baidu.com/s?wd="+ gvs[i] +"' target='_self'>"+ gvs[i] +"</a></li>"

       }

       ul.innerHTML=strV;

    }

    //用事件委托的方法来进行操作li

    ul.onmouseover=function(ev){

          var evn = ev||event;

          var objLi = evn.srcElement||evn.target;

       // var bq=objLi.children[0].tagName;

       // if(objLi.children[0].tagName.toLowerCase()=="a"){



             objLi.style.background="#CCCCFF";

       // }

    }



/**************************************************JS面向对象方法*****************/

1.方法链    2.包装对象 3.原型链 4.原型的默认方法和属性 6.继承(拷贝继承/类继承/原型继承)

[b]1.方法链:（连续调用方法)
[/b]

<script>

         function Method(name,age){//定义一个function/构造函数

             this.name=name;

           this.age = age;

       }

Method.prototype.sayName=function(){//原型可以对JS方法进行重写和覆盖

          alert("我的名字叫:"+this.name);

          return this;//执行方法后将当前对象返回，这样就可以继续调用后面的方法

}

Method.prototype.sayAge=function(){

         alert("我的年龄是:"+this.age+"岁");

       return this;

}

    var met = new Method("小熊","5");

   //alert(met.name);

      met.sayName().sayAge();

   </script>

[b]    原型可以对JS方法进行重写和覆盖以及给对象添加新的方法和属性，案例:
[/b]

var arr=[1,2,6];

    Array.prototype.push=function(){

   var len = arguments.length;

        for(var i=0;i<len;i++){

       this[this.length]=arguments[i];

       //   this[this[this.length]]=arguments[i];

       }

   }

   arr.push(3,7,9);

   alert(arr);

2.包装对象

js中的基本类型都有一个对应的包装对象；包装对象：所有的基本类型都有自己对应的包装对象 String Number Boolean

基本类型调用其包装对象的方法的过程是这样的:当基本类型在执行的方法的时候，会找到对应的包装对象，然后包装对象的方法就给了基本类型，再然后包装对象消失；

注意：var str="" str.number="3"; alert(str.number）；其中str.number与alert(str.number）中的str是不一样的;相当于每调用一次包装对象方法就会new一个包装对象。对象不同；

3.原型链

原型链：实现对象和原型之间的连接
__proto__

4.原型的默认方法和属性

        hasOwnProperty( );   var p = new People(). p.hasOwnProperty("属性名");

                   是不是对象自己的属性；返回布尔值；

               constructor :   p.constructor;

                    属性，值是构造函数；

               (当一个new一个对象的时候，原型里面默认带有很多属性和函数的并且不可以for in)

               instanceof : if(p instanceof People)

                   判断构造函数是否一样；

               toString() : toString(16)/转换为16进制（颜色改变会用到)

                   把对象变成字符串

注意：尽量不是更改原型里的默认属性和函数

6.继承(拷贝继承/类继承/原型继承)

<script>

      function Method(name){//父对象

          this.name=name;

      }

     Method.prototype.say=function(){

        alert(this.name);

   }

   function Meth(name,age){

          Method.call(this,name);//这样子对象就继承了父对象的name属性；

          this.age=age;//扩展了属性age;

   }

Meth.prototype.sayAge=function(){

      alert(this.age);

}

           extend(Method.prototype,Meth.prototype);//拷贝继承的运用

      var me = new Meth("张飞","27");

      alert(me.name+me.age);

         me.say();

   alert(me.hasOwnProperty("name"));

   alert(me.constructor);

   me.sayAge();

      function extend(Opt,Npt){//浅拷贝

         for(var key in Opt){//这里用for in 就不会改到原型里面的默认方法和属性

              Npt[key]=Opt[key];

       }

      }

/*/*****类继承***/

定义一个中间对象Fn

      var Fn = function(){};

   Fn.prototype = Method.prototype;

           Meth.prototype = new Fn();

           Meth.prototype.constructor = Meth;

      var mee=new Meth("关羽","28");

      alert(mee.constructor);

/****原型继承稍微有些不同*****/

    <script>

       var MeObj={

          name:"原型继承",

          age:"27",

          sayInfo:function(){

           alert("我的名字是:"+this.name+"我的年龄是:"+this.age);

          }

       }

   function clone(obj){

       var Pt = function(){};

       Pt.prototype=obj;

       return new Pt();

   }

      var MeObj2=clone(MeObj);



            MeObj2.sayInfo();

   </script>

   </script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航