js总结
陆运乾
Javascript
1.JS引入页面的方式
<script src=”js文件的路径”>标签内部不允许写任何内容</script>
<script>js代码的位置</script>
<div onclick=”函数” style=”样式”></div>
2.三种常用的输出方法
以下三个方法我们经常用来调试错误，主要用c
A）弹出框 window.alert();
B）document.write();
C）console.log() 控制台打印
3.声明变量
Var a = 1;
Var a = 1, b = 2, c = 3;
Var s = ‘hello’;
4.数据类型
6种数据类型
获取数据类型的方法:typeof(a) typeof a
1）Number
Number():强转方法
NaN:not a number 但是数据类型是number
isNaN():判断是否是NaN
parseInt():
parseFloat()
isFinite():判断是否是有限数
2）Boolean
True/false
Boolean()
3）String
Js当中不缺分单引号双引号 + 遇到其他数据类型与字符串做+，那么会把其他数据类型隐式的转成字符串
Length:获取字符串的长度
charAt(index):
charCodeAt(index)
String.fromCharCode(ascII)：把ascII值转成对应字符
IndexOf():
lastIndexOf():
substring(start,end):左闭右开
substr(start,length):从start开始截取length个
slice(start,end):
splite()：
4）Function
有名函数/匿名函数
匿名函数一般用做事件处理函数或者函数的参数
有名函数
Var f = function(参数列表){};
function fn(参数列表){};
5）Object
{} new Object() null 数组
声明对象:
Var a = {
Name:”lore”,
Age:18,
Fn:function(){};
};
Var a = new Object();
对象包含属性和方法
数组:存储数据
Var arr = [1,2,3,4]; var arr = new Array(1,2,3,4);
Length:获取数组长度
下标:每一个数组元素对应一个下标，下标从0开始 arr[index]
Pop():删除数组最后一个元素，返回被删除的元素
Push():数组末尾添加元素，返回数组新的长度
Shift():删除数组第一个元素，返回被删除的元素
UnShift():往数组头部添加元素，返回数组的长度
Splice():能实现数组的删除，截取，插入
Slice(start,end):
Reverse:数组反转 改变了原数组，返回一个倒叙之后的新数组
Concat():数组合并
Join():数组转成字符串
6）Undefined
5.运算符
a)算术运算符
+ - * / %
+：如果遇到字符串，那么偏爱字符串，会把其他数据类型隐式的转成字符串，所以字符串的连接符。除了+以外的运算符都偏爱数字，遇到数字与其他数据类型进行运算时，会把其他的数据类型隐式转成数字。
+= -= /= *= %=
a+=2 a = a+2;
++ -- :
不管++ -- 在参与运算的变量之前还是之后，变量本身都会+1-1,
三目预算符
表达式1?结果1：结果2 相当于于if(){}else{}
b)关系运算符 逻辑判断 if switch
> < >= <= != !== == ===
==:只要值相等就是真
===：值和数据类型都相等才是真
!=:只要值一样就是假
!==:不全等
c)逻辑运算符 逻辑判断 if switch
&& || ！
&&：只有两边表达式都是真才是真，否则假
||：只要有一个是真就是真
！：非真即假 非假即真
逻辑短路
6.分支
If if..else if else if..else switch
7.循环
For while do..while for..in
For(var attr in obj){
}
8.获取页面元素
1）通过id名定位元素
a)如果我们是h5的文档声明，那么id名就是该元素
b)Document.getElementById(id名)
2）通过标签名定位元素
Document/父元素.getElementsByTagName(标签名)；
获取的是一组元素
3）通过类名获取元素 (h5新增的)
Document/父元素.getElementsByClassName(类名)
获取的也是一组元素
4）h5新增的获取元素方式
a)document.querySelector(css选择器)：css选择器选择到的第一个元素
b)document.querySelectorAll(css选择器):获取选择器选到的所有元素
9.改变元素样式
Dom：document object model
Dom对象.style.样式名 = 样式值
改变多条样式
Dom对象.style.cssText=”background:red;border:1px solid #000”;
10.事件绑定
Click mouseover mouseout mouseenter mouseleave focus blur
Change scroll mousewheel ……
Dom对象.on+事件名称 = 匿名函数体/有名的函数名
11.获取可视区的大小
Window.innerWidth/document.documentElement.clientWidth
12.Dom对象的属性操作
Dom对象的属性都是可读可写
Dom对象.属性名/dom对象[‘属性名’]
Dom对象.属性名=值；
相对路径/颜色值不能作为逻辑判断的条件
图片: dom.src
表单元素: value type checked
Dom对象id dom对象.id
操作类名
Dom对象.className
H5操纵类名的方法
Dom对象.classList:获取类名
Add/remove/toggle(切换)/contains
添加自定义属性
1）Dom对象.属性名 = 值/ Dom对象[属性名] = 值
2）借助js提供的方法添加自定义属性
Dom对象.setAttribute(属性名，属性值);
Dom对象.getAttribute(属性名)；
Dom对象.removeAttribute(属性名)
3）h5新增的data API
Dom对象.dataset.name=’lore’; data-name=lore
InnerHTML:读取或者设置dom对象的内容（它可以读到或者设置标签）
InnerText:读取或设置标签内的文本内容
13.获取大小
Dom对象.offsetWidth:包含边框
Dom对象.clientWidth:不包含边框
14.Js加载事件
Window.onload = function(){}
Js的加载事件一个文档只能出现一次
15.循环绑定事件，在事件处理函数内部不能出现循环变量
16.Window
Alert() prompt() confirm() setInterval () setTimeOut() clearInterval() clearTimeout()
setInterval (匿名的函数体/有名函数名,time):每个time毫秒，匿名函数/有名函数执行一次
clearInterval(定时器的名字):清除定时器
setTimeOut(匿名的函数体/有名函数名,time):time毫秒之后，前面的函数执行
17.其他的通过关系获取元素的方式.
通过父亲找儿子:父元素.children;找到直接的儿子
父元素. firstElementChild 父元素. lastElementChild
通过儿子找父亲:
普通父亲:子元素.parentNode;
定位父亲:子元素.offsetParent;
Js可以获取到定位元素的left：定位元素.offsetLeft top: 定位元素.offsetTop
相邻元素:
找前一个元素:该元素.previousElmentSibling;
找后一个元素:该元素.nextElmentSibling;
类似资料：