JS实用总结（VIP典藏版）

目录

一、概念

二、JS事件

三、JS 函数

四、JS的组成部分

后期会完善丰富内容...

一、概念

URL:统一资源定位符http://www.baidu.com

URI:统一资源标识符

使用JavaScript添加页面动画效果，提供用户操作体验。

嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等

JS数据类型

基本数据类型

string：不区分字符和字符串

number:不区分整型和浮点型

boolean:布尔值(true/false)，在JS中所有值都可以视为布尔值。

undefined:未定义，一般指的是访问对象的不存在的属性，会产生此值

true:true，非零值，非空字符串，非空对象

false:false,0,空字符串，null,undefined，NaN

null：它是ECMA中遗留的一个错误

//在JS中，定义变量的关键字是var，无论是什么类型

ECMAScript (JS的核心语法标准)

js变量:JS中只有一种类型 var，可以存放【任意类型】数据

注意：如果变量未初始化，返回undefined :var vl; alert(v1);

JS运算符: == 比较的是值alert(5=='5');true

全等，比较的值和类型，全都相同才返回true；=== 这个不会自动转换:！= 不等于

if(5==='5'){alert('相等');

}else{

alert('不等'); }

4种输出方式

第一种:alert(); 向页面中弹出有个提示框!!

第二种：innerHTML : 向页面的某个元素写一段内容,将原有的东西覆盖

document.write():向页面中写内容

console.log('这是第四种输出方式输出的内容');

第一种:alert();

document.getElementById('d1').innerHTML = '新的内容';

//这种输出方式有可能覆盖页面的原有内容

document.write('这是用document.write输出的内容');

console.log('这是第四种输出方式输出的内容');

获取元素内容

获取元素doucment.getElementById ("id名称");

获取元素里面的值doucment.getElementById ("id名称").value;

得到所有tr标签var trs = document.getElementsByTagName('tr');

对所有tr标签的集合进行遍历

根据tr标签当前索引的奇偶性，设置不同的背景色 xx.style.backgroundColor='';

二、JS事件

表单提交事件：onsubmit

它所写的位置在

窗体顶端

里面，必须要有返回值。如：

窗体底端

窗体顶端

鼠标点击事件：onclick/ondblclick(双击)

它写在需要更换的标签内 如：

聚焦事件（聚焦 ：onfocus 离焦 ：onblur）

向页面指定位置输出()写在需要的位置 如：

页面加载事件：onload

写在body里面(它只能写一次) 如：

改变事件： onchange

写在需要的的标签内(当改变域的内容的时候使用此事件，常用于下拉列表)

鼠标移入移出和移动事件

移入事件： onmouseover : 当onmouseover事件发生时，记录当前行的样式名（保存在全局变量），把当前行的样式改为高亮

移出事件：onmouseout : /当onmouseout事件发生时，把当前行的样式变回之前的（把当前行的样式设置为全局量的值）

移动事件：onmousemove

注意:

trs.length数组的长度

checked="checked"选中状态已选中

三、JS 函数

区分函数类型：看function 后面有没有函数名

声明函数 function 函数名() {}

匿名函数 var eat = function() {}

扩展：【JS同名函数，只执行最后一个，与参数无关】

定时器 1.window.setInterval(函数名,毫秒数)

2.window.setInterval("函数名()",1000);

clearInterval(定时器对象) 关闭定时器

window一般可以忽略不写

四、JS的组成部分

BOM(浏览器对象模型:Browser Object Model):

Window对象（浏览器打开的窗口） 方法：

alert() 显示带有一段消息和一个确认按钮的警告窗口

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框

clearInterval() 取消由setIngerval()设置的timeout(时间);

setTimeout() 在指定的毫秒后调用函数或计算表达式

Location对象 方法：

href 设置或返回完整的URL路径 如：

History对象 方法：

DOM(文档对象模型:Document Object Model):

window.onload = function() {}延迟加载,页面加载成功之后执行

docunment.getElementsByTagName("标签名")

根据标签名获得所有的匹配对象集合，返回的是【数组】

this表示当前操作的对象,函数内部表示

(tr)this.style.backgroundColor = "red";

document文档对象

浏览器加载整个HTML文档形成Docunment对象可以访问和操作HTML文档中的所有元素

获取元素：document.getElementById()通过id属性值获取元素(整个HTML文档id位置)

document.getElementsByName()通过name属性值获得所有元素(整个HTML文档中name可能相同)

document.getElementsByClassName():根据标签的class属性值来获得所有匹配的元素(标签)，返回的是数组对象:document.getElementsByTagName()通过标签获得所有元素,数组格式

element元素对象

appendChild()给元素追加子元素

insertBefore()给当前元素追加兄弟元素

setAttribute(k,v)给元素设置属性

ele.checked表示元素是否选中,true表示选中,false没有选中

ele.checked=true;设置元素被选中声明数组格式 ：

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！

---