1、函数:可以理解为-命令,做一些事~~
function abc(){ // 肯定不会主动执行的!
……
}
直接调用:abc();
事件调用:元素.事件 = 函数名 oDiv.onclick = abc;
function (){} 匿名函数
元素.事件 = function (){};
<script></script>写在<head>中要用window.onload来执行:
window.onload = function(){ ... js code... }
<script></script>写在执行标签后面可以用闭包来执行:
(function(){ ... js code ... })();
2、属性读写操作注意事项:
1)JS中不允许出现“-”横杠。JS修改css样式时出现类似font-size的属性写成驼峰名:p1.style.fontSize = num;
2)修改元素的class:p1.className = 'red'; class为保留字,JS中不能出现,修改class要调用className。 class = className.
3)不要拿相对路径做if判断
4)不要拿颜色值做判断
5)不要拿innerHTML做判断
6)表单元素type值修改,IE678不兼容
7)float的兼容:IE(styleFloat) 非IE(cssFloat) oDiv.style.styleFloat = "left";
8)JS中的 . 后面的值是无法修改的。变量或者参数要用[ ];
若是个变量则用[ ] 例如oDiv.style[oAttr.value] = ..; oDiv.style.width = oDiv.style['width']
3、document.getElementById与getElementsByTagName的区别:
1)ById是静态方法,前面只能是document;ByTagName前面也可以是别的元素
2)TagName获取的是一堆元素的集合。获取集合中的元素 要用[ ].比如获取第一个ul:document.getElementsByTagName('ul')[0];
如果代码中只有一个标签,用tagname获取的时候后面必须要加 [0] 。
3)如果在TagName后面用 JS动态增加一些标签,TagName可以获取到而ById获取不到。
修改title或者body:document.title =../document.body.innerHTML = ..
其中document.body.innerHTML =...; 是个简单的替换 不是添加。添加多行标签用+=:document.body.innerHTML +=...;
4、for循环
for(i=0;i<3;i++){alert(i);} 弹出 0 1 2;若在循环体外面在执行一次alert(i); 则弹出 3;
对一堆button进行点击事件可用for循环:for(i=0;i<oDiv.length;i++){oDiv[i].οnclick=function(){...}}
循环增加一堆标签:
var str = '';
for( var i=0; i<6000; i++ ){
// document.body.innerHTML += '<input type="button" value="按钮" />';//有性能问题
str += '<input type="button" value="按钮" />';
}
document.body.innerHTML = str;
5、for嵌套for:
<ul id=''list''>
<li><h2>我的好友</h2><ul><li>Mary</li><li>Mark</li><li>Lady</li></ul></li>
<li><h2>我的坏友</h2><ul><li>Lala</li><li>Haha</li><li>Mama</li></ul></li>
</ul>
JS给每一个好友添加边框:
var oUl = document.getElementById('list');
var aUl = oUl.getElementsByTagName('ul');
var len = aUl.length;
var aLi = null; // 空
for( var i=0; i<len; i++ ){
aLi = aUl[i].getElementsByTagName('li');
for( var j=0; j<aLi.length; j++ ){
aLi[j].style.border = '1px solid red';
}
}
6、cssText文本格式化:
如果元素本身有某种样式,cssText设置该元素此样式后会覆盖。
若没有某种样式,多个cssText设置此样式,后面的会覆盖前面cssText所设置的所有样式。
最后一个为空,则清空以上的cssText设置的内容。
7、this: 指的是调用 当前 方法(函数)的那个对象
function fn1(){
// this
}
// fn1(); //fn1里的this => window
// oDiv.onclick = fn1; // fn1里的this => oDiv
oDiv.onclick = function (){
this.style... 中 this =>oDiv
//fn1(); //fn1() 里的this => window
};
<div οnclick=" this fn1(); "></div> fn1(); 里的 this 指的是 window
8、在使用含有多个参数的css样式时分开来写:
iBox[i].style.backgroundPositionX ='-' + i%8*65 + 'px';
iBox[i].style.backgroundPositionY ='-' + 60 + 'px';
//background-position:x y;中x,y为负数是指图片向左,上偏移了x和y px;
9、自定义属性:
var aLi = document.getElementsByTagName('li');
// var onOff = true; // 只能控制一组!
for( var i=0; i<aLi.length; i++ ){
aLi[i].onOff = true; //自定义属性 给每一个标签添加true属性
aLi[i].onclick = function (){
// 背景不能判断
// color red #f00
// 相对路径不能判断
if ( this.onOff ) {
this.style.background = 'url(img/active.png)';
this.onOff = false;
} else {
this.style.background = 'url(img/normal.png)';
this.onOff = true;
}
};
想建立匹配关系 就用索引值,也是自定义属性的一种。Btn[i].index=i;
10、JS中的数据类型:数字(NaN)、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义
Number()
var a = '+100';
// alert( a+100 ); // '100100'// alert( Number(a) ); // 100var a1 = ' ';// alert( Number(a1) ); // 0var a2 = true;// alert( Number(a2) ); // 1 (false-0)var a3 = [ 2 ];// alert( Number(a3) ); // 1var a3 = [ ];// alert( Number(a3) ); // 0var a4 = null;// alert( Number(a4) ); // 0var a3 = function (){ alert(1); };// alert( Number(a3) ); // NaNalert( Number('……') ); NaN
显式类型转换(强制类型转换):Number() parseInt() parseFloat()
隐式类型转换:
+ 200 + '3' 变成字符串- * / % '200' - 3 变成数字++ -- 变成数字> < 数字的比较 、字符串的比较 '10'>9为ture;'10'>'9'为false! 取反 把右边的数据类型转成布尔值==
NaN:
var a = Number('abc');alert( a ); // NaNNaN:not a number 不是个 数字 的 数字类型alert( typeof (a) ); // number一旦写程序中出现:NaN 肯定进行了非法的运算操作NaN 是 falseNaN 与自己都不相等!isNaN();判断某些值是不是数字,是数字返回false
typeof:
typeof是一个一元运算符,它返回的结果始终是一个字符串,对不同的操作数,它返回不同的结果。具体的规则如下:一、对于数字类型的操作数而言, typeof 返回的值是 number。比如说:typeof(1),返回的值就是number。上面是举的常规数字,对于非常规的数字类型而言,其结果返回的也是number。比如typeof(NaN),NaN在JavaScript中代表的是特殊非数字值,虽然它本身是一个数字类型。在JavaScript中,特殊的数字类型还有几种:Infinity 表示无穷大特殊值NaN 特殊的非数字值Number.MAX_VALUE 可表示的最大数字Number.MIN_VALUE 可表示的最小数字(与零最接近)Number.NaN 特殊的非数字值Number.POSITIVE_INFINITY 表示正无穷大的特殊值Number.NEGATIVE_INFINITY 表示负无穷大的特殊值以上特殊类型,在用typeof进行运算进,其结果都将是number。二、对于字符串类型, typeof 返回的值是 string。比如typeof("123")返回的值是string。三、对于布尔类型, typeof 返回的值是 boolean 。比如typeof(true)返回的值是boolean。四、对于对象、数组、null 返回的值是 object 。比如typeof(window),typeof(document),typeof(null)返回的值都是object。五、对于函数类型,返回的值是 function。比如:typeof(eval),typeof(Date)返回的值都是function。六、如果运算数是没有定义的(比如说不存在的变量、函数或者undefined),将返回undefined。比如:typeof(sss)、typeof(undefined)都返回undefined。
11、函数传递参数:
参数=JS中的数据类型:数字(NaN)、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义
重用代码:1)尽量保证 HTML 代码结构一致,可以通过父级选取子元素2)把核心主程序实现,用函数包起来3)把每组里不同的值找出来,通过传参实现
innerHTML后面的值都是字符串格式,如果把后面的值作为参数,进行数学运算的时候要转成数值格式Number()
或者用隐式类型转换格式
12、作用域:
域:空间、范围、区域……如 <script>、函数和json数据都会执行解析器基本的两个步骤
作用:读、写
script 全局变量、全局函数:
自上而下
函数:
可以由里到外得到变量 不能从外到里
JSON{}
浏览器解析:“JS解析器”
1)“找一些东西” :var function 参数
初始化 a = undefined所有的变量,在正式运行代码之前,都提前赋了一个值:未定义fn1 = function fn1(){ alert(2); }所有的函数,在正式运行代码之前,都是整个函数块JS 的预解析遇到重名的:只留一个变量和函数重名了,就只留下函数
2)逐行解读代码:
表达式:= + - * / % ++ -- ! 参数……
表达式可以修改预解析的值!
函数中的由上到下先找函数中变量的预解析值,找到变量的值就变为预解析值
如果预解析找不到var function 参数,则沿着作 用域链向父级寻找
eg1:
alert(a); // function a (){ alert(4); } // 最先弹出的是预解析内容var a = 1;alert(a); // 1function a (){ alert(2); }alert(a); // 1var a = 3;alert(a); // 3function a (){ alert(4); }alert(a); // 3alert( typeof a ) ; //number// a(); // 报错eg2:var a = 1;function fn1(){ //函数也会执行预解析和代码解读两个步骤alert(a); // undefined //函数中的a是局部的和外面的a不同,等于函数中的预解析值var a = 2;}fn1();alert(a); // 1 //<script>中的预解析值eg3:var a = 1;function fn1(){alert(a); // 1a = 2; // 函数中没有var、function、参数所以没有预解析值,则沿着作用域链向父级寻找 把父级a的预解析值改成了2}fn1();alert(a); // 2 //a已被函数改成了2eg4:var a = 1;function fn1(a){alert(a); // undefined 参数也会有预解析值 此时参数a = undefineda = 2;}fn1();//调用时没加参数alert(a); // 1eg5:var a = 1;function fn1(a){ // 参数在预解析中 a = undefined ,调用时参数为1alert(a); // 1a = 2;}fn1(a);调用时有参数 a=1alert(a); // 1eg6:函数可以由里到外访问变量,不能由外到里。若函数外面想要获取函数内的值:1)var str = ''; //可以先定义一个空字符串function fn1(){var a = '大鸡腿~';str = a;}fn1();alert( str ); //大鸡腿~2)function fn2(){var a = '9999999克拉钻石23456789';fn3(a);}fn2();function fn3(a){alert(a); //9999999克拉钻石23456789}
eg7:
页面有三个按钮,在点击任意一个按钮的时候使三个按钮背景颜色变成黄色:
1)错误示范
var aBtn = document.getElementsByTagName('input');for( var i=0; i<aBtn.length; i++ ){aBtn[i].onclick = function (){
// alert( i );// 3。结果为3,因为for括号中的i已经为3,此时函数中的i访问父级中的i就为3
//而aBtn[i]就为aBtn[3],因为长度为三3,最后一个元素为2,因此访问不到
aBtn[i].style.background = 'yellow';//此时不仅不会变颜色而且控制台会报错
};}
2)正确做法
var aBtn = document.getElementsByTagName('input');
for( var i=0; i<aBtn.length; i++ ){aBtn[i].onclick = function (){// alert( i ); // undefined。 函数中有i,此时会预解析,即初始预解析为undefinedfor( var i=0; i<aBtn.length; i++ ){ //如果里面的i不加var,则函数中就预解析不到i,因此向父级寻找i,即i=3;aBtn[i].style.background = 'yellow';}};}
eg8:
alert( fn1 ); // 火狐 不能对下面的函数进行预解析if( true ){var a = 1;function fn1(){
alert(123);}
}推荐写法,把定义的变量和函数写在 if 外面。其中:alert(fn1); //把函数块的全部内容弹出来alert(fn1()); //调用fn1函数
13、真假的问题
真假的问题:数据类型-数字(NaN)、字符串、布尔、函数、对象(elem、[]、{}、null)、未定义
真:非0的数字、非空字符串、true、函数、能找到的元素、[]、{}
假:0、NaN、空字符串''、false、不能找到的元素、null、未定义
14、return
return 返回值:数字、字符串、布尔、函数、对象(元素\[]\{}\null)、未定义
1) 函数名+括号:fn1() 返回 return 后面的值;像类似点击事件的调用函数就不要加括号:div.onclick = fn;
2) 所有函数默认返回值:未定义;return后面为空,未定义。
3) return 后面任何代码都不执行了;
function fn1( ){
return function ( ){
alert(1);
};
}
fn(); //函数调用就是执行return后的值。如果是return值为函数,alert会把函数块整体弹出来。
fn()(); //弹出 1,两个括号执行return返回的函数。
function fn2(a){
return function (b){
alert(a+b);
};
}
fn2(20)(10); //执行 a+b 结果为30
15、arguments对象:
只在函数中可以使用的:return、arguments、this、event ```等、
fn1( 1,2,3 ); // 实参——实际传递的参数
// function fn1( a,b,c ){ // 形参——形式上,abc这些名代表123
function fn1(){ // 若函数没有形参,arguments会接收实参集合。
// arguments => [ 1,2,3 ] —— 实参的集合
// alert( arguments ); //object arguments
// alert( arguments.length ); //3
// alert( arguments[arguments.length-2] ); // 2
}
当函数的参数个数无法确定的时候:用 arguments
eg:
alert( sum( 1,2,3 ) ); // 6alert( sum( 1,2,3,4 ) ); // 10function sum (){var n = 0;
for( var i=0; i<arguments.length; i++ ){
n += arguments[i];
}
return n;}
arguments与作用域:
var a = 1;
function fn2( a ){
arguments[0] = 3; // 实参为1,存在arguments[0]中,此时变为3
alert(a); // 3
var a = 2; //修改局部的a值为2;a就是arguments[0];
alert( arguments[0] ); // 2
}
fn2(a);
alert(a); // 1 //最上面定义的a的值,与函数内部的a无关。
16、getComputedStyle和currentStyle获取元素样式
getComputedStyle IE 7 8 不兼容
currentStyle 标准浏览器不兼容
兼容性处理:
假设$('div1')为元素被获取后的代码
if( $('div1').currentStyle ){
alert( $('div1').currentStyle.width );
} else {
alert( getComputedStyle( $('div1')).width );
}
这两个获取到的是计算机(浏览器)计算后的样式
background: url() red …… 复合样式(不要获取)
backgroundColor 单一样式(可以获取,但不要用来做判断)
不要有空格
不要获取未设置后的样式:不兼容
兼容函数:
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
17、定时器
var timer = setInterval( 函数, 毫秒 ); 重复执行(发动机) 函数不要加括号否则直接执行:setInterval( fn1, 200 );
clearInterval( timer ); 清除
var timer = setTimeout( 函数, 毫秒 ); 执行一次(炸弹)
clearTimeout( timer );
*/
// for(var i=0; i<3; i++){ document.title = i; } // 瞬间完成,没有时间根据
有些参数不能传参,比如大于小于号,那么就在函数中进行判断。
函数封装后,需要添加回调函数:
eg:doMove ( oDiv, 'left', 12, 900, function () {
doMove ( oDiv, 'top', 34, 500 );
});
//函数:
function doMove ( obj, attr, dir, target, endFn ) {
....
if ( endFn ) {endFn(); } //等价于:endFn && endFn();
}
18、时间对象:
new Date();//当前系统的时间对象
时钟:
var myTime = new Date();
var iYear = myTime.getFullYear();var iMonth = myTime.getMonth()+1;var iDate = myTime.getDate();//日var iWeek = myTime.getDay();//数字0-6var iHours = myTime.getHours();var iMin = myTime.getMinutes();var iSec = myTime.getSeconds();
倒计时:
var iNow = new Date();
// var iNew = new Date( 2013, 10, 27, 21,56,0 );//数字形式var iNew = new Date( 'November 27,2013 22:3:0' );//字符串形式var t = Math.floor((iNew - iNow)/1000);// 毫秒 - 秒var str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';alert( str );// 天:Math.floor(t/86400)// 时:Math.floor(t%86400/3600)// 分:Math.floor(t%86400%3600/60)// 秒:t%60
19、字符串方法:
var str = 'miaomiaomiaomiao';
1) str.length;包括空格
2) str.charAt();括号里是索引值,取值范围:0-str.length-1;默认是0,第一个字符,超出范围, alert为空
3) str.charCodeAt(); 括号里是索引值,取值范围0-str.length-1,输出字符的编码;
4) String.fromCharCode();输入字符编码,可填写多个,输出字符。0~9 48-57; a~z 97-122; A-Z 65-90
5) str.indexOf('m',4);从第四位开始找m。第一个参数为字符串,输出字符串第一个字符的索引值。第二个参数可选。
默认从 第一位开始找。找不到返回 -1。
6)str.lastIndexOf();从右往左找。如果第二个参数为负数,默认当成0来处理。
7) 字符串用大于或小于比较,比较的是各字符串的第一个字符的编码大小。
8) str.substring(4);从索引值为4,即第五个开始截取到最后,包括第五个。
str.substring(0,2);从第一个开始截取到第二个,不包括第三个 。左闭右开 [0,2 )
str.substring(2,0);与substring(0,2)一样,两个参数会从小的开始截取到大的位置。
如果参数有负数,则当成0来处理。
9) str.slice(0,2);截取0-1两个位置,不包括索引值为2的位置,第一个参数要比第二个小。
str.slice(-2);从右往左找两个。
str.slice(-4,-2);-1 指最后一个元素,-2 指倒数第二个元素。所以截取倒数第四、第五个元素
10) str.toUpperCase(); 全部转化成大写
11) str.toLowerCase(); 全部转化成小写
12) 'maolove.cn'.split(' . ');把字符串根据小数点分割成数组 ['maolove','cn']
'leo'.split()不放分隔符,将整体当成数组一个值。//['leo']
'leo'.split('');//['l','e','o']
'/www.baidu.com/'.split('/'); ['','www.baidu.com','']
'2016-08-17-15-20-00'.split('-',3); 分割前三段 ['2016','08','17']
20、JSON
var json = { 'name' : 'leo', 'age' : 32 }; //name 和 age 最好加引号
alert( json.name );// 或者通过 json['name']来获取。
可放数组:
var imgData = {
url : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
text : [ '小宠物', '图片二', '图片三', '面具' ]
};
alert( imgData.url[2] );//img/3.png
数组里可以放json,json里也可以放数组
var arr = [ { 'name' : 'TM', 'age' : 23 }, { 'name' : 'leo', 'age' : 32 } ];
alert( arr[0].name ); // TM
json的遍历:
json没有length属性,不能用for循环来遍历,要用 for in
var json4 = { 'name' : 'miaov', 'age' : 3, 'fun' : '前端开发' };
for ( var attr in json4 ) {
alert( attr ); // name age fun
alert( json4[attr] ); // miaov 3 前端开发
alert(json4['attr']); // undefined undefined undefined
}
含有数组json 的遍历:
var json5 = {
'url' : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
'text' : [ '小宠物', '图片二', '图片三', '面具' ]
};
for ( var attr in json5 ) {
for ( var i=0; i < json5[attr].length; i++ ) {
alert( json5[attr][i] );
}
}
21、for in 遍历对象属性
var str = '';
var num = 0;
for ( var attr in document ) {
str += num + '. ' + attr + ':' +document[attr] + '<br />';
num ++;
}
document.body.innerHTML = str;
// 1. 2. 3. ...
也可以对数组使用 for in遍历
22、数组
var arr = [ 1,2,3 ];
var arr = new Array(1,2,3);
alert( arr ); //两种定义数组方法
var arr = new Array(14);
alert( arr.length );// 14
var arr = new Array('3');
alert( arr.length );// 1
var arr = [ 'aaa',2,3 ];
改变数组:
arr.length = 1;
alert(arr.length);// aaa
清空数组:
arr.length = 0;
arr = [];
字符串中的 str.length只能读不可写
数组添加方法:push、unshift
arr.push() ; 往数组后面追加;括号内添写添加的内容。
arr.unshift();往数组前面添加;括号内添写添加的内容;不支持IE6、7
数组删除方法:pop、shift
arr.pop();删除数组最后一个;括号内不添加参数;返回值是被删除的内容。
arr.shift();删除数组第一个;括号内不添加参数;返回值是被删除的内容。
技巧:
arr.unshift(arr.pop()); 后面的往前排
arr.push(arr.shift());前面的往后排
splice:
var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ];
删除:
arr.splice( 1, 2 );//删除了第二和第三个,第一个为开始索引位置,第二个参数为个数
替换:
arr.splice( 0, 2, '哈哈' );//将前两个替换成一个哈哈
添加:
arr.splice( 1, 0, '钟毅媳妇儿~', '钟毅媳妇们~' );
//第二个参数为0,则没有删除的个数,在第二个位置前,添加了两个字符串
alert( arr );
alert( arr.splice( 1, 0, 'aaaaaa' ) );//只返回删除的值
join:
join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。
与字符串的split方法相反,split是将字符串根据分隔符转成数组形式。
数组去重:
var arr = [ 1,2,2,4,2 ];
for ( var i=0; i<arr.length; i++ ) {
for ( var j=i+1; j<arr.length; j++ ) {
if ( arr[i] == arr[j] ) {
arr.splice( j, 1 );
j--;
}
}
}
alert( arr );
sort:
var arr2 = [ 4,3,5,5,76,2,0,8 ];
arr2.sort(); // 从小到大排序,8最大,原因是sort默认是排序字符串的。比较第一个字符的编码,8最大。
alert( arr2 );
从小到大:
arr2.sort(function ( a, b ) {
return a - b;
});
从大到小:
arr2.sort(function ( a, b ) {
return b - a;
});
eg:
var arrWidth = [ '345px', '23px', '10px', '1000px' ];
arrWidth.sort(function ( a, b ) {
return parseInt(a) - parseInt(b); //只会拿来颠倒位置,不会改变数组内容。
});
随机排序:Math.random(); //0 - 1
var arr = [ 1,2,3,4,5,6,7,8 ];
arr.sort(function ( a, b ) {
return Math.random() - 0.5;
});
alert( arr );
四舍五入: Math.round()
向上取整:Math.ceil()
向下取整:Math.floor();
0-10间的整数: Math.round(Math.random()*10);
20-30间的整数: Math.round(Math.random()*10+20);
x-y间的整数:Math.round( Math.random()*(y-x) + x ) ;
0-x间的整数:Math.round( Math.random()* x ) ;
1-x间的整数:Math.ceil( Math.random()*x) ;//向上取整
concat:合并数组
var arr1 = [ 1,2,3 ];
var arr2 = [ 4,5,6 ];
var arr3 = [ 7,8,9 ];
alert( arr1.concat( arr2, arr3 ) );//[1,2,3,4,5,6,7,8,9]
reverse:反转数组,属于数组的方法,不能直接反转字符串
数组内容反转:
var arr1 = [ 1,2,3,4,5,6 ];
arr1.reverse();//6 5 4 3 2 1
把字符串内容反转:
var str = 'abcdef';
str.split('').reverse().join('');//先把字符串分割成数组后反转,之后将数组还原成字符串