JS总结

1、JavaScript 写在哪里

head部分：用于声明变量、函数、类型，为事件绑定处理函数
body分布：调用脚步执行
外部脚步：用于定义函数、类型
- 将代码封装到一个扩展名为js的文件中，然后再需要的地方引用，完成一次定义，多出引用的效果，简化了代码维护
- 在文件中不需要写标签

2、基本语法

大小写敏感
弱类型语言: var value = 1;
分号结尾
注释（单行// ctrl + /、多行/* */、方法/** */）

fun1()

/**

* 方法一

* @param {*} param1 这是参数一

function fun1(param1){

}

字符串既可以使用单引号，也可以使用双引号

2.1、数据类型

因为JavaScript为弱类型语言，故声明变量只需要使用 var 关键字即可声明任何类型
虽然 var关键字即可声明任何类型，但是JavaScript 仍有数据类型
- boolean 布尔
- number 数字
- string 字符串
- Undefined 未定义
- Null 空对象
- Object 对象类型
- Undefined 类型和Null类型都是只有一个值得数据类型，值分别为undefined 与null

查看变量类型可以使用 typeof 方法

2.2 集合

数组：[....]

- var array1 = new Array(1); //赋值长度没有意义
- var array2 = new Array(1);
- var array3 = [];

上面三种赋值

var array = [1, 2, 3, 4, 5, 6]

键值对：[键：值；...]

var kv ={};

var KeyValues = {"key1":"value1", "key2":"value2",....}

// 赋值

kv["a"] = "A";

kv["b"] = "B";

kv.c = "C";

kv.d = "D";

注意：键不加"" js对象，加"" jion格式的对象

Array 对象属性

length 设置或返回数组中元素的数目

Array 对象方法

- concat() 连接两个或更多的数组，并返回结果 // 不会改变原有数组
- join（）把数组中的所有元素放入一个字符串，元素通过指定的分隔符进行分隔 // 返回一个字符串,默认逗号连接
- push() 向数组的末尾添加一个或更多元素，并返回新的长度 // 返回一个长度
- reverse() 颠倒数组中元素的顺序
- sort() 对数组的元素进行排序
- splice() 删除元素，并向数组添加新元素
- //array3.splice(2, 2, [56, 12]) 从下标为2开始删除两个元素，然后添加元素[56, 12]
- array3.splice(2); 删除下标2开始后面的所有
- array3.splice(0, 0, 1); 往开头添加1

类型转换

- parseInt("6789"); // 字符串转换为整数
- parseFloat("6789.06"); // 字符串转换为浮点数

2.3 方法使用

使用关键字function定义方法

方法名使用驼峰命名法

方法可以设置参数及返回值

function myfunction(param1, param2) {

return param1 + param2;

}

2.4 匿名方法

匿名方法可以简单理解成不需要写方法名称的方法

var fun = function(p1) {

alert(p1);

}

fun(2);

(function(p1) {

alert(p1);

})(1);

3、闭包

目前可以简单理解成子方法可以使用父方法的变量即可（不建议使用闭包，变量不易释放）

4、DOM

DOM即 Document Object Model
Dom用于操作html文档，准备的说是操作html标签的内容
JavaScript中将每一个标签当做对象处理
在HTML中，每个标签都用欧自己的属性，比如 style id class等，也拥有事件、方法，同样在is中作为对象处理的标签也拥有属性、事件、方法等成员
操作DOM对象，一般使用document 关键字调用

4.1、js获取元素的方法

document.getElementById();根据id获取元素节点
document.getElementsByClassName();根据class的值获取一组元素节点
document.getElementsByName(); 根据name获取一组元素节点
document.getElementsByTagName(); 根据标签名称获得一组元素节点
<div id="dv1" class="dv">我是dv1</div>
<div id="dv2" class="dv">我是dv2</div>
<div id="dv3" class="dv">我是dv3</div>
<div id="dv4" class="dv">我是dv4</div>
console.log(document.getElementById("dv1"));
console.log(document.getElementsByClassName("dv"));
console.log(document.getElementsByName(""));
console.log(document.getElementsByTagName("div"));

4.2、注册事件

事件注册常用的方式有多种，常用的方法有两种，一种为直接在元素上注册事件，另一种在获取的对象上注册触发事件

（1）元素上注册事件

<input type="text" name="" id="text1" value="11" onclick="clickMe()"> // 方法后面的（）

function clickMe() {

//通过点击目标获取对象，在通过对象获取属性

alert(event.target.value);

console.log(event.target.value);

}</script>

（2）对象注册法

document.getElementById("txt1").onchange = function() {

alert(event.target.value);

}

document.firstChild; 获取第一个子元素

</script>

4.3 动态操作元素

document.createElement(); 创建元素
document.appendChild(); 添加子元素
document.insertBefore(newEl, orgEl); 在元素前添加元素
document.firstChild; 获取第一个子元素
document.childNodes; 获取所有子节点元素
document.removeChild(); 移除指定子节点元素

4.4 获取元素内容

innerHTML 用于获取与赋值拥有开闭标签的元素中全部的内容
innerText 用于获取与赋值拥有开闭标签的元素中文字部分的内容

4.5 操作样式

操作style属性

style属性可以设置或返回样式

style 设置css特征值时，需要把特征的短横线命名法改为驼峰命名法后使用

5、BOM

BOM即Browser Object Model
BOM用于操作浏览器行为
操作BOM对象，一般使用Window 关键字

5.1、常用方法

alert():弹出提示对话框
confirm():弹出确认对话框，返回bool值类型
window.close();关闭浏览器
prompt(): 弹出用户输入对话框，返回输入的内容，如果取消则返回null
setInterval(code, milliseconds):计时器方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
- code：需要执行的代码
- milliseconds:执行代码的周期
- 方法会不停的调动函数，直到 clearInterval() 被调用或窗口被关闭，由setInterval() 返回的计时器，ID 值可用作 clearInterval() 方法参数
setTimeout(code, milliseconds):一次性计时器方法用于在指定的毫秒数后调用函数或计算表达式
- code：需要执行的代码
- milliseconds:执行代码的周期
- clearInterval() 方法来阻止函数的执行，由setInterval() 返回的计时器 ID 值可用作 clearInterval() 方法参数
location 浏览器地址栏对象
- hash 返回一个URL的锚部分
- host 返回一个URL的主机和端口
- hostname 返回URL的主机名
- href 返回完整的URL
- pathname 返回的URL路径名
- port 返回一个URL服务器使用的端口号
- protcol 返回一个URL协议
- search 返回一个URL的查询部分
onload 页面加载完成后调用