1 html属性操作
var oDiv=document.getElementById('xiaomei');
1. 什么是属性操作？读 写
console.log(oDiv.id); // xiaomei
oDiv.onclick=function(){this.style.backgroundColor='green';}
2. 属性读写操作注意事项
1 js中禁止“-”，font-size错误fontSize;padding-top错误paddingTop
2 js中class是保留字关键字，用className
3 js中相对路径地址不能用来做判断，绝对路径地址可以
img的src，文件的href
4 颜色值不能用于做判断
5 innerHTML不用于做判断，兼容性问题
6 表单元素：input的type别乱改，ie678不支持，试着曲线救国
7 []的使用,[]比.更灵活
oDiv.style.backgroundColor === oDiv.style[background-color]
2 条件判断
if(a>b){alert('mikou');}else if(a>c){alert('xinb');}else{alert('youkioo');}
3 数组
数组长什么样？ 这样
var players=['kb','ai','jordan','dunken'];
console.log(players.length);
console.log(players[2]);
// 给数组添加一项
players.push('rusi');
console.log(players);
var bailu=document.getElementsByTagName('div')[0];
// 同byID区别 getElementsByTagName获取元素的集合；前面可以跟任何元素；是动态方法
4 for循环
for语句的长相
// for(var i=0;i<8;i++){console.log(i);}//0 1 2 7
// for遍历2维数组
var arr=[[1,3,5],[2,4],[6,9,0]];
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){console.log(arr[i][j]);}
}
var oLu=document.getElementById('lulu');
使用for操作一组元素，略...
// cssText操作元素属性，很好用，且不会清除原有定义的样式
oLu.style.cssText='height: 50px;width: 80px;background-color: aqua;';
5 this
this：调用当前方法 或函数的那个对象
3种情况下this指向问题
①
function fn1(){this}
fn1(); this => window
②
oDiv.onclick=fn1(); this -> oDiv
③
oDiv.onclick=function(){
fn1(); fn1()里的this => window
}
6 this的使用
input:button*3
var aBtn=document.getElementsByTagName('input');
// // jenny
// var that=null;
// for(var i=0;i<aBtn.length;i++){
// aBtn[i].onclick=function(){
// that=this;
// fn1();
// }
// }
// function fn1(){
// // this => window 此处this指向window，而不是oBtn
// that.style.backgroundColor='yellow';
// }
// gump
for(var i=0;i<aBtn.length;i++){
aBtn.onOff=true; // 自定义属性
aBtn[i].onclick=fn2;
}
function fn2(){
if(this.onOff){
this.style['background-color']='red';
}else{
this.style['background-color']='yellow';
}
this.onOff=!this.onOff
}
思考：for里面包函数，函数里不能用i，为什么？你试试不就知道了
for(var j=0;j<3;j++){
(function mou(){
alert(i);
})(); // 3 3 3
}
7 自定义属性
input:button*3
// 用index建立元素和数据的联系
var abtns=document.getElementsByTagName('input');
var arr=['xiao','wang','ba'];
for(var i=0;i<abtns.length;i++){
abtns[i].index=i;
abtns[i].onclick=function(){
alert(arr[this.index]);
}
}
8 js数据类型
js数据类型：number boolean string null symbol undefined object
可使用typeof查看数据类型
var a=1, b=true, c='love', d=null, e=Symbol('like'), f=undefined, g=['hel','mou'];
console.log(typeof a,typeof b,typeof c,typeof d,typeof e, typeof f,typeof g);
// number boolean string object symbol undefined object
var fn=function(){console.log('fun');}
console.log(typeof fn); // function
数据类型转换
Number()对含有非数字的字符串不转换；
parseInt()逐位转换为整数；
parseFloat()转换为浮点数
隐式类型转换
① 符号+转成字符串，
① - * / %转成数字，
① ++ --转成数字，
① > < 可能进行数字的比较或字符串的比较，
① ！转换数据成boolean，
① ==对地址进行比较，===类型和值都相等才相等
var s='18aa',q='120';
var oo=parseInt(s);
s= Number(s);
q=Number(q);
console.log(typeof s,s); // number NaN
console.log(typeof q,q); // number 120
console.log(typeof oo,oo); // number 18
var xiu='-19.09am';
xiu=parseFloat(xiu);
console.log(typeof xiu,xiu); // -19.09
9 js预解析
函数参数有哪些？：js数据类型6+1种,都可以
预解析
浏览器的js解析器工作步骤：①找到var function 参数等关键字；②逐行读代码执行
1 所有变量在正式运行代码前都被赋值undefined
2 函数在正式运行前，是函数本身
3 js的预解析，遇到重名的，仓库中只留一个
4 逐行解读代码：①表达式可以改变预解析的值值；②函数调用，两件事：a预解析-局部的，b逐行解读代码
作用域
在script标签中定义的是全局变量全局、全局函数
作用域链：从子级的作用域返回父级作用域
10 获取函数内的值
如何获取函数内的值？
利用一个全局变量;利用一个全局函数
注意：不要在if语句中定义全局变量和函数，因为Firefox有兼容性问题
var nil='';
function fn1(){
var a='huolongguo';
nil=a;
}
fn1();
alert(nil); // huolongguo
// ==================
function fn2(){
var b='mogu';
fn3(b);
}
fn2(); // mogu
function fn3(b){
alert(b);
}
if(true){var c=3;} // 不要这样，存在兼容性问题
11 关于不同数据类型的真假
数据类型的真假
真：非0的数字 非空字符串 true function object（能找到的元素 数组[] json{}）
假：0 NaN 空字符串 false object（null 不能找到的元素）undefined
if('abc'-88){alert('zhen');}else{alert('jia');}
12 关于return
function的return
1 fn() --> return 后面的值
2 function的默认return值undefined
3 return后的代码不会执行
function fn3(){
return 100;
}
alert(fn3()); // 100
13 获取元素样式
// oDiv.style.height只能获取行间的样式
// getComputedStyle(oDiv).height获取元素 计算机浏览器计算后的样式
// getComputedStyle在低版本ie不可用，改用currentStyle
// console.log(oDiv.currentStyle.height,77);
var oDiv=document.getElementById('div1');
// oDiv.style.height='300px';
console.log(oDiv.style.height);
// 获取元素计算后样式兼容ie和标准浏览器
if(oDiv.currentStyle){
console.log(oDiv.currentStyle.height,'ie');
}else{
console.log(getComputedStyle(oDiv).height,'标准');
}
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
console.log(getStyle(oDiv,'width'),'xinba');
