JavaScript 是⼀种客户端脚本语⾔。 JavaScript 通常被直接嵌⼊ HTML ⻚⾯,由浏览器解释执⾏ JavaScript 是⼀种解释性语⾔(就是说,代码执⾏不进⾏预编译)。 特点:弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征) JavaScript语⾔中包含三个核⼼:ECMAScript基本语法、DOM、BOM
1 使⽤ 标签
2 外部 JavaScript:
3内联JavaScript处理器:
1 输出
window.alert() 弹出警告框 document.write() ⽅法将内容写到 HTML 页面中 innerHTML 写⼊到 HTML 元素
console.log() 写⼊到浏览器的控制台
2 变量
由字⺟、数字、下划线、$符号组成, (name也不可以 系统中有name这个变量为"") 不能以数字开头 不能是关键字和保留字,例如:for、 if、while。 区分⼤⼩写 最好驼峰命名法 var name = 'wangwu', age = 25; 使用var声明
3 注释
// /* */
4 数据类型
使⽤typeof操作符获取基本数据类型 遇到引用类型的话 处理的就是对象
7函数
三种定义方法:
在函数代码中,使⽤特殊对象 arguments arguments是⼀个对象,是⼀个伪数组,arguments[索引]---->实参的值 arguments.length--->是实参的个数
隐式全局变量: 没有使⽤var声明的变量,就叫隐式全局变量,在函数外可以获取到。
8常用内置函数
DOM:文档对象模型(Document Object Model),又称为文档树模型
节点 在HTML当中一切都是节点(node)。 每一个HMTL标签都是一个元素节点(标签)。 标签中的文字则是文字节点。(文本) 标签的属性是属性节点。(属性)
DOM节点的获得
1)通过 id 找到 HTML 元素 document.getElementById("demo");
标签=document.getElementById(“demo”); 通过ID获得标签 他的返回值是一个标签,可以直接使用。获得属性值,设置属性。 2)通过标签名找到 HTML 元素 document.getElementsByTagName("div");
标签数组= document.getElementsByTagName(“div”); 通过标签名获得标签数组 3)通过类名找到 HTML 元素 document.getElementsByClassName("a");
DOM节点的操作 节点的操作都是函数或者方法。
创建节点 常用: document.createElement("标签名");
插入节点 使用方法: 父节点.appendChild(); 父节点.appendChild(新节点); 父节点的最后插入一个新节点
使用方法:父节点.insertBefore(要插入的节点,参考节点); 父节点.insertBefore(新节点,参考节点)在参考节点前插入;
如果参考节点为null,那么将在节点最后插入一个节点。 删除节点 用法:用父节点删除子节点。 父节点.removeChild(子节点);必须指定要删除的子节点
节点自己删除自己: 不知道父级的情况下,可以这么写:node.parentNode.removeChild(node)
复制节点 ( oldNode.cloneNode(true) ) 新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点
复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点) 节点属性(节点.属性) 获取:getAttribute(名称)、节点.属性、节点[“属性”]。 设置:setAttribute(名称, 值) 删除:removeAttribute(名称)
改变HTML内容 document.write() 可用于直接向 HTML 输出流写内容。 document.getElementById(id).innerHTML=new HTML
改变 HTML 样式 node.style.property=new style
事件三要素:
常用的事件: onabort 图像的加载被中断。 onblur 元素失去焦点。 onchange 域的内容被改变。 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onerror 在加载文档或图像时发生错误。 onfocus 元素获得焦点。 onkeydown 某个键盘按键被按下。 onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseup 鼠标按键被松开。 onreset 重置按钮被点击。 onresize 窗口或框架被重新调整大小。 onselect 文本被选中。 onsubmit 确认按钮被点击。 onunload 用户退出页面。
注册事件: 1 element.事件 例: var btn = document.getElementsByTagName('button')[0]; btn.onclick= function(){ } 2.addEventListener element.addeventListener(“事件”,“function”);
移除事件 1.element.onclick = null; 2.removeEventListener
浏览器对象模型 window对象 window对象是JavaScript中的顶级对象 所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法 可以省略window 常用方法: window.open(url,target,param) url 要打开的地址 target新窗口的位置 _blank _self _parent(父框架) param 新窗口的一些设置 新窗口.moveTo(5,5) 移动到指定的位置 新窗口.moveBy(200,200) 相对新窗口移动指定像素 新窗口.resizeTo() 把窗口的大小调整到指定的宽度和高度。 返回值,新窗口的句柄 window.close() 关闭窗口 循环执行(等待时间过去之后执行) var timerId = setInterval(code,interval); clearInterval(timerId); 定时执行(立刻执行) var timerId = setTimeout(code,interval); clearTimeout(timerId);
location对象
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。 kk 获取URL kk="URL" // 跳转到指定页面 hash 返回url中#后面的内容,包含# host 主机名,包括端口 hostname 主机名 pathname url中的路径部分 protocol 协议 一般是http、https search 查询字符串 location.assign() 改变浏览器地址栏的地址,并记录到历史中 设置kk 就会调用assign()。一般使用kk 进行页面之间的跳转 location.replace() 替换浏览器地址栏的地址,不会记录到历史中 location.reload() 重新加载 Navigator 对象 Navigator 对象包含有关浏览器的信息。 appCodeName 返回浏览器的代码名 appName 返回浏览器的名称 appVersion 返回浏览器的平台和版本信息 cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值 platform 返回运行浏览器的操作系统平台 userAgent 返回由客户机发送服务器的user-agent 头部的值
History 对象 History 对象包含用户(在浏览器窗口中)访问过的 URL。 可通过 window.history 属性对其进行访问。 后退 history.back() history.go(-1) 0是刷新 前进 history.forward() history.go(1)