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()"> // 方法后面的（）
<input type="button" value="按钮" onclick="clickMe()">
<script>
function clickMe() {
//通过点击目标获取对象，在通过对象获取属性
alert(event.target.value);
console.log(event.target.value);
}</script>
（2）对象注册法
<input type="text" name="" id="txt1" value="11">
<script>
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 页面加载完成后调用