JavaScript

文章目录

ECMAscriptBOM 浏览器对象模型Dom 文档对象模型小结

ECMAscript

js引入方式

Script标签中编写通过script标签引入（当前标签无法再编辑js代码）在页面中直接编写javascript 例：οnclick=“javascript:alert(1)” 尽量不用

js基本语法

js数据类型为弱类型，声明时无需指定数据类型，赋值时根据值决定类型。 var num = 10 ; - 运算符 与java大致一致 == 比较值 === 比较值和类型 - 条件语句 循环语句 与java一致 js中变量类型 Number 数字类型String 字符串类型Boolean 布尔类型Undefined 未定义或未初始化类型Null 表示空对象 一般作为对象类型的初始值Object 复合类型 包含js中的各种对象 类型转换函数 parseInt():字符串转换为整数 parseFloat():字符串转换为浮点数 toString()：返回字符串 注意：小数相加时会丢失精度 如0.1+0.2 需要取位数 使用toFixed（位数）

函数定义

function 函数名（参数列表）{ //执行的代码 return xxx; }

var 函数名 = function(){ //执行的代码 }

js事件

onclick 鼠标点击 button 块元素onmouseover 鼠标经过 块元素onmouseout 鼠标移出 。。。onfocus 获取焦点 输入框onblur 失去焦点 。。。onchange 内容改变 select 输入框onkeyup 键盘弹起 输入框onload 加载结束 bodyonsubmit 表单提交 form

元素上加事件

οnchange=“myCopy()”

事件绑定 window.οnlοad=function(){ document.getElementById(“myBtn”).οnclick=function(){ console.log(“运行了111”); } }

οnmοuseοver=“changeBg(‘red’,this,‘2’)” this 表示发生动作的元素

获取元素

document.getElementById(“checkPhoneSpan”)value 表单元素的value属性innerHTML 双标签中的内容 可以解析html代码 //.innerText 双标签中的内容 不能解析html代码 style.xxx 获取或者修改元素的某个样式src 改变图片

BOM 浏览器对象模型

history对象 .back() .forward() .go()

location对象 .href 属性 浏览器地址栏 默认使用get方式传递 相对路径 绝对路径 项目相对根路径 .reload() 刷新当前页面

document对象 .getElementById("") html中 id不要重复 会影响js中元素的获取 .getElementsByTagName("") .getElementsByClassName("") .getElementById("").getElementsByClassName("") 获取元素数组

open() close() 打开、关闭窗口

定时函数 setInterval(函数,毫秒数) setTimeOut(函数,毫秒数) 通过setInterval返回值获取任务号 taskid var taskid =setInterval(函数,毫秒数) 清除任务时使用 clearInterval(taskid);

setInterval(“xxx()”,毫秒数) setInterval(fucntion(){},毫秒数)

Dom 文档对象模型

DOM(文档对象模型)提供了添加、移动、改变或移除结构文档的方法和属性。

获取元素节点 getElementById():返回对拥有指定id的第一个对象的引用 getElementsByTagName():返回带有指定名称的对象集合 getElementsByName():返回带有指定名称的对象集合

根据节点层次关系获取节点（属性 不是方法） parentNode：返回节点的父节点 childNodes：返回子节点集合,childNodes[i] firstElementChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 lastElementChild： 返回节点的最后一个子节点 nextElementSibling：下一个节点 previousElementSibling：上一个节点

获取操作节点属性

getAttribute() 获取某个节点的属性值 节点对象.getAttribute( “属性名” );

setAttribute() 设置某个节点的属性值 节点对象.setAttribute( “属性名”, “属性值” );

或者直接 元素.属性名

DOM动态操作相关方法 createElement() 创建元素 appendChild() 追加元素 insertBefore() 在某元素前追加元素 cloneNode(bol) 复制元素 removeChild() 删除元素

如果外边包含有双标签 通常可以直接把双标签中的内容当做字符串处理

document.getElementById("myul").innerHTML+='<li id="myli"><input type="password" /> </li>';

dom操作表格 table 二维表 .rows .cells [[11,11,11,11],[22,22,22,22],[33,33,33,33]] insertRow(idx) 添加行 insertCell(idx) 新增单元格（列） deleteRow(idx) 删除行

js中常用对象

String IndexOf 查找指定字符 subString 截取字符串 Substr 截取字符串 Split 分割 toUppercase 转大写Math Ceil 向上取整 Floor 向下取整 Round 四舍五入 Random 伪随机数 [0-1)Date new Date(xxxx) 获取年月日时分秒。。。。。 Array []; 可以放任意格式数据 可以随意扩容 Lenght 数组长度 方法 Join() 通过特定字符拼成字符串 Sort() 排序 Push() 尾部添加元素 Pop() 尾部删除元素 Shift() 头部删除元素 Unshift() 头部添加元素

小结

html中通用属性 id 为js服务 定位元素 name 表单元素加name 不加表单默认不传递数据 js也可以通过name获取元素 class 为css服务 css中定位元素 js中也可以使用 style 行内编辑样式 优先级最高

js中常用属性 .value 表单元素的值 .innerHTML 双标签中的内容 .style.xxx 修改元素的样式 .className 操作class 谨慎使用 通过.获得元素的属性 .disabled 禁用 .checked checkbox选中 .selected select的option选中

做页面效果时，应明确： 1.由谁触发 2.什么事件 3.发生什么事（什么元素 操作什么属性）