JS学习
一、JS的组成
1.1 JavaScript语法(ECMAScript) + 页面文档对象模型(DOM) + 浏览器对象模型(BOM)
前者1 是js基础
后者2 3 是 Web APIs
二、获取元素的方法
2.1方法
document.getElementById("div1")
document.getElementsByTagName("p")
// H5新增的方法
//一个
document.querySelector("#div1")
document.querySelector("p")
document.querySelector(".header")
//数组
document.querySelectorAll("p")
2.2举例:
<div id="div1" style="border: solid red 3px">
<p>Some div2 text</p>
<p>Some div2 text</p>
</div>
document.getElementById("div1")
var div1 = document.getElementById("div1");
var div1Paras = div1.getElementsByTagName("p");
var num = div1Paras.length;
alert("There are " + num + " paragraph in #div1");
三、事件的执行
var div1 = document.getElementById("div1");
div1.onClick = function(){
//...
}
四、操作元素
// 返回元素上一个指定的属性值
element.getAttribute(attributeName);
//设置
element.setAttribute(name, value);
//H5 中 自定义的属性名 data- 开头
4.1 区别
element.属性名
element.getAttribute("属性名") : 可以获取自定义的属性名
4.2 举例
<button>Hello World</button>
var b = document.querySelector("button");
b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");
// 自定义属性名 data-
b.setAttribute("data-index","1");
//结果:
<button data-index="1">Hello World</button>
五、节点操作
为什么是 使用 节点操作:
上述中 利用DOM提供的方法获取元素,但是逻辑性不强,繁琐;
利用节点层级关系获取元素,逻辑性强 但是兼容性差;
Node.firstChild
Node.parentNode
document.getElementById("b1").nextSibling;
//返回当前节点的前一个兄弟节点,没有则返回null.
// <a><b1 id="b1"/><b2 id="b2"/></a>
document.getElementById("b1").previousSibling; // null
document.getElementById("b2").previousSibling.id; // "b1"
六 、动态创建元素节点
6.1 创建节点
document.createElement(“li”)
6.2 添加节点
node.appendChild(child)
node.inserBefore(child,指定元素);
//1、创建节点元素节点
let li = document.createElement("li");
let ul = document.querySelector("ul");
//2.1、添加节点 node.appendChild(child) 是追加元素 类似于push
ul.appendChild(li);
//2.2 node.inserBefore(child,指定元素);
let lili = document.createElement("li);
ul.inserBefore(lili,ul.children[0]);
七、删除节点
element.removeChild(child);
八、 克隆复制节点
//是否采用深度克隆,如果为 true,则该节点的所有后代节点也都会被克隆,如果为 false,则只克隆该节点本身。
var dupNode = node.cloneNode(deep);
九、注册事件 、删除事件 的两种方法
var btns = document.querySelectorAll("button");
//1.传统方式
//同一个按钮 不可以有两个function 会被最新的一个覆盖
btns[0].onclick = function(){
//...
//删除事件
btns[0].onclick = null ;
}
//2.事件侦听注册事件 addEventListener
//里面的类型是字符串 带引号 且不带on
//同一个元素 同一个事件 可以添加多个侦听器
btns[1].addEventListener("click",fn);
function fn(){
//...
btns[1].removeEventListener("click");
}
十、DOM 事件流
事件发生时会在元素节点之间按照特定的顺序传播,这个传播的过程就是DOM事件流
- 事件捕获阶段
- 冒泡阶段 :开始有具体的元素接收,然后逐级向上传播到DOM最顶层节点。
<div class="container">
<div class="container-content">
</div>
</div>
let container = document.querySelector(".container");
let content = document.querySelector(".container-content");
// 1、onclick 只有冒泡事件
container.onclick = function () {
console.log("父盒子点击");
alert("父盒子点击");
}
// 点击子盒子的时候 先触发子盒子再触发父盒子
content.onclick = function () {
console.log("子盒子点击");
alert("子盒子点击");
}
// 2、addEventListener可以有捕获阶段和冒泡阶段
// true 表示捕获阶段 先触发父盒子再触发子盒子
container.addEventListener("click", function () { alert("父盒子点击"); }, true)
content.addEventListener("click", function () { alert("子盒子点击"); }, true)
// 3、false,或者不写 是冒泡阶段 先触发子盒子再触发父盒子
container.addEventListener("click", function () { alert("父盒子点击"); })
content.addEventListener("click", function () { alert("子盒子点击"); }, false)
onclick
只有冒泡阶段addEventListener
true是捕获阶段 false是冒泡阶段- 有些事件是没有冒泡的:
onblur
onfocus
onmouseenter
onmouseleave
十一、事件对象
有事件才有事件对象
content.onclick = function (event) {
//event里面会有对应事件的信息
console.log(event);
}
(1)阻止默认行为 e.preventDefault()
content.onclick = function (e) {
//方式1 这是一个方法
e.preventDefault();
//方式2 只限于现在 传统的注册方式
return false;
}
//上述 就会阻止此方法的执行了
(2)事件类型 e.type
(3)阻止冒泡 e.stopPropagation()
content.onclick = function (e) {
//...
e.stopPropagation();
}
(4)事件委托
给父节点添加侦听器,利用事件冒泡影响每一个子节点
本来是需要获取没有li 给每个li绑定事件,但是这样子的话,影响程序性能。
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
let ul = document.querySelector("ul");
ul.onclick = function (e) {
alert("点击");
// e.target 是点击的对象 这个效果是将点击的li的文字颜色改为红色
e.target.style.color = "red";
}
十二、鼠标事件: 禁止鼠标右键菜单 禁止鼠标选中
// 禁止鼠标右键菜单
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
})
// 禁止鼠标选中
document.addEventListener("selectstart", function (e) {
e.preventDefault();
})
十三、鼠标事件
document.addEventListener("click", function (e) {
// console.log("鼠标事件:", e);
// 相对于 窗口的可视区域
console.log("clientX:", e.clientX);
console.log("clientY:", e.clientY);
// 相对于 文档的整个页面 (页面很长 有滚动条 折叠的区域也算)
console.log("pageX", e.pageX);
console.log("pageY", e.pageY);
// 相对于 电脑屏幕的
console.log("screenX", e.screenX);
console.log("screenY", e.screenY);
})
例子: 盒子跟着鼠标动mousemove
let box = document.querySelector("#box");
document.addEventListener("mousemove", function (e) {
box.style.top = e.pageY - 25 + "px";
box.style.left = e.pageX - 25 + "px";
})
十四、键盘事件
onkeyup onkeydown onkeypress
键盘按下的时候 onkeydown 和 onkeypress 触发
键盘弹起的时候 onkeyup 触发
- 按下触发的onkeypress 和 onkeydown 在键盘没有弹起的时候 一直触发
- 且在文字没有落入文本框中触发;
- onkeypress 和 onkeydown 的区别:
<1> onkeypress 不能识别ctrl shift 箭头等功能键;- 三个事件的执行顺序:
onkeydown -- onkeypress -- onkeyup
;
键盘事件对象:
event.keyCode:
- onkeydown onkeyup 都是不区分字母大小写的 a A 都是65
- onkeypress 区分字母的大小写:A 65 ; a 97 (ASCII编码);
附加
1. javascript:void(0) 或者 javascript:; 阻止链接的跳转
<a href="javascript:;"> </a>