致敬JavaScript的作者:布兰登·艾克
知识点:
0.JS的写法
遇到 - 的,去掉减号然后把减号后面的字母大写。
例如,css里面的 margin-top,在JS里面要写成:marginTop。
href:"javascript:;"
a标签没有内容可写的时候可以用这个空的js语句。
js三步走:
1.window.onload=function(){};
2.var获取元素
3.加事件
1.事件(或称属性)
window.onload 页面加载完成
onclick
onmouseover
onmouseout
onfocus 获得焦点
onblur 失去焦点
2.获取元素
document.getElementById();
document.getElementsByTagName(); 通过标签名获取一组元素
document.getElementsByClassName();
var aLi=oUl.children 选取所有子级
document.getElementsByTagName(‘‘)[0];
获取一组元素的时候要写下标(从0开始),用下标指定第几个元素
一个元素用oBtn,一组元素用aBtn
3.流程控制语句(就是判断)
第一种 if if里面的条件只有真和假。可以通过真假判断哪个走if哪个走else。判断真假的标准在第12条。
if (条件) {
语句1}
else{
语句2}
};
第一种的加强版
if (条件1) {
语句1}
else if(条件2){
语句2}
}else{
语句3
};
第二种:switch+case
switch(变量){
case‘条件‘;
语句1;
break;
default:
语句;
break;
}
4.循环
4.1 whil循环 不确定次数的循环
(1)初始化 i=0
(2)条件 i<6
(3)语句 alert(i)
(4)自增 i=i++。如果不加自增会陷入死循环,死循环会消耗性能。
var i=0;
while(i<6){
alert(i);
i++;
}
4.2 for循环 有固定次数的循环
for(var i=0; i<6; i++){
alert(1);
}
5.class是js里面唯一特殊的东西,要写成className
6. 字符串 ‘12‘+5=125
带引号的都是字符串 ‘ ‘ " "
数组的两种写法
var arr=[1,2,3,4];
var Array(1,2,3,4);
innerHTML
改变HTML元素内容
7.数据类型
检测数据类型 : typeof
基本类型
string 字符串
number 数字
boolean 布尔值
undefined 未定义
复合类型
object 对象
function 函数
显式数据类型转换/强制类型转换
为什么要转
比如一些数字,可能被识别成字符串,转成数字方便使用
parseInt 整数
parseFloat 整数、小数/浮点数
Number 严格的数字
NaN 非数字(只是一个标识)
属于数字类型 自己不等于自己
隐式类型转换
-减 *乘 /除 %模。+需要用显式类型转换,否则会被识别成连接符。
8.运算符
+ - * / %
+= -= *= /= %=
比较运算符
< > <= >=
!= ==
=== !==
逻辑运算符
! 非 取反
&& 与 并且
|| 或 或者
9.随机数 Math.random(); 0-1之间 1永远不会出现
function rnd(n,m){
return parseInt(Math.random()*(m-n)+n);
}
10.函数的两种形式
命名函数
function show(){ 定义
}
show(); 调用
调用方式:function show(a,b){ 定义一个show函数
alert(a-b);
}
show(12,5); 调用这个函数,给它赋值让其执行
匿名函数
obj=function (){}; 调用
function
11.return :返回值 return 12; -> show();
阻止后面的程序
12.判断真假的标准
真-true
非零数字 非空字符串 非空对象
假-false
数字零 空字符串 undefined(未定义) null(空对象) NaN
13.字符串操作
(1)str.indexOf(‘字符‘)
查第一次出现的字符的下标,如果没查到则返回值-1
例:var str=‘dioauognosufoeiufosngvmlasisfji‘;
alert(str.indexOf(‘a‘));
(2)str.charAt(数字)
查某个下标对应的字符,如果下标超出了字符串长度则返回空
例:var str=‘aojfsngosajfoijfoe‘;
alert(str.charAt(100));
(3)str.lastIndexOf(‘字符‘);
返回最后一次出现该字符对应的下标
例:var srt=‘kafiajfoiaijefonvozjf‘;
alert(str.lastIndexOf(‘v‘));
(4)str.substring(起始位置,结束位置);
切一段,包含包括起始,不包括结束。(如果只写一个值,从开始位置一直切到最后)
例:var srt=‘diaufoueQQOIJLljfoiv‘;
var str2=str.substring(4);
alert(str2);
(5)str.toUpperCase(); 转大写 str.toLowerCase(); 转小写
例:var str=‘abc‘;
var str2=str.toUpperCase();
alert(srt2);
(6)str.split(‘‘); 转数组
例:var str=‘abcd‘;
var arr=str.split(‘‘);
alert(arr);
屏显a,b,c,d
14.数组操作
(1)
(2)
(3)
(4)
(5)
(6)
(7)
(8)
15.时间对象
var oDate=new Date(); 日期对象
var y=oDate.getFullYear(); 年
var m=oDate.getMonth()+1; 月
var d=oDate.getDate(); 日
var day=oDate.getDay(); 星期
var H=oDate.getHours(); 时
var M=oDate.getMinutes(); 分
var S=oDate.getSeconds(); 秒
var MS=oDate.getMilliseconds() ; 毫秒
练习:
1.变宽,变高,变色,向左移动300,恢复正常,显示/隐藏,改变div
2.1号店 导航top
3.一号店购物车(点击事件)
4.搜索框点击以后文字消失
5.百度登录(加透明层)
美丽说所有效果
自动播放选项卡
倒计时
苏宁倒计时