1_变量
无需指定类型,任何类型都可以用var声明,变量类型由赋值时的类型决定,声明后类型可以改变。
简单类型:String,Number,Boolean,Null,Undefined
对象类型:Object,Array,Function
typeOf:获取变量的类型
2_运算符
-
= 和 == 和 ===
=:赋值
==:忽略类型比较
===:先比较类型,再比较值
-
&&、||
a && b:若a是false,返回a,否则返回b(找false)
a || b:若a是true, 返回a,否则返回b(找true)
3_函数
3_1_定义
- 普通函数
function 函数名([参数1,参数2...]){
return 值;// 可选,没有返回值默认返回undefined
}
- 匿名函数
var 变量名 = function([参数1,参数2...]){
return 值;
}
- 箭头函数
()=>{方法体};
3_2_调用
普通函数:函数名(参数1,参数2...)
匿名函数:变量名(参数1,参数2...)
把匿名函数作为变量的值传递给a函数,在a函数中来调用
4_数组
js中数组不会出现数组越界的情况,数组不是定长的
- 创建数组对象
var arr = new Array();
- 静态初始化
var arr1 = new Array("a", "b", "c");
var arr2 = new Array(1, 2, 3, 4);
- 动态初始化
var arr3 = new Array(3);// 建议不写
- 字面量
var arr4 = ["tom","jerry", "jack"];
数组遍历
- for:最简单,使用频率最高
for (var i=0; i<arr.length; i++) {}
- forEach
arr.forEach(function (item, index, array) {
// item 数组元素
// index 索引
// array 数组本身
})
- map遍历数组中的每个元素,将回调函数中的返回值存到一个新的数组中,并返回
let newArr = arr.map(function (item, index) {
return item + index;
});
console.log(newArr);
- for-in(可以遍历数组和对象)
// 遍历数组
var arr = ["a", "b", "c"];
for (var i in arr){
console.log(i);// i是索引
console.log(arr[i]);
}
// 遍历对象
var person = {name: "Tom", age: 20};
for (i in person){
console.log(i);// 属性名
console.log(person[i]);// 属性值
}
5_面向对象
构造函数
function Person(name, age){
this.name = name;
this.age = age;
this.sleep = function(){
//函数体
}
}
Person 构造函数中 this 指向 Person 实例对象, 即 new Person( ) 出来的对象。
创建对象
var p = new Person("xxx", 20);
// 可以访问p.name,p.age, p.sleep(8);
快捷方式创建对象
var p = {name:"xxx", age:20};
6_DOM
6_1_获取元素
时间点:元素加载到document中之后才能获取
怎么获取:三种方式:
getElementById
getElementsByTagName
getElementsByClassName
6_2_元素节点的属性操作
6_2_1_操作标准属性
- 获取属性值
ele.属性名
ele[“属性名”]
ele.getAttribute(“属性名”)
- 设置属性值
ele.属性名=值
ele[“属性名”]=值
ele.setAttribute(“属性名”, 值)
6_2_2_操作自定义属性
- 获取属性值
ele.getAttribute(“属性值”)
- 设置属性值
ele.setAttribute(“属性名”,值)
6_3_Node对象的属性和方法
属性:firstChild/lastChild/childNodes/previousSibling/NextSibling/parentNode
方法:hasChildNodes()/appendChild(node)/replaceChild(node)/removeChild(newNode, oldNode)/insertBefore(newNode, refNode)/复制结点:cloneNode(true)
7_事件
7_1_form表单事件
属性 | 描述 |
---|---|
onblur | 元素失去焦点时触发 |
onchange | 元素改变时触发 |
onfocus | 获取焦点时触发 |
onsubmit | 提交时触发 |
7_2_事件绑定方式
- 在标签中使用“onxxx"属性绑定
<input type="button" value="fuckme" onclick="alert('fuck');" />
- 通过元素对象的属性(id,class等)绑定
html:
<input type="button" value="fuckme" id="btn"/>
javascript:
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("fuck");
}
注意:
- 引入方式
引入JavaScript代码的两种方式不能糅杂使用
- 方式一:
index.js
alert("xxx");
hello.html引入
双标签
<script type="text/javascript" scr="index.js"></script>
- 方式二:script 标签可以存放在 html 标签中的任何位置,但是推荐写在 head标签里面。
<script>
<!--js代码-->
</script>
appenChild和removeChild操作数组元素特殊性
当把索引为0的子节点删除后那么很自然的原来索引为1节点此时它的索引变成0了,而这时变量i已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点,这样程序运行的结果就是只删除了一半的子节点,用for in遍历结果也是一样的。想正常的删除全部节点的话,我们应该从后面往前删除,代码如下:
for(var i = childs.length - 1; i >= 0; i--) {
f.removeChild(childs[i]);
}
我们从索引最大值开始删除,采用递减的方法,这样索引便不会移动改变了。
或者:
在循环前获取长度,在循环时长度就不会变化了
let len = childs.length;
for(var i = 0; i < len; i++) {
f.appendChild(childs[i]);
}