一、流程控制语句
程序三种基本结构--顺序结构、选择结构、循环结构
1、选择结构:
if语句
if (判断条件) {
执行语句
}else if (判断条件) {
执行语句
}else{
执行语句
}
switch语句
case里必须是具体的值,但是如果表达式可以返回一个具体的值true或者false也可以是表达式,这时switch里面是true
switch(表达式) {
case 取值:
执行语句
break;
case 取值:
执行语句
break;
default:
执行语句
}
2、循环结构:
for语句
1.初始化表达式、
2.控制表达式、
3.循环后表达式
for(var i = 0; i < n ; i ++){
执行语句
}
while语句
var i= 0;
which (判断条件){
执行语句
}
do while 语句 先执行后判断至少执行一次
var i = 0;
do {
执行语句
}while(判断条件)
二、数组
1、数组的声明
①通过构造函数
var arr = new Array ();
②通过字面量
var arr = [];
2、数组的赋值和取值
赋值:arr [索引号] = 1;
批量赋值 for循环
取值:arr [索引号];
3、数组的遍历 ---- 批量取值
for (var i = 0; i < arr.length; i ++){}
4、防止稀疏数组
arr (arr.length) = i;
三、函数
1、函数的定义和调用
函数的定义:每个函数都只能被定义一次,但一个函数可以根据需要被多次的声明和调用。
①函数的声明:function 函数名 () {
函数体(要执行的代码)
}
②函数表达式:var 函数名 = function () {
函数体
};
函数的调用:函数名 ();(要调用先引用)
2、函数的参数
有参数的函数的声明:
function 函数名 (参1,参2) {
//函数声明时的参数只是一个占位符,是形式参数
函数体
}
有参数的函数的调用:函数名 (参1,参2)
//函数调用时传入的参数是具体的数值,是实际参数
形参和实参没有关系,只不过在调用的时候把实参的值复制了一份赋值给了形参
3、函数返回值
①return 要返回的值;(函数的返回值是什么,调用这个函数就相当于调用了什么)
②函数在执行完成return语句后便会退出函数,后面的代码不会执行
③如果只打印函数名,会通过函数名找到函数体,如果想打印的是函数的返回值,那么一定要加小括号()
4、匿名函数
匿名函数:函数定义完后就赋值给了一个变量,通过变量名来调用这个函数,所以就没有必要起名字
5、递归函数
函数自己调用自己的编程技巧
6、回调函数
被当做函数传递的函数
四、对象
通过对象可以方便的对变量和函数进行管理和使用
1、键值对:一种对应关系,通过键能够方便地找到值 key:value;
对象也是键值对属性名:属性值、索引:元素的值
2、对象的声明
①通过构造函数
var obj = new.Object();
②通过字面量
var obj = {};
3、属性:用来描述对象的特征 一般是名词 对应变量
定义:对象.属性名 = 要赋的值;
调用:对象.属性名;
4、方法:用来描述对象的行为 一般是动词
是一种函数(属于某个对象的函数就叫方法)
定义:对象.方法名 = function(){ //函数体 };
调用:对象.方法名;
5、访问属性的两种方式
①点语法(属性名是什么就必须写什么):obj.属性名;
②中括号(通过字符串找属性名,字符串可以通过编程拼接):obj["属性名"];
6、遍历的两种方式
①for循环
②for-in
for(var k in json) { 语句 }
k变量代表的是json中的各个属性(key)和 var i = 0中的i是一个意思 名字不同而已
json JavaScript Object
Notation(JavaScript对象标记法)是仿照JS中对象字面量的格式去书写的一串
用来记录对象数据的字符串,可以用于数据传输。
7、Null
null常被用于期望一个对象,但是当前先不附加任何值的情况
undefined派生自null
undefined == null //true
undefined === null //false
五、DOM
①、阻止a标签的默认行为
return false;
②、事件三要素
事件源.事件 = function(){事件处理程序};
③、批量操作
①批量获取元素(通过标签名) getElementsByTagName )
②批量添加事件 for循环遍历
replace 方法
replace (要找的值,要替换的值)
function 函数名(element, 要找的值,要替换的值){
element.className = element.className.replace(要找的值,要替换的值)
}
Document Object Model 文档对象模型,就是把HTML文档模型化,当作对象来处理
1、概念
文档(Document):就是指HTML或者XML文件
节点(Node):HTML文档中的所有内容都可以称之为节点,常见的节点有
元素节点 属性节点 文本节点 注释节点
元素(Element):HTML文档中的标签可以称为元素
2、结构概念
父节点 当前节点的父级
子节点 当前节点的子级
兄弟节点 和当前节点同属一个父级的节点
3、.获取元素
getElementById
getElementsByTagName 通过标签名寻找一类元素(伪数组)
4、设置属性
元素对象.属性名 = “属性值”;
<标签 属性名=”属性值”>
5、绑定事件
事件三要素
事件源.事件 = function(){ 事件处理程序 };
对象方法中的this永远指的是该方法所属的那个对象
6、常用属性
a常用标签属性
DOM对象的属性和HTML的标签属性几乎是一致的,常用的有src、title、className、href和style
b内部文本属性
innerHTML 获取和设置标签中的内容,设置的内容会当作节点对象被解析到DOM树上
innerText 获取和设置标签中的内容,设置的内容会被当作普通文本(有兼容性问题,旧版ff不支持)
textContent获取和设置标签中的内容,设置的内容会被当作普通文本(有兼容性问题,旧版IE不支持)
c常用表单属性
常见的表单元素属性有: type、value、checked、selected、disabled
type设置input元素的类型
value设置input元素的值
checked设置input元素是否选中
selected 设置下拉列表select中的option是否被选中
disabled 设置input元素是否被禁用
获取焦点事件是onfocus 失去焦点事件是onblur
d自定义属性--必须以data-开头
getAttribute() 获取标签属性
setAttribute() 设置标签属性
removeAttribute() 移除标签属性
7、节点
childNodes //子节点
children //子元素
nextSibling //下一个兄弟节点
nextElementSibling //下一个兄弟元素 有兼容性问题
previousSibling//上一个兄弟节点
previousElementSibling //上一个兄弟元素 有兼容性问题
firstChild //第一个节点
firstElementChild //第一个子元素 有兼容性问题
lastChild //最后一个子节点
lastElementChild //最后一个子元素 有兼容性问题
parentNode //父节点 (一定是元素节点,所以无需处理)
8、样式属性
style属性是对象,style对象的属性是字符串
style只能获取和设置行内样式
JS中 - 不能作为标识符,涉及到计算的时候必须直接通过JS加样式
9、动态创建元素、
①插入和移除节点
在父元素中的最后追加子元素:father.appendChild(要追加的元素);
在父元素中的某个子元素前面插入子元素:father.insertBefore(要插入的元素,插到这个元素的前面);
从父元素中移除子元素:father.removeChild(要移除的子元素);
②js动态创建结构
方式一:直接在文档中书写 document.write(“内容”)
方式二:改变元素对象内部的HTML:innerHTML=”内容”
使用 字符串 或者 数组 先拼接再用innerHTML去添加到页面
方式三:创建或克隆节点并追加,参数是一个布尔值 true表示深层复制 false是浅层复制
document.createElement()
document.cloneNode()
六、函数
1.作用域、预解析和声明提升
预解析:解析器在执行当前作用域下的代码之前有一个预解析的过程
预解析的时候:会将变量和函数的声明提升到当前作用域的顶部 然后才执行
声明提升
①变量提升:解析器会将变量提升到作用域的最上面,但是变量的赋值不会提升
②函数提升:解析器会率先读取函数声明,并使其在执行任何代码之前可用
另外解析器会先找var再找function,因此如果变量和函数重名后找到的函数会把先找到的变量覆盖(如果代码执行后有赋值语句,该值又会把函数覆盖)
变量作用域
最外层的是全局变量
函数内的是局部变量
特殊:函数内部不加var的是全局变量
递归概念:程序调用自身的编程技巧称为递归
回调函数:函数也是一种普通的数据类型,因此函数也可以被当作参数传递,被当作参数传递的函数叫做回调函数
2.构造函数创建对象
@this和new
利用new 关键字可以声明新的对象。new 关键字可以让构造函数中this的指向改变,并让构造函数把this返回。
@构造函数
构造函数也是函数,只不过会默认返回一个对象。
@构造函数创建对象
通过构造函数创建对象更方便(不需要创建对象并返回)。更重要的是可以通过instanceof来判断实例的类型了。