JavaScript
基础知识
默认省略
- windows
- 调用id名
数据类型
- 所有类型都属于对象类型,都是var,在新建对象时不需要指定类型直接 var x = x;.
数据类型 | 注意事项 |
---|---|
数值类型 number | 1.js底层都是浮点型,运算时自动转换为整数和小数;2.数值类型之外的类型通称为NaN类型;;3.除法运算自动转化为小数 |
字符串类型 string | 单双引号都可以修饰字符串 |
布尔值类型 boolean | false0;true1; |
未定义类型 undefined | 未定以类型和任何数值进行计算结果都是NaN |
-
隐饰转换
-
转换为布尔类型时:0/null/空字符串/NaN/undefined转换为flase;
-
在if和while后面的括号中如果不是布尔值会自动隐式转换成布尔值; -
转换为字符串类型时:都自动转换var x = undefiend+"book"+true;//undefinedbookbook
-
转换为数值类型时:null转化为0var x = null+1+true;//3
-
-
Int相关方法
-
其他类型转换数值
var x = praseInt("18ps5sdss5");//取第一个字符串前所有数值类型(15),若第一个字符为“”则返回NaN
-
判断是否为数值类型
isNaN(Object类型)
-
保留n位小数
数值.toFixed(n);
-
-
常用内容
-
和=
- 先将==两端的变量转换为同一类型,再比较数值
- 先比较===两端变量的类型,再比较数值
-
typeof 变量;
输出变量的数据类型;
-
对象
function Person(name,age){/* 声明对象 */
//给对象添加属性
this.name=name;
this.age=age;
//给对象添加方法
this.run = function(){
alert("name:"+name+" age:"+age);
}
}
var p = new Person("刘备",38);
p.run();
var p1 = {
"name":"曹操",
"age":18,
"run":function(){
alert("name:"+this.name+" age:"+this.age);
}
}
p1.run();
方法
- function 方法名(参数列表){方法体}
- var 方法名 = function(参数列表){方法体}
- var 方法名 = new Function(“参数1”,“参数2”,“方法体”);
- 引用方法:方法名(参数列表);
var p1 = {
"name":"曹操",
"age":18,
"run":function(){
alert("name:"+this.name+" age:"+this.age);
}
}
p1.run();
this
this:代表当前元素
this.属性名(返回true或flase)
数组
-
创建数组
var arr = ["abc",18,true];
-
添加内容
arr.push("abc");
-
数组长度
var x = arr.length;
-
遍历数组=java
-
排序
通过数组中的unciode编码进行排序,比较晚第一个再比较第二个
-
整数排序:
arr.sort();
-
自定义排序:
arr.sort(new Function("a","b","retuen a-b;"));
-
-
二维数组
var arr = [[1,2,3],[2,2,2],[3,3,3]]; arr[0];//[1,2,3] arr[0][0];//1
日期
翻译:date日期;time时间
-
获取时间
var date = new Date();
-
字符串转换时间对象对象
var date = new Date("2011/1/1 12:4:36");
-
格式化时间(无,自己书写)
-
时间戳
-
获取时间戳
date.getTime();
-
设置时间戳
进行完下列操作后date的值会发生改变
date.setTime(时间戳的值);
-
-
获取时间分量
代码 时间分量 注意事项 date.getFullYear(); 年 gateYear()已被淘汰,仅适用于19世纪(或者加上1900) date.getMonth(); 月 从0开始 date.getDate(); 日 date.getDay(); 星期几 date.getHours(); 时 date.getMinutes(); 分 date.getSecounds() 秒 -
获取日期或时间
- 获取日期:年月日
date.toLocalDateString();
- 获取时间:时分秒
date.toLocalTimeString();
正则表达式
var reg = /规则/模式;
-
规则
规则的开始和结束要加上/规则/
规则 含义 \w 任意字母数字下划线 \d 匹配任意数字 \s 匹配任意空白 ^ 开头 $ 结尾 -
模式
模式 含义 i 忽略大小写 g 全局模式 -
数量
数量 含义 {数量} 多少次 -
方法
-
正则表达式;
var reg = new RegExp(/规则/模式);
-
查找
reg.exec(str);
execute执行 全局查找时并非一次性返回所有查找到的内容,每次执行返回一个,如果找不到了则返回null
alert(reg.exec(str)); no 第一个alert(reg.exec(str)); no 最后一个
alert(reg.exec(str)); null 没有了 -
校验
var flag = reg.test(str);
-
String方法
-
大小写转换
var x = str.toUpperCase();//大写 var x = str.toLowerCase();//小写
-
查找字符串位置
var x = str.indexOf("字符串");//第一个 var x = str.lastIndexOf("字符串");//最后一个
-
查找字符
var arr = str.match(reg);
-
截取字符串
var str = str.subString(start,end);
-
替换字符串
-
直接替换
只替换第一个,并非全部替换
var str = str.replace("old","new");
-
正则表达式
reg使用g时为全部替换,不使用g时替换一个
var str = str.replace(reg,"new");
-
-
拆分字符串
var x = str.split(".");//x是数组
事件
1.鼠标事件
代码 | 事件 |
---|---|
onclick | 鼠标点击元素事件 |
onmouseover | 移入事件 |
onmouseout | 移出事件 |
onmousedown | 按下事件 |
onmouseup | 抬起事件 |
onmousemove | 移动事件 |
2.键盘事件
代码 | 事件 |
---|---|
onkeydown | 按下事件 |
onkeyup | 抬起事件 |
3.状态改变事件
代码 | 事件 |
---|---|
onload | 页面加载完成 |
onfocus | 获取焦点事件 |
onblur | 失去焦点事件 |
onchange | 值改变事件 |
onresize | 窗口尺寸改变事件 |
4.事件绑定
-
行内绑定
在元素标签内通过事件属性添加事件,在事件方法中this代表的window对象
如果需要用到事件源可以在事件属性中调用方法时把事件源this传递过去<input type="button" value="内容" 事件="方法(this)">
-
动态绑定
动态绑定,通过标签对象给标签添加事件 ,动态绑定的事件方法中this代表的是事件源
[对象.]事件名=方法;
5.事件取消
return false;
6.事件对象event
此对象中保存着和事件相关的信息
需要建立带参方法,并在事件引用方法时传入event
-
在鼠标事件中保存鼠标的坐标
event.clientX/Y
-
在键盘事件中保存着键盘的编码
event.keyCode
-
在任何事件中可以通过event得到事件源 ,以下代码可以解决浏览器兼容性问题
event.target:Dom;event.srcElement:ie;
var obj = event.target||event.srcElement;
7.事件优先级(事件传递/冒泡)
- 事件传递:如果同一个区域存在多个事件响应,则响应的顺序类似气泡从最底层元素向上级元素传递
- 如果在某一个范围内需要给多个元素添加事件,可以将事件添加在这些元素共同的上级元素上,则多个元素同时具备此事件,通过事件源的nodeName属性区分点击的到底是什么元素
DHTML
- Dynamic(动态)HTML,这并不是新的技术,把html+css+js实现的页面称为动态的html页面
- DHTML包括BOM和DOM
- BOM Browser浏览器 Object对象 Model模型: 里面包含和浏览器相关的各种信息
- DOM Document 文档 Object对象 Model模型:里面包含和页面相关的各种信息
BOM/windows
BOM是浏览器厂商自己制定的标准,因此不同浏览器可能语法不同
window对象里面的属性和方法称为全局属性和全局方法,调用window对象里面的属性和方法时,可以将window.省略(windows可以点出所有)
1.常用方法:
代码 | 名称 |
---|---|
parseInt(String类型) | String类型转化为Int |
parseFloat((String类型) | String类型转化为Int |
isNaN(Object类型) | 判断是否为NaN类型 |
alert(Object类型) | 弹出提示 |
confirm(Object类型) | 弹出确认取消框 |
prompt() | 弹出文本输入框 |
console.log() | 在控制台输入 |
eveal() |
2.常用属性:
-
location 位置
-
location.href;地址
location.href="http://www.dizhi.com";//必须书写http://,否则会在当前页面下查找
-
location.reload();刷新 |0
-
location.search;从?开始的地址
-
-
history 历史
- history.length;当前标签历史记录数量
- history.back();后退 |-1
- history.forward():前进 |1
- history.go(Int);n可取任意整数
-
screen屏幕
- screen.width/height 屏幕宽高
- screen.avaiWidth/avaiHeight 可用宽高(减去任务栏的宽度)
-
navigator 导航/帮助
-
document[见DOM]
3.常用事件:
事件 | 名称 |
---|---|
onload | 加载完成 |
onclick | 窗口点击事件 |
onfocus | 获取焦点事件 |
onblur | 失去焦点事件 |
onload | 加载完成 |
4.定时器
-
注意事项:
- 单位毫秒;
- 定时器内的方法可以直接执行;
- 多开定时器并不会同时显示多个,而是显示更快了;
- 命令并不能马上生效,要在设置的时间第一次到达之后才会生效;
- 要在定时器内结束,或者定时器父类方法的兄弟方法
更多注意事项见案例技巧
-
开启定时器:
var timer = setInterval(function(){},时间间隔);
-
停止定时器
clearInterval(timer);
-
开启只执行一次的定时器
setTimeOut();
DOM/document
1.获取元素
添加时会清楚之前的内容,可以通过+=
-
获取id元素
var x = document.getElementById("ID名");
var y = x.value;
x.value=“信息”; -
通过标签名获取元素数组
var x = document.getElementsByTagName("标签名");
-
获取class元素数组
var x = document.getElementsByClassName();
-
通过name属性获取元素数组
var x = document.getElementByName();
-
获取body元素
document.body
2.添加元素
可被innerText取代
- 创建元素(不会立即生效,要写完下面三个方法中的任意一个)
var x = document.createElement("元素名");
- 添加元素到某个元素内部
父元素.appendChild(myh1);
- 插入元素到某个元素的上面
父元素.insertBefore(新元素,弟弟元素);
- 删除元素
父元素.removeChild("被删除的元素");
3.写入内容
-
注意事项:
- 获取值时,存在返回字符串;不存在这一选项返回空字符串“”;
- 写入时默认删除全部除非修改为+=
- 反人类:写入时是等于
-
写入文本(但凡是涉及到一点标签都得用innerHTML)
x.innerText="文本"; var y = x.innerText;//获得文本
-
写入HTML语言(可用于给标签添加属性)
x.innerHTML="html语句"; var y = x.innerText;//获得HTML语言
-
添加css样式
x.style.css属性名称="属性值"; var y = x.innerText;//获得CSS的属性值
- 属性名称
代码 属性名称 marginTop/Right/Bottom/Left 外边距 -
添加属性
x.checked="数值";(1.可以用true或flase 2.必须提前添加)
案例技巧
定时器
注意事项
-
初始化
第一步必须初始化刚打开网页时内容的状态,否则会显示空白
-
使用onload进行初始化:
不能在初始化中书写定时器,因为定时器要在时间第一到达时才能执行,会在这段时间内出现空白;
-
使用css进行初始化:
css在大多数时不可用,因为css不能分辨出每一个图片之间的区别,分别设置太难;
-
-
运行时
- 失去焦点时关闭定时器,得到焦点时开启定时器:因为当失去焦点时,移动中的元素会暂停,当再次获取焦点时,一次性全部执行;
- 在有多次关闭开启操作时,在开启前再执行一次关闭,防止没有完全关闭,导致加速;
- 当定时器套定时器时,内部的定时器必须在结尾时执行一次结束,否侧会产生很多定时器;
1.普通轮播图
- 实现要求:
- 在同一个div内放置四个img并不溢出(此处溢出指的是不显示,因为div默认允许溢出)
- 通过定时器进行轮询(每次轮序要求实现:依次显示四个中的一个,其余的不显示);
- 实现方法:
- html上通过:父层div设置大小,子层设置float(float的属性:遇到div宽度不够时自动折行)移动到下一行;
- js上通过:父层设置定时器实现轮询,子层设置一个变量(每次轮询更改一次变量,y=x++%4,变量在0-4之间累加)和一个for循环(每次轮询实现一次for循环,每次for循环遍历(0-4),当变量的值==for循环遍历中的一个值时显示,其余的隐藏);
- 因为html+css的实现顺序是覆盖,变量的初始化要放在定时器外面否则每次都是0;
2.左右轮播图
-
实现要求:
- 在同一个div内放置四个img并不溢出(这里指脱离文档流),且不能折行;
- 图片自右向左进行移动,移动一下停一会;
- 当图片移动到最左面时回到最右面;
-
脱离文档流分析:
脱离文档流方法:float/absoulte/display:none/fixed;(详细见html文档流)
运用float:因为要固定在一个div中,所以设置float后会将图片挤成一列,因此不适用运用fixed:不适合该操作运用diplay:该操作只适合配合使用
- 运用absolute;
-
实现方法:
- html上通过:父层div设置大小,子层img设置大小,并设置absolute绝对定位(此时img脱离文档流,div不能对img产生影响);再对父层设置relative固定定位(此时img相对于div不脱离文档流);
- js上面:设置双层的定时器,内部定时器作为每多少秒移动一段距离(总距离/(移动距离/时间)这里要等于正数否则容易出错);
待学习知识
var h = document.body.parentElement.clientHeight;