把元素移除视线的办法
display:none;
visibility:none
width/height:0px
opacity:0;
div设置为白色
margin:负值
属性操作
元素.属性
innerHTML
通过元素.属性
修改的是行内属性;修改className
修改的是类。
src
与颜色值不能作为判断条件
某一个值处于动态情况下,使用[]
,而非.
讲到了开关
,onoff
for应用
document.getElementsByTagName('li');
//是动态方法,.length
只能算作一个集合,不能算作数组.`
使用innerHTML
的时候,为了性能考虑,先用字符串给存起来。
cssText
this
document.title
自定义属性 索引值
元素.自定义属性,js可以为任意HTML元素添加任意多个自定义属性
现在用的最多的是数组配合自定义属性来使用吧,使他们建立起来联系
/*这里有一个小例子*/
for( var i=0; i
编程序的时候要记得分模块设计啊
数据类型,类型转换
JS中的数据类型:数字,字符串,布尔,函数,对象(obj,[],{},null)
typeof
是判断数据类型
显式类型转换(强制类型转换):
Number()
parseInt()
parseFloat()
隐式类型转换
+ 200 + '3' 变成字符串
- * / % '200' - 3 变成数字
++ -- 变成数字
> < 数字的比较 、字符串的比较
! 取反 把右边的数据类型转成布尔值
==
NaN
not a number 表示不是数字的数字类型。
NaN和自己都不相等
isNaN();
//里面会产生隐式转换
函数传参
参数是JS里的数据类型
函数加上一个括号表示立即执行
重用代码:
1.尽量保证HTML代码结构一致,可以通过父级选取子元素
- 把核心主程序实现,用函数包起来
- 把不同的值通过传参实现
JS作用域
作用域解析过程
- 预解析首先会进行
- 找到var与function与参数,存到'仓库'里面。var会保存为undefined,function保存为字面。如果var与function名字相同,则function会保存。和上下文无关
- 函数表达式可以改变值的动作
- 会改变预解析的值
在几个不同的标签里面,会一块一块执行,也就是先把一块给预解析,然后进行函数表达式的执行。执行完毕之后,再执行下一块。这里是按照上下文顺序来执行的,几个
共用一个大仓库
function
,json
也是作用域
参数就是一个局部变量,读取代码的时候是从参数开始读取的
要避免在if
,for
里面定义函数
如何那从函数外面拿到局部变量?
/* function a(){
alert('hello');
}
var a = 6;
alert(a);*/
/* var a =1;
function fn1(){
alert(a);
var a =2;
}
fn1();
alert(a);*/
/*var a =1;
function fn1(){
alert(a);//a = 1
a =2;// 没有声明a,所以不会执行预解析。由于a没有找到局部变量,所以出去找全局变量去啦。说明了局部变量有能力去改变外面的值
}
fn1();
alert(a);// a =2 .*/
//var a =1;
//
// function fn1(a){//这里的参数a相当于var a. 就是一个局部变量,会进行预解析
// alert(a);//a = undefined
// a =2;// 没有声明a,所以不会执行预解析。现在a是局部变量。因为变量里存在a
//// alert(a);
// }
// fn1();
// alert(a);// a =1 .
var a =1;
function fn1(a){
alert(a);//a = 1
a =2;//知识
}
fn1(a);//现在的a是一个全局变量.读取
alert(a);// 2
运算符,流程控制课件
%的循环巧用
alert(12<90 &&80);
//返回是80
||
检查一边之后就不再检查了
alert(!!'a');
变成布尔型
continue
与bleak
真假的问题:数据类型-数字(NaN)、字符串、布尔、函数、对象(elem、[]、{}、null)、未定义
真:非0的数字、非空字符串、true、函数、能找到的元素、[]、{}
假:0、NaN、空字符串''、false、不能找到的元素、null、未定义
/*使用switch语句*/
var str = 'ccss';
switch (str){
case 'css':
alert('你好');
break;
case 'html':
alert('你好呀');
break;
case 'javascript':
alert('你好呀呀');
break;
default:
alert('当当当');
}
/*三目运算符*/
var a=5;
a>3?alert('大雨'):alert('小于');//否则在三目里面是一个问号
函数返回值,定时器基础
return
的返回值可以是数字,字符串,布尔值,函数,对象(元素/[]/{}/null)与未定义
函数默认的返回值是return,return
完,后面的代码都不会执行了
alert( typeof fn1() );
,表示调用函数,type of
的是 return
后的 结果
fn()()
是调用函数的函数
有关于实参与形参。实参的集合是arguments[]
,它是一个类数组。//参数无法确定的时候可以使用~
获取元素的样式
elem.style.attr
//行内样式
this.style.cssText = 'width:300px';
getComputedStyle(elem).attr;//IE6,7,8不兼容
elem.currentStyle.attr;//标准浏览器不兼容 - -!
定时器:
setInterval(function,time);
clearInterval(timer);
setTimeout(function,time);
clearTimeout( timer );
定时器如果是由用户来控制,先清除掉上一个定时器。
定时器里可以塞定时器
监听器有一个重要的地方:即使清除了监听器,还是会把这一轮给执行完。清除的是下一轮监听器,并不会立刻清除
定时器管理&函数封装
定时器可以是自定义属性
clearInterval都有一个好脾气.undefined和null不会报错
回调函数:当函数执行完之后,就执行回调函数
if(endFn){
endFn();
}
endFn&&endFn();
日期对象,网页时钟课件
向上取整与向下取整
系统时间,图片时间,倒计时
字符串方法课件
str.length
--
str.charCodeAt()
String.fromCharCode(22937, 21619)
~[48,57]是数字。a-z -> 97-122~
--
str.charAt()
str.charCodeAt()
--
str.indexOf()
str.lastIndexOf()
--
'1000' < '2' // true
'1000' > 2 // true
--
str.substring(first,end)
//第二个不写默认是尾巴。大小颠倒会自动颠倒过来。
str.slice( first, end )
//不修改原数组。没有上面的智能
str.toUpperCase()
str.toLowerCase()
str.split(separator,howmany)
//把字符串切割为数组.不改变原字符串
array.join('')
数组课件
var json = { name : 'leo', age : 32 };
名字是字符串类型,是一种比较安全的格式
josn = ['name':数据类型,'name':数据类型];
数组里面可以塞json
expe[0]['a']
for-in循环
arr.push();
arr.unshift();
arr.shift();
//删除头部
arr.pop();
//删除尾巴
arr.splice();
// 删除、替换、添加
arr.sort(function ( a, b ) { return a - b; });
//sort排序
concat()
//连接数组
arr.reverse()
//颠倒顺序