文章目录
js 基础
一、js 的声明和引入
1. js 的声明
格式：
在 head 标签中使用 script 标签进行 js 代码域的声明
<head>
<script type="text/javascript">
// 在此处写 js 代码
</script>
</head>
特点：
js 的代码只会作用于当前网页
2. js 的引入
格式：
在 head 标签中使用 script 标签引入外部声明好的 js 文件
<script src="相对路径" type="text/javascript" charset="utf-8"></script>
特点：
实现 js 代码的重复使用，避免代码的冗余
！注意：因为 js 在 HTML 文档中是一门单独的语言，可以声明在文档中的任意位置，一般情况下声明在 head 标签中。
二、js 中的变量
1. js 变量声明的特点：
-
js 的变量声明只有var
-
js 的变量名是严格区分大小的
-
js 中的字符串可以使用双引号也可以使用单引号
-
js 中可以声明同名变量，不会报错，后面的会将前面的声明覆盖
-
js 中的代码可以不适用分号结尾，但是为了提升代码的阅读性，建议使用分号
2. js 中的数据类型
数据类型判断关键字：typeof
number：数字类型
string：字符串类型
boolean：布尔类型
object：对象类型
null：空对象赋值，主要是和 undefined 进行区分
undefined：变量声明不赋值的情况下，默认值是undefined
！注意：在 js 代码中尽可能的给声明的变量赋初值，用来确定变量类型
3. js 中的变量类型强转
(1). 其他类型转换为 number 类型
使用方法：Number(其他类型的数据)
效果：
| 前 | 后 |
|---|---|
| string 类型的数字字符 | 对应的number数字 |
| string 非数字字符 | NaN (number类型) |
| boolean true | 1 |
| boolean false | 0 |
| object 有具体的值 | 数字 |
| object null | 0 |
(2). 其他类型转换为 boolean 类型
使用方法：Boolean(其他类型的数据)
效果：
| 前 | 后 |
|---|---|
| number 正数或负数 | true |
| number 0 | false |
| string 非空字符串 | true |
| string 空字符串 | false |
| object 具体的对象 | true |
| object null | false |
| 声明不赋值的变量 | false |
(3). js 中的特殊值
| 对应的类型 | |
|---|---|
| null | object |
| undefined | undefined |
| NaN | number |
三、 js 的运算符
1. 算数运算符
+(加法) -(减法) *(乘法) /(除法) %(余数)
使用：
number 类型和 number 类型：
全部正常运算
number 类型和 boolean 类型 ：
true转换为1 false转换为0
全部正常运算
number 类型和 string 类型 ：
正常运算：- * / %
连接作用：+
string 类型和 string 类型的数字 ：
正常运算：- * / %
连接作用：+
string 类型数字和 boolean 类型 ：
正常运算 ： - * / %
连接作用：+
！注意：在算数运算中如果两边的数据类型不是 number 的话，会使用 Number() 强转后再进行运算，字符串中的 + 符号代表的是字符串的连接符，不会运算
2. 逻辑运算符
!(非) &(逻辑与) &&(and) |(逻辑或) ||(or) (与java和c中的一致)
返回值为 1 或 0
3. 关系运算符
!=(不等) >=(大于等于) <=(小于等于) >(大于) <(小于)
返回值为 true 或 false
4. 自增运算符
++(自增1) --(自减) +=(加等) -=(减等)
5. 特殊的关系运算符
等值运算符：==
先判断类型，类型一直则直接比较，内容一致则返回 true，内容不一致则返回 false。类型不一致，则先使用Number()进行强转后再进行比较
等同运算符：===
先判断类型，类型一致则再比较内容，内容一致则返回 true ，内容不一致则返回 false ， 类型不一致则直接返回 false
四、js 的逻辑结构和循环结构
1. 单分支结构
if(判断条件){执行体}
2. 双分支结构
if(判断条件){执行体}else{执行体}
3. 多分支结构
if(判断条件){执行体}else if(判断条件){执行体}……else{执行体}
4. swicth选择结构
switch (a){
case "1":
alert("第一项选择");
break;
case "2":
alert("第二项选择");
break;
default:
alert("没有对应的选项");
break;
}
！注意：判断的变量可以是 number 类型也可以是 string 类型，但是不要混用
5. 循环结构
for(变量;条件;迭代条件){循环体}
while(循环条件){循环体}
do{循环体}while(循环条件)
五、js 的数组
1. 数组的声明
var arr = new Array();//声明一个空数组对象
arr['apple'] = '苹果'; // 字符串也可以做数组的索引，但是只能用 for-in 循环
arr['orange'] = '橘子';
var arr = new Array('苹果','橘子');//声明一个数组
var arr = new Array(length)//声明一个指定长度的数组
var arr = ['苹果','橘子']//声明数组(最常用);
！注意 ： js 中的数组声明不用指定长度，js 的数组长度是不固定的，会随着元素的数量改变而改变
2. 数组的赋值和取值
赋值：
数组名[角标] = 值; //角标可以是任意的正整数或者是0
数组可以存储任意类型的数据
取值：
数组名[角标]; //返回当前角标对应储存的值
如果角标不存在，返回 undefined
3. 数组的 length 属性
作用1 ： 数组名.length //返回当前数组的长度
作用2： 数组名.length = 新的值; //动态的改变数组的长度
！注意： length > 原有长度，则从前向后截取，最后的数据会被删除
4. 数组的遍历
普通 for 循环：
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
for-in：
for(var i in arr){
alert(i);//获取的是角标
}
5. 数组的操作
数组的合并：
arr.concat(b,c);//数组的合并
数组指定间隔符转换字符串：
var b=arr.join("-");//假如 arr 中存储1，2，3，4，5 。 则 b = "1-2-3-4-5"
数组移除最后一个元素：
var ele=arr.pop();//返回被移除的元素
数组的追加：
var ln=arr.push("lol");//追加的元素可以是一个数组，但是作为一个角标值存在，类似二维数组。返回新数组的长度
数组移除第一个元素：
var ele=arr.shift();//返回被移除的元素
数组在开始位置插入指定元素：
var a=arr.unshift("今天也是充满希望的一天");//返回新数组的长度
数组删除指定位置的元素：
var arr2=arr.splice(1,3,"a");//从数组下标1开始删除3个，在删除的位置添加 a
六、js 的函数
1. 函数的声明
方式一：
function 函数名(形参名1,形参名2……){执行体}
方式二：
var 函数名=new Function("形参1","形参2"……,"函数执行体");
此声明方式表明在 js 中函数是作为对象存在的
方式三：
var 变量名=function(形参名1,形参名2……){函数执行体}
2. 函数的参数
js 中的函数在调用时，形参可以不赋值，不会报错，默认是 undefined。
js 中的函数在调用时，形参赋值可以不全部赋值，不会报错，但是实参会依次进行赋值。
3. 函数的返回值
在 js 中如果函数有返回值则直接返回，没有返回值默认返回 undefined
！注意：js 的代码声明区域和执行区域是一起的，都是在 js 代码的代码域中
4. 函数的执行符
在 js 中函数的执行符是：()
没有小括号则函数名其实就是一个变量
加上小括号则函数会被执行
5. 函数作为实参传递
在 js 中函数是可以作为实参进行传递的
function testobj(a){
alert(a());// a 函数调用
}
var testParam=function(){
alert("我是函数参数");
}
testobj(testParam); // 传入函数名
开发中经常用的传递方式：
function testObj2(fn){ //testObj2函数在被调用的时候，实参必须是一个函数对象。
fn();
}
testObj2(function(){
alert("开发");
})
七、js 的类
1. 类的声明
function 类名(形参1，形参2……){
this.属性名1=形参1;
this.属性名2=形参2;
……
this.属性名=fn
}
2. 类的使用
var 对象名=new 类名(实参1，实参2……);
！注意： js 中类的内容只是对象的公共部分，每个对象还可以自定义的进行扩充
3. 类的“继承”
关键字：prototype
通过 prototype 关键字实现了不同对象之间的数据共享
作用：实现某个类的所有子对象的方法区对象的共享，节省内存
示例：
//声明 Person 类
function Person(name,age){
this.name=name;
this.age=age;
this.fav="唱歌";
}
//声明 User 类
function User(uname,pwd){
this.uname=uname;
this.pwd=pwd;
}
//使用 prototype ，Person “继承” User
Person.prototype=new User();
//在 User 中创建 testU 函数
User.prototype.testU=function(){alert("我是user")};
//创建一个 Person 类
var p1=new Person("张三",32);
//p1 可以直接调用 testU 函数 ： 首先在 Person 类中查找 testU ，没有找到，继续在(Person类"继承"的) User 类中查找 testU ，找到，直接调用。
p1.testU();
八、js 创建自定义对象
1. 对象的作用
用来存储整体数据
2. 原因
很多时候我们没有办法预先知道一个对象应该有哪些属性，所以只能临时的创建一个对象来自定义属性存储数据，保证数据的完整性。
3. 应用
Ajax 中会使用
4. 使用
(1). 创建自定义对象：
//方式一：
var 对象名=new Object();
对象名.属性名1=属性值1;
对象名.属性名2=属性值2;
对象名.属性名3=属性值3;
……
//方式二：
var 对象名={};
对象名.属性名1=属性值1;
对象名.属性名2=属性值2;
对象名.属性名3=属性值3;
……
(2). 一般用来存储数据，不会再自定义对象中存储函数对象。
(3). js 中的对象属性和内容是可以自定义的扩充的，不是依赖于类的声明的，类只是对象公共部分的一种声明，是为了节省代码的冗余的。
九、js 的常用对象
1. String 对象
var str=new String("abcdefg");//声明String对象存储字符串
var str2="ABCDEFG";//简写形式
//字符串大小写的转换
document.write(str.toUpperCase());//将字符串转换为大写
document.write(str2.toLowerCase());//将字符串转换为小写
//字符串的切割
var s="哈哈,嘿嘿,呵呵";
var s1=s.split(",");//按照指定的字符切割字符串，返回数组。
// s1[0]="哈哈" s1[1]="嘿嘿" s1[2]="呵呵"
//字符串的截取
var s2="abcdef";
document.write(s2.substr(1,3));//从指定的开始位置截取指定长度的子字符串
document.write(s2.substring(1,3));//从指定的开始位置和指定的结束位置截取子字符串，含头不含尾。
//查找子字符串第一次出现的角标
var s3="abcdefg";
document.write(s3.indexOf("d"));//返回指定子字符串第一次出现的角标，没有则返回-1;
2. Date 对象
var d=new Date();
document.write(d.getYear()); //返回的是1900年开始距今的年分数
document.write(d.getFullYear()); //返回的是当前的年份
document.write(d.getMonth()+1); //返回的当前月份的角标值，需要+1
document.write(d.getDate()); //返回的是当前的日期数
document.write(d.getDay()); //返回的是当前的星期数，但是周天会返回值为0;
document.write(d.getHours()); //返回当前时间的小时数
document.write(d.getMinutes()); //返回当前时间的分钟数
document.write(d.getSeconds()); //返回当前时间的秒数
document.write(d.toString()); //返回中国标准时区时间
document.write(d.toLocaleString()); //返回我们习惯上的时间
3. Math 对象
//Math在使用的时候不能new，使用Math.方法名调用即可。
//创建随机数字
alert("Math.random():"+Math.random());//返回0-1之间的随机数字，含0不含1。
alert(1000+Math.random()*9000);//返回1000-10000之间的随机数字，含1000不含10000
//向下取整
alert(Math.floor(1000+Math.random()*9000));
//向上取整
alert(Math.ceil("12.34"));
//四舍五入
alert(Math.round(12.12));
alert(Math.round(12.65));
//数值比较:求取最小值，求取最大值
alert(Math.min(12,13,5,78));//获取最小值
alert(Math.max(12,3,4,56));//获取最大值
4. Global 对象
//该对象直接使用并且不能new，也是就直接写方法名调用即可。
//使用eval将字符串转换为可执行的js代码
var str="var a=123";
eval(str);
alert(a);
//使用isNaN判断是否值NaN
alert(isNaN("123"));
//获取字符中的整数
alert(parseInt("12.34a56a"));
//获取字符中的浮点数
alert(parseFloat("12.34a56a"));
十、js 的事件机制
1. 解释
当我们的行为动作满足了一定的条件后，会触发某类事务的执行
2. 作用
主要是结合 js 的函数来使用
3. 内容
(1). 单双击事件
单击：onclick 当鼠标单击的时候会触发
双击：ondblclick 当鼠标双击的时候会被触发
(2). 鼠标事件
onmouseover 当鼠标悬停在某个HTML元素上的时候触发
onmousemove 当鼠标在某个HTML元素上移动的时候触发
onmouseout 当鼠标在某个HTML元素上移出的时候触发
(3). 键盘事件
onkeyup 当键盘在某个HTML元素上弹起的时候触发
onkeydown 当键盘在某个HTML元素上下压的时候触发
(4). 焦点事件
onfocus 当某个HTML元素获取焦点的时候触发
onblur 当某个HTML元素失去焦点的时候触发
(5). 页面加载事件
onload 当页面加载成功后触发。
！注意：
js 中添加事件的第一种方式：
在 HTML 上直接使用事件属性进行添加，属性值为所监听执行的函数
js 中的事件只有在当前 HTML 元素上有效
一个 HTML 元素可以添加多个不同的事件
一个事件可以监听触发多个函数的执行，但是不同的函数要使用分号间隔
4. 事件的选取
给合适的 HTML 标签添加合适的事件：
onchange----select下拉框
onload------body标签
单双击-------用户会进行点击动作的HTML元素
鼠标事件------用户会进行鼠标移动操作的。
键盘事件------用户会进行键盘操作的HTML元素。
5. 事件之间的冲突
栗子：单击 和 双击
当事件的触发条件包含相同部分的时候，会产生事件之间的冲突
6. 事件的阻断
当事件所监听的函数将返回值返回给事件时：
false：则会阻断当前事件所在的 HTML 标签的功能
true：则继续执行当前事件所在的 HTML 标签的功能
7. 超链接调用 js 函数
<a href="javascript:函数名()">调用js函数</a>
十一、BOM 和 DOM
1. BOM 的概念
(1). BOM 是 Browser Object Model 的简写，即浏览器对象模型
(2). BOM 由一系列对象组成，是访问、控制、修改浏览器的属性的方法
(3). BOM 没有统一的标准(每种客户端都可以自定标准)
(4). BOM 的顶层是 window 对象
(5). BOM 包含有：history、document、location、frame、navigator。BOM 包含 DOM
2. DOM 的概念
(1). DOM 是 Document Object Model 的简写，即文档对象模型
(2). DOM 用于 XHTML、XML 文档的应用程序接口(API)
(3). DOM 提供一种结构化的文档描述方式，从而使 HTML 内容使用结构化的方式显示
(4). DOM 由一系列对象组成，是访问、检索、修改 XHTML 文档内容与结构的标准方法
(5). DOM 标准是由 w3c 制定与维护，DOM 是跨平台与跨语言的
(6). DOM 的顶层是 document 对象
十二、window 对象
1. window 对象使用
window 对象不用 new ，直接进行使用即可，类似 Math 的使用方法，window 关键字可以省略不写。
2. window 对象的方法
| 方法名 | 作用 | 参数 | 返回值 |
|---|---|---|---|
| alert | 警告框，提示一个警告信息 | 无 | 无 |
| confirm | 确认框，提示用户选择一项操作(确定/取消) | 无 | 点击确定，返回 true；点击取消，返回 false。 |
| prompt | 提示框，提示某个信息的录入或者说是收集 | 无 | 点击确定，返回当前用户录入的数据，默认返回空字符串；点击取消，返回 null |
| setTimeout | 指定的时间后执行指定的函数 | 参数1：函数对象；参数2：时间，单位毫秒 | 返回当前定时器的 id |
| setInterval | 每间隔指定的时间执行指定的函数 | 参数1：函数对象；参数2：时间，单位毫秒 | 返回当前定时器的 id |
| clearTimeout | 用来停止指定的定时器 | 参数：定时器的 id | 无 |
| clearInterval | 用来停止指定的间隔器 | 参数：间隔期的 id | 无 |
| open | 打开一个子页面 | 参数1：子页面的资源(相对路径);参数2：打开方式；参数3：配置； | 返回子页面对象 |
| close | 关闭一个页面，但此方法只能关闭 open 方法打开的子页面 | 无 | 无 |
子页面调用父页面的函数：
window.opener.父页面的函数
3. window 对象的常用属性
(1). 地址栏属性：location
window.location.href = "新的资源路径(相对路径/URL)";
window.location.reload(); // 重新加载页面资源
// 按钮当作超链接使用
<input type="button" value="按钮" onclick=" location.href='要跳转的地址' "> </input>
(2). 历史记录属性：history
window.history.forward(); // 页面资源前进，历史记录的前进
window.history.back(); // 页面资源后退，历史记录后退
window.history.go(index); // 跳转到指定的历史记录资源
// 超链接当作按钮使用
<a href="javascript:history.go(1)">前进</a>
<a href="javascript:void(0)" onclick="history.go(1)">前进</a>
！注意：window.history.go(0) 相当于刷新
(3). 屏幕属性：screen
window.screen.width; // 获取屏幕的宽度分辨率
window.screen.height; // 获取屏幕的高度分辨率
(4). 浏览器配置属性：navigator
window.navigator.userAgent; // 返回由浏览器发送到服务器的用户代理报头
十三、document 对象
1. 概念
浏览器对外提供的支持 js 的用来操作 HTML 文档的一个对象，此对象封存的 HTML 文档的所有信息。
2. js 获取 HTML 元素对象
直接获取方式：
// 通过 id 返回元素对象
document.getElementById("");
// 通过 name 属性值 返回元素数组
document.getElementsByName("");
// 通过标签名 返回元素数组
document.getElementsByTagName("");
// 通过 class 属性值 返回元素数组
document.getElementsByClassName("");
间接获取方式：
//父子关系：
var showdiv=document.getElementById("showdiv"); //获取父级元素对象
var childs=showdiv.childNodes; //获取所有的子元素对象数组
//子父关系：
var inp=document.getElementById("inp"); //获取子元素对象
var div=inp.parentNode; //获取子元素的父元素对象
//兄弟关系：
var inp=document.getElementById("inp"); //先获取一个元素对象
var preEle= inp.previousSibling; //弟获取兄
var nextEle=inp.nextSibling; //兄获取弟
3. js 操作元素的属性
(1). 获取元素属性：
var att = document.getElementById(""); // 获取元素对象。 定义元素对象名为：att
元素对象名.属性名; // 返回当前属性的属性值。 （固有属性）
元素对象名.getAttribute("属性名"); // 返回自定义属性的值。（自定义属性）
(2). 修改元素属性：
var att = document.getElementById(""); // 获取元素对象
元素对象名.属性名 = 属性值; // 修改固有属性的值
元素对象名.setAttribute("属性名"，"属性值"); // 修改自定义属性的值
！注意：
尽量不要去修改元素的 id 值和 name 属性值
使用自定义方式获取固有属性内容，value 的值获取的是默认值，不能获取到实时的用户数据
4. js 操作元素的文本内容
(1). 获取元素的内容：
var div = document.getElementById(""); // 获取元素对象
元素对象名.innerHTML; // 返回当前元素对象的所有内容，包括 HTML 标签
元素对象名.innerText; // 返回当前元素对象的文本内容，不包括 HTML 标签
(2). 修改元素的内容：
var div = document.getElementById(""); // 获取元素对象
元素对象名.innerHTML = "新的值"; // 会将原有内容覆盖，并且 HTML 标签会被解析
元素对象名.innerHTML = 元素对象名.innerHTML + "新的值"; // 追加效果
元素对象名.innerText = "新的值"; // 会将原有内容覆盖，但 HTML 标签不会被解析，会作为普通文本显示
5. js 操作元素的样式
(1). js 操作样式 — style
var div = document.getElementById(""); // 获取元素对象
元素对象名.style.属性名 = "属性值"; // 添加或者是修改元素样式
元素对象名.style.属性名 = ""; // 删除元素样式
！注意： 以上操作，操作的是 HTML 标签上的 style 属性声明的样式，而不是其他 css 代码域中的样式。
(2). js 操作样式 — className
var div = document.getElementById(""); // 获取元素对象
元素对象名.className = "新的值"; // 添加类选择器样式或着修改类选择器样式
元素对象名.className = ""; // 删除类选择器样式
6. js 操作元素的文档结构
(1). 方式一: innerHTML
var div = document.getElementById(""); // 获取元素对象
元素对象名.innerHTML = 元素对象名.innerHTML + "内容"; // 增加子节点
元素对象名.innerHTML = ""; // 删除所有子节点
父节点.removeChild(子节点对象名); // 删除指定的子节点
(2). 方式二：先创建再添加
var div = document.getElementById(""); // 获取元素对象。
var ele = document.creatElement("标签名"); // 创建元素对象
元素对象名.append(ele); // 在指定的元素后添加 ele
元素对象名.appendChild(ele); // 在指定的元素后添加 ele
ele的同级元素对象名.parentNode.insertBefore(ele，ele的同级元素); // 在 ele的同级元素前添加 ele
7. js 操作 form 表单
(1). 获取 form 表单对象
var fm = document.getElementById("id值"); // 通过 id 获取 form 表单
var frm = document.name值 // 通过 name 属性值获取 form 表单
(2). 获取 form 下的所有表单元素对象集合
fm.elements; // 返回包含 fm 下的所有表单元素对象的数组
(3). form 表单的常用方法
表单对象.submit(); // 提交表单数据
(4). form 的属性操作
表单对象名.action = "新的值"; // 动态的改变数据的提交路径
表单对象名.method = "新的值"; // 动态的改变提交方式
(5). js 表单元素的通用属性
// 只读模式：
readonly = "readonly" // 不可以更改，但是数据可以提交
// 关闭模式：
disabled = "disabled" // 不可以进行任何的操作，数据不会提交
(6). js 操作表单元素
js 操作多选框、单选框：
被选中状态下在 js 中 checked 属性值为 true ，未选中状态为 false
var chkbox = document.getElementsByName("name值"); // 获取所有该 name 值的多选框元素对象，chkbox 是一个数组，包含所有的多选框选项
js 操作下拉框：
被选择的 option 对象在 js 中 selected 属性值为 true ，未选中的为 false
var sel = document.getElementById("id值"); // 获取该 id 值的下拉框元素对象
var op = sel.options; // op 是一个数组，包含所有的下拉款选项
8. js 操作表格
(1). 删除行
行对象.rowIndex // 返回行对象的角标
表格对象.deleteRow(要删除的行对象的角标);
(2). 修改单元内容
单元格对象.innerHTML = "新的内容";
行对象.cells // 返回的是一个数组，数组内包含当前行所有的单元格对象
扫一扫
599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
