javascript基础笔记
浏览数：24 /
时间：2015年06月08日
第一课
读操作：获取、找到
元素.属性名
写操作："添加？"、替换、修改
元素.属性名 = 新的值
oP.innerHTML => 读取p里面所有的html代码
oP.innerHTML = 123; => 替换p里面所有的html代码
var oText = document.getElementById(‘text1’);
oBtn.onclick = function (){
// oImg.src = oText.value;
// alert( oP.innerHTML );
oP.innerHTML = oText.value;
};
修改元素样式：
op.style.fontSize = num + ‘px’;
Js中不允许出现“－” font-size -> fontSize
修改元素class：
op.className = ‘red’;
<img src=“image/1.jpg”>
所有的相对路径都别拿来做判断！！
颜色 ＋ innerHTML 也不要
oDIv.style.float = ‘left’
oDiv.style.styleFloat = ‘left’
oDiv.style.cssFloat = ‘left’
IE(styleFloat) 非IE（cssFloat）
可以直接该class，要不该属性
oDiv.style.width .后面的值（width名）不能修改 oDiv.style. attr.value 不能这么写
oDiv.style[oAttr.value] = oVal.value;
JS中允许“.”替换成“[]”
数组：
var arr = [’this 1’, ’this 2‘];
第二课
getElementById 和 getElementsByTagName 的区别：
1. getElementById前面调用的对象只能是document，getElementsByTagName可以是oUL等。
2. getElementById找出来一个元素，getElementsByTagName找出的是元素的集合
3. getElementById如果后面动态添加了这个元素，还是找不到，如果使用的是getElementsByTagName那么后面添加的元素能随时找到。
li{} document.getElementsByTagName("li"); // 查询出来的是元素的集合 （ 动态的）
在用TagName的时候，必须要加上：[]
var oUl = document.getElementsbyTagName(‘ul‘)[0];
var aLi = oUL.getElementsByTagName(‘li‘);
如果元素在页面上只有一个。那么可以使用下面的方式：
document.title = 123;
document.body.innerHTML = "abc";
动态的例子：
var aBtn = document.getElementsByTagName(‘input‘);
alert(aBtn.length); // 0个
document.body.innerHTML = ‘<input type="button" value="按钮" /><input type="button" value="按钮" /><input type="button" value="按钮" />‘;
alert(aBtn.length); // 3个
aBtn[0].onclick = function (){ alert(1); };
aBtn[1].onclick = function (){ alert(1); };
aBtn[2].onclick = function (){ alert(1); };
for(var i=0; i<3;i++) {
alert(i);
}
// 性能有问题！！！
var str = ‘‘;
for( var i=0; i<6000; i++ ){
// document.body.innerHTML += ‘<input type="button" value="按钮" />‘; 先别直接给innerHTML赋值
str += ‘<input type="button" value="按钮" />‘;
}
document.body.innerHTML = str;
cssText 改变css整体内容
oDiv.onclick = function (){
// oDiv.style.width = ‘200px‘;
oDiv.style.cssText = ‘ width:200px; height:200px; ‘;
};
this：
// this : 这个
// this： 指的是调用 当前 方法（函数）的那个对象
// window 是 JS “老大”
// window.alert( this );
function fn1(){
alert( this ); // window
}
// fn1();
// window.fn1();
第三课
HTML 标签属性、 自定义属性
var aBtn = document.getElementsByTagName(‘input‘);
// aBtn[0].abc = 123; // 自定义属性
// alert( aBtn[0].abc );
// aBtn[0].abc = 456;
// JS 可以为任何HTML元素添加任意个 自定义属性
自定义属性可以存储一些变量，场景如下：
if ( this.onOff ) {
this.style.background = ‘url(img/active.png)‘;
this.onOff = false;
} else {
this.style.background = ‘url(img/normal.png)‘;
this.onOff = true;
}
属性添加索引值：
var aBtn = document.getElementsByTagName(‘input‘);
for( var i=0; i<aBtn.length; i++ ){
aBtn[i].index = i; // 自定义属性（索引值） index自己起的名字
aBtn[i].onclick = function (){
// alert( i ); // 3 如果这样写所有的值都是3
alert( this.index );
};
}
第四课：
/*
ECMAScript：标准、核心
HTML 标签类型：block、inline、inline-block、table……
JS中的数据类型：数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义
typeof 判断数据类型
*/
var i = 100;
// alert( typeof i ); // number
var s = ‘ miaov ‘;
// alert( typeof s ); // string
// alert( s.length ); // 7
// alert( s.charAt(3) ); // ‘a‘
var b = true; // 布尔值：true false
// alert( typeof b ); // boolean
if ( true ) {}
for ( ; false ; ) { }
var fn = function (){ alert(1); };
// fn();
function fn1(){
alert(2);
}
// alert( fn1 );
// fn1();
var obj = document;
// alert( typeof obj ); // object 物体、东西、对象
obj.abc = 123;
obj.onOff = true;
obj.fn1 = function (){ alert(1); };
// alert( document.onOff ); // 123
// obj.fn1();
var arr = [ 1,2,3,4 ];
// alert( arr.length );
// arr[2] = 345;
// alert( arr );
// arr.push( 5,6,7 );
// alert( arr );
// alert( typeof arr ); // object
arr.abc = 999;
arr.fn1 = function (){ alert(‘ok‘); };
// alert( arr.abc );
// arr.fn1();
var json = { name:‘miaov‘, age:5 };
// alert( json.name + ‘今年‘ + json.age + ‘岁了‘ );
// alert( typeof json );
var n = null;
// alert( typeof n );
var u;
// alert( typeof u ); // undefined 未定义
// 表示你写的程序出问题了~~
类型转换
var a = ‘+100‘;
// alert( a+100 ); // ‘100100‘
// alert( Number(a) ); // 100
var a1 = ‘ ‘;
// alert( Number(a1) ); // 0
var a2 = true;
// alert( Number(a2) ); // true-1 false-0
var a3 = [ 1 ];
// alert( Number(a3) ); // 1 0
var a4 = null;
// alert( Number(a4) ); // 0
// var b = ‘ 200px‘;
// alert( parseInt(b) );
var c = ‘12.34元‘;
// alert( parseFloat(c) );
var num = ‘200.45‘;
if( parseInt(num) == parseFloat(num) ){
alert( num + ‘是整数‘ );
}else{
alert( num + ‘是小数‘ );
}
////////////////////////////////////////////////////////////////////////////
var json = {};
// alert( Number(json) );
var u;
// alert( Number(u) );
var a3 = function (){ alert(1); };
// alert( Number(a3) ); // NaN
/*
显式类型转换（强制类型转换）：
Number()
parseInt()
parseFloat()
隐式类型转换：
+ 200 + ‘3‘ 变成字符串
- * / % ‘200‘ - 3 变成数字
++ -- 变成数字
> < 数字的比较 、字符串的比较
! 取反 把右边的数据类型转成布尔值
==
*/
// alert( Number(‘……‘) ); NaN
// alert( ‘……‘-9 ); NaN
// alert( ‘2‘ == 2 );
// alert( ‘10000000‘ > ‘9‘ );
// 数字的比较与字符串的比较
// ‘1000000‘ ‘9‘
// alert( ‘2‘ === 2 );
// JS中的数据类型：数字（NaN）、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义
var a = Number(‘abc‘);
// alert( a ); // NaN
// NaN：not a number 不是个 数字 的 数字类型
// alert( typeof (a) ); // number
// 一旦写程序中出现：NaN 肯定进行了非法的运算操作
// alert( ‘200px‘ - 100 );
// NaN 是 false
if( a ){
// alert( ‘真‘ );
}else{
// alert( ‘假‘ );
}
var abc = [];
// alert( abc === abc ); true
// NaN 与自己都不相等！！
alert( a === a );
ar arr = [ ‘100px‘, ‘abc‘-6, [], -98765, 34, -2, 0, ‘300‘, , function(){alert(1);}, null, document, [], true, ‘200px‘-30,‘23.45元‘, 5, Number(‘abc‘), function(){ alert(3); }, ‘xyz‘-90 ];
// 作业示意：找到所有的字符串
for ( var i=0; i<arr.length; i++ ) {
if ( typeof arr[i] === ‘string‘ ) {
alert( arr[i] );
}
}
/*
1、找到arr里所有的数字：-98765, 34, -2, 0, 5
2、找到可以转成数字的：‘100px‘, -98765, 34, -2, 0, ‘300‘, ‘23.45元‘, 5
3、把转成数字以后，最大值判断出来：300
4、把 NaN 所在的位置找出来：1 14 17 19
*/
第五课
/*
函数传递参数
参数=JS的数据类型：
数字、字符串、布尔、函数、对象、未定义
*/
fn1(100, ‘px‘);
function fn1(a, b){
// alert( a+b );
}
fn2(‘miaov‘);
fn2(‘妙味课堂‘);
function fn2(a){
// alert(a.charAt(2));
}
function fn4(){
alert(4);
}
// fn3( fn4 );
// fn3( function ( a ){ alert(a); } );
function fn3( fn ){
// fn(100);
fn();
}
fn5( window, document );
function fn5( w, d ){
w.onload = function (){
d.body.innerHTML = 123;
};
}
第六课 变量作用域
浏览器：
“JS解析器”
1）“找一些东西” ：var function 参数
找到变量的时候a，先给它设置一个未定义。所有的变量，在正式运行代码之前，都提前赋了一个值：未定义
fn1 = function fn1(){ alert(2); }
所有的函数，在正式运行代码之前，都是整个函数块
JS 的预解析
遇到重名的：只留一个
变量和函数重名了，就只留下函数
2）逐行解读代码：
表达式：= + - * / % ++ -- ! 参数……
表达式可以修改预解析的值！
alert(a);
a = 1; // 第一步开始找东西，因为没有var，所以没有找到变量，所以第一步打印出错。
alert(a); // function a (){ alert(4); }
var a = 1;
alert(a); // 1
function a (){ alert(2); } //不是表达式 跳过
alert(a); // 1
var a = 3;
alert(a); // 3
function a (){ alert(4); }
alert(a); // 3
// a(); // 报错 a已经被覆盖成数字
<script>
alert(a);
</script> 第一个域 先域解析第一个，然后执行语句，此时a不存在
<script>
var a = 1;
</script> 第二个域
一个域一个域的解析的，而且是自上而下的。（ 上面声明一个变量，下面的域是可以用到的）
函数内部也是一个域（也会预解析，逐行解析代码）
var a = 1;
function fn() {
alert(a);
var a = 2;
}
fn(); //此时开始解析方法内部，首先第一步预解析，a=undefined，第二步逐行解析代码，直接alert，此时a的值是undefined。所以打印出来的结果是undefined。（如果不写var a = 2，那么此时a就用的外面的那个值，a就不会被覆盖为undefined。 如果子集作用域找不到的变量，他会去父级作用域找）
作用域链：由里到外找，局部有能力改变外面变量的值
方法的参数也相当于当前作用域的变量。
例子全部代码：
/*
var a = 1;
function fn1(){
alert(a); // undefined
var a = 2;
}
fn1();
alert(a); // 1
var a = 1;
function fn1(){
alert(a); // 1
a = 2;
}
fn1();
alert(a); // 2
*/
/*
var a = 1;
function fn1(a){ // a相当于局部变量了
alert(a); // undefined
a = 2;
}
fn1();
alert(a); // 1
var a = 1;
function fn1(a){
alert(a); // 1
a = 2;
}
fn1(a);
alert(a); // 1
*/
// 想要获取函数内的值：
var str = ‘‘;
function fn1(){
var a = ‘大鸡腿~‘;
str = a;
}
fn1();
if for 这种里面的不是作用域
alert( fn1 ); // FF 不能对下面的函数进行预解析 （不要在if里面声明函数）
if(true) {
var a = 1;
function fn1(){
alert(123);
}
}
容易错的地方
for( var i=0; i<aBtn.length; i++ ){
aBtn[i].onclick = function (){
alert( i ); // 3 方法作用域里没有i，是用的外面的，此时外面的i等于3
};
}
第七课：运算符，流程控制
=== 先看类型再看值
var a = 90 < 80 || 20 // a= 20
真：非0的数字、非空字符串、true、函数、能找到的元素、[]、{}
假：0、NaN、空字符串‘‘、false、不能找到的元素、null、未定义
第八课 return 定时器
// return 返回值
// 数字、字符串、布尔、函数、对象（元素\[]\{}\null）、未定义
// fn1(); => 100
// alert( fn1().length );
// alert( typeof fn1() );
function fn1(){
// return 100;
return ‘miaov‘;
}
// alert( fn2() );
// fn2(20)(10);
function fn2(a){
return function (b){
alert(a+b); // 嘿嘿，我是注释~
};
}
fn3().onload = function (){
document.body.innerHTML = 123;
};
function fn3(){
return window;
}
// alert(fn4());
function fn4(){
// return ;
}
// alert( fn5() );
function fn5(){
return 123;
alert(520);
}
/*
return：返回值
1) 函数名+括号：fn1() ==> return 后面的值；
2) 所有函数默认返回值：未定义；
3) return 后面任何代码都不执行了；
*/
函数参数：arguments
fn1( 1,2,3 ); // 实参——实际传递的参数
// function fn1( a,b,c ){ // 形参——形式上，abc这些名代表123
function fn1(){
// arguments => [ 1,2,3 ] —— 实参的集合
// alert( arguments );
// alert( arguments.length );
// alert( arguments[arguments.length-1] );
}
// 当函数的参数个数无法确定的时候：用 arguments
// alert( sum( 1,2,3 ) ); // 6
// alert( sum( 1,2,3,4 ) ); // 10
function sum (){
var n = 0;
for( var i=0; i<arguments.length; i++ ){
n += arguments[i];
}
return n;
}
function(a) {
arguments[0] = 3; // 此时arguments[0]跟a是一个东西，改任何一个另一个也跟着改变
alert(a);
}
// alert( $(‘div1‘).style.width );
// $(‘div1‘).style.cssText = ‘width:350px;‘;
// alert( getComputedStyle( $(‘div1‘) ).width ); // IE6 7 8 不兼容 获取到的是计算机（浏览器）计算后的样式
// alert( $(‘div1‘).currentStyle.width ); // 标准浏览器不兼容
/*
if( $(‘div1‘).currentStyle ){
alert( $(‘div1‘).currentStyle.width );
} else {
alert( getComputedStyle( $(‘div1‘), 250 ).width );
// FF 4.0 之前
}
*/
// alert( getStyle( $(‘div1‘), ‘width‘ ) );
// alert( getStyle( $(‘div1‘), ‘height‘ ) );
alert( getStyle( $(‘div1‘), ‘marginRight‘ ) );
/*
background: url() red …… 复合样式（不要获取）
backgroundColor 单一样式（不要用来做判断）
不要有空格
不要获取未设置后的样式：不兼容
*/
定时任务
/*
定时器：时间概念
var timer = setInterval( 函数, 毫秒 ); 重复执行（发动机）
clearInterval( timer ); 清除
var timer = setTimeout( 函数, 毫秒 ); 执行一次（炸弹）
clearTimeout( timer );
*/
aBtn[0].onclick = function (){
clearInterval( timer ); // null、未定义 开始先关一次，否则每次都多开一个
timer = setInterval(function(){
oBody.style.background = ‘url(‘+ arrUrl[num] +‘)‘;
num++;
num%=arrUrl.length;
}, 1000);
};
aBtn[1].onclick = function (){
clearInterval( timer );
};
第九课
endFn && endFn();
var pos = parseInt( getStyle(obj, attr) );
第十课
/*
系统时间对象
*/
// alert( new Date() ); // 当前系统的时间对象
// myTime typeof object
var myTime = new Date();
// number
var iYear = myTime.getFullYear();
var iMonth = myTime.getMonth()+1;
var iDate = myTime.getDate();
var iWeek = myTime.getDay();
var iHours = myTime.getHours();
var iMin = myTime.getMinutes();
var iSec = myTime.getSeconds();
var str = ‘‘;
if( iWeek === 0 ) iWeek = ‘星期日‘;
if( iWeek === 1 ) iWeek = ‘星期一‘;
if( iWeek === 2 ) iWeek = ‘星期二‘;
if( iWeek === 3 ) iWeek = ‘星期三‘;
if( iWeek === 4 ) iWeek = ‘星期四‘;
if( iWeek === 5 ) iWeek = ‘星期五‘;
if( iWeek === 6 ) iWeek = ‘星期六‘;
str = iYear+ ‘年‘ +iMonth+‘月‘+iDate+‘日 ‘+iWeek+‘ ‘+ toTwo(iHours)+‘ : ‘+ toTwo(iMin)+‘ : ‘+ toTwo(iSec);
oBody.innerHTML = str;
// 现在的时间点（在变）
// 未来的时间点（不变）
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
// 数字形式：new Date( 2013,4,1,9,48,12 );
// 字符串形式：new Date(‘June 10,2013 12:12:12‘);
// January、February、March、April、May、June、
// July、August、September、October、November、December
第十一课 字符串操作
alert( str.charCodeAt() ); // 0~9 48~57 a~z 97~122 A~Z 65~90 计算机编号
document.body.innerHTML = String.fromCharCode(22937); 拿出字符
String.fromCharCode(str.charCodeAt(i)-520); 拿到第i位code然后-520 再加密回来
alert( String.fromCharCode(22937, 21619) ); 直接返回两个字
alert( str.indexOf(‘ww‘, 2) ); 从第2位开始找，不是找第二个 // -1 表示没找到
// 将所有的字符串找出来
while( str.indexOf( s, i ) != -1 ){
alert( str.indexOf( s, i ) );
i = str.indexOf( s, i ) + s.length;
}
// alert( str.substring(2,0) ); // 可以检测两个数，大的往后扔，小的往前扔
// alert( str.substring(-3, 2) ); // -3 当成0处理
// alert( str.slice( 2, 0 ) ); // 不交换位置
alert( str.slice( -4, -2 ) ); // 负数从后面倒着往前数~
// alert( str.toUpperCase() ); // 转成大写
// alert( str.toLowerCase() ); // 转成小写
oDiv.innerHTML += arr.join(‘‘); 合并字符串
oP.innerHTML = oP.innerHTML.split(str).join(‘<span>‘+newStr+‘</span>‘); 高亮写法
第十二课 json和数组
var arrUrl = [ ‘img/1.png‘, ‘img/2.png‘, ‘img/3.png‘, ‘img/4.png‘ ];
var json = { name : ‘leo‘, age : 32 };
json.name = ‘妙味‘;
json[‘name‘] = ‘miaov‘;
对象的for in 循环
var json4 = { ‘name‘ : ‘miaov‘, ‘age‘ : 3, ‘fun‘ : ‘前端开发‘ };
for ( var attr in json4 ) {
// alert( attr );
// alert( json4[attr] );
}
数组的for in循环
var arr = [ ‘a‘, ‘b‘, ‘c‘ ];
for ( var i in arr ) {
alert( arr[i] );
}
// var arr = [ 1,2,3 ];
// var arr = new Array(1,2,3);
arr.push( ‘abc‘ ) 数组添加 返回值是数组长度
alert( arr.unshift( 0 ) ); // IE 6 7 不支持 unshift 返回值 往前面添加
arr.pop() 数组元素删除 返回值是扔掉的值
arr.shift() 数组元素前面开始删除
arr.unshift(arr.pop()); 第一个放在最前面
var arr = [ ‘TM‘, ‘钟毅‘, ‘张森‘, ‘杜鹏‘, ‘Leo‘ ];
// splice有3个功能 删除、替换、添加
arr.splice( 0 , 1 ) 从第0位开始删除，删除1个 返回删除数组
arr.splice( 0 , 1, ‘aaaaaa‘ ) 从第0位开始替换，替换1个 将第一位的内容替换为aaaa
alert( arr.splice( 1 , 0, ‘aaaaaa‘ ) ); 从第一个位置，删除0个元素，然后添加一个元素
数组排序
var arr = [ ‘c‘, ‘d‘, ‘a‘, ‘e‘ ];
// arr.sort();
自定义排序方法
var arr2 = [ 4,3,5,5,76,2,0,8 ];
arr2.sort(function ( a, b ) {
return a - b;
});
随机排序
var arr = [ 1,2,3,4,5,6,7,8 ];
arr.sort(function ( a, b ) {
return Math.random() - 0.5;
});
0~1 Math.random()
Math.round 四舍五入
Math.ceil 向上取整
连接数组
var arr1 = [ 1,2,3 ];
var arr2 = [ 4,5,6 ];
var arr3 = [ 7,8,9 ];
alert( arr1.concat( arr2, arr3 ) ); arr1不变，合并的结果当成返回值
var arr1 = [ 1,2,3,4,5,6 ];
// arr1.reverse(); 点到数组内容
var str = ‘abcdef‘;
// alert(str.split(‘‘).reverse().join(‘‘)); 内容点到合并
数组中找到一个元素可以使用 arr3.indexOf(9);
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
