文章目录
一、DOM
JS操作网页的编程接口,全称为“文档对象模型”(Document Object Model)。
它给文档(结构树)提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问,以改变文档的结构,样式和内容。
作用:将网页转为一个JS对象,从而可以用脚本进行各种操作(比如增删内容)。
1.节点
DOMd的最小组成单位,分为:
节点类型 | 值 | 对应常量 |
---|---|---|
文档节点(document):整个HTML文档 | 9 | Node.DOCUMENT_NODE |
元素节点(element):html标签 | 1 | Node.ELEMENT_NODE |
属性节点(attr):标签属性 | 2 | Node.ATTRIBUTE_NODE |
文本节点(text):文本内容(空格与回车也是) | 3 | Node.TEXT_NODE |
文档类型节点(DocumentType) | 10 | Node.DOCUMENT_TYPE_NODE |
注释节点(Comment):注释 | 8 | Node.COMMENT_NODE |
文档片断节点(DocumentFragment) | 11 | Node.DOCUMENT_FRAGMENT_NODE |
2.Node类型
DOM Level 1 描述了名为 Node 的接口,这个接口是所有 DOM 节点类型都必须实现的。Node 接口在
JavaScript中被实现为 Node 类型,在除 IE之外的所有浏览器中都可以直接访问这个类型。在
JavaScript中,所有节点类型都继承 Node 类型,因此所有类型都共享相同的基本属性和方法。 属性
- .nodeType 返回一个整数值,表示节点类型
- .nodeName 返回节点纯大写名称
- .nodeValue 返回字符串,表示当前节点本身的文本值,该属性可读写只有文本,注释,属性节点有文本值
- .textContent 返回当前节点和所有后代节点的文本内容
- .nextSibling 返回最近的弟弟节点,若没则null
- .previousSibling 返回最近的哥哥节点,若没则null
- .parentNode 返回父节点(元素,文档,文档片段节点)
- .parentElement 返回父元素节点,若无则null
- .firstChild 返回第一个孩子节点,若无则null
- .lastChild 返回最后一个孩子节点,若无则null
- .childNodes 返回当前节点所有子节点 类数组对象,NodeList(length)
- .children 返回当前节点子元素节点
方法(要被父节点调用)
- .appendChild(要增加的节点) 增加节点
- .insertBefore(要插入的节点,参考节点) 插入节点
- .removeChild(要删除的节点) 删除节点
- .replaceChild(替换的节点,被替换的节点) 替换节点
- .cloneNode( [true] ) 克隆节点默认是false浅克隆, true深克隆
什么是深克隆,什么是浅克隆
1.深克隆指的是既克隆节点的样式,还克隆节点内容
2.浅克隆指的是只克隆节点的样式
<body>
<div id="one">
我是一个div
<!-- 注释 -->
<span>行内元素</span>
</div>
<div id="two">我是第二个div</div>
<script>
// 1.nodeType 返回节点类型 返回一个整数值 文档节点 返回9
console.log(document.nodeType); //9
// 获取div 通过id获取标签
var div1 = document.getElementById('one');
console.log(div1); //<div id="one">
console.log(div1.nodeType,'元素节点'); //1 元素节点
console.log(div1.attributes.id.nodeType,'属性节点'); //2 元素节点
/**
* 2.nodeName 返回节点纯大写名称
* 3.nodeValue 只返回文本节点 属性节点 注释节点
*/
var div1 = document.getElementById('one');
console.log(document.body.nodeName); //BODY
console.log(div1.firstChild.nodeValue); //我是一个div(可能把空格和换行也返回)
/**
* 4.textContent 返回元素内部所有后代元素文本内容
*/
var div1 = document.getElementById('one');
console.log(div1.textContent) // 我是一个div 行内元素
// 5.nextSibling获取同级节点后一个节点
//previousSibling获取同级节点前一个节点
var div1 = document.getElementById('one');
var div2 = document.getElementById('two');
console.log(div1.nextSibling,'获取后一个节点'); //<div id="two"> "\n " 获取后一个节点 (空格与换行也算节点)
console.log(div2.previousSibling,'获取前一个节点'); //<div id="one"> "\n " 获取前一个节点
// 6.parentNode 返回当前的父节点
console.log(div1.parentNode) //<body>
// 7.parentElement 返回当前节点父元素节点
console.log(div1.parentElement); //<body>
// 7.返回第一个孩子节点和最后一个孩子节点
console.log(document.body.firstChild); //#text "\n "
console.log(document.body.lastChild); // <script>
// 8.childNodes 返回当前节点所有子节点 类数组对象 NodeList(length)
console.log(div1.childNodes); //NodeList(5) [ #text, <!-- 注释 -->, #text, span, #text ]
console.log(Array.isArray(div1.childNodes)); //false
// 如果将类数组对象转为数组
console.log(Array.from(div1.childNodes)); //Array(5) [ #text, <!-- 注释 -->, #text, span, #text ]
console.log([...div1.childNodes]); //Array(5) [ #text, <!-- 注释 -->, #text, span, #text ]
// 获取所有元素节点
var res = Array.from(div1.childNodes);
var arr = res.filter(function(item){
return item.nodeType === 1
});
console.log(arr); //Array [ span ]
// children 属性可以获取当前节点的子元素节点
console.log(div1.children); //HTMLCollection { 0: span, length: 1 }
</script>
</body>
<script>
/**
* 以下方法只能由父元素调用
* 新增一个元素节点
* appendChild
*/
// 创建一个节点 createElement();
var div = document.createElement('div');
// 给元素 设置文本内容 innerHtml innerText
div.textContent = 'four';
document.body.appendChild(div);
/**
* 插入节点 insertBefore(要插入的节点,参考节点)
*/
var div = document.createElement('div');
div.textContent = 'four';
// // 获取参考节点
console.log(document.body.children, '获取当前元素所有子元素节点');
var two = document.body.children[1];
document.body.insertBefore(div, two);
/**
* 替换节点 replaceChild(替换的节点,被替换的节点)
*/
var div = document.createElement('div');
div.textContent = 'four';
var one = document.body.children[0];
document.body.replaceChild(div, one);
/**
* 删除节点 removeChild(要删除谁)
*/
var two = document.body.children[1];
document.body.removeChild(two);
</script>
</body>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>我是块级元素</div>
<script>
var div = document.querySelector('div');
// 克隆节点 cloneNode(true/false) 默认是false 浅克隆 true深克隆
var newNode = div.cloneNode(true);
document.body.appendChild(newNode);
/**
* 什么是深克隆,什么是浅克隆
* 1.深克隆指的是既克隆节点的样式,还克隆节点内容
* 2.浅克隆指的是只克隆节点的样式
*/
</script>
</body>
3.Document类型
Javascript通过使用Document类型表示文档。在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。document对象是window对象的一个属性,因此可以直接调用。HTMLDocument继承自Document。
属性
- .documentElement 获取html根元素
- .body 获取body标签
- .title 获取选项卡标题
- .URL 获取文档url
- .domain 获取域名
- .doctype 获取文档头信息
- .referrer 获取页面来源
- .forms 获取页面中所有form标签
- .images 获取页面中所有img标签
- .links 获取页面中所有的a标签 只能获取带有href属性
方法
- document.getElementById(id) 通过元素id来查找元素
- document.getElementsByTagName(tagname) 通过标签名查找
- document.getElementsByClassName(classname) 通过类名查找
- document.getElementsByName(name属性) 通过name属性获取标签
- document.querySelector() 返回第一个css选择器匹配到的元素
- document.querySelectorAll() 返回所有css选择器匹配到的元素
- document.createElement(element) 添加元素
- .textContent 获取元素内部内容
- .innerHTML 获取元素内部内容
- .innerText 获取元素内部内容
- document .write() 写入文本/html表达式/js代码
- document.documentElement.scrollTop 滚动条距顶部的距离(整数)
获取元素内部内容方式以及区别?
- 1.textContent 保留代码格式 只能获取文本内容
- 2.innerHTML 保留代码格式 可以识别代码片段 v-html
- 3.innerText 去除前后空格 中间多个空格会被解析为一个空白
<body>
<form action=""></form>
<form action=""></form>
<form action=""></form>
<img src="" alt=""><img src="" alt=""><img src="" alt="">
<a ></a><a href=""></a><a href=""></a>
<script>
// 1.获取html根元素
console.log(document.documentElement); //<html lang="en">
// 2.获取body标签
console.log(document.body); //<body>
// 3.获取选项卡标题
console.log(document.title); //document类型
// 4.获取文档url
console.log(document.URL); //file:///D:/111/Study/ShiXunQianDuan/JavaScript/Day11/2-document%E7%B1%BB%E5%9E%8B.html
// 5.获取域名
console.log(document.domain,'获取域名'); //<empty string> 获取域名
// 6.获取文档头信息
console.log(document.doctype); //<!DOCTYPE html>
// 7.获取页面来源
console.log(document.referrer,'获取页面来源'); //<empty string> 获取页面来源
// 8.获取页面中所有form标签
console.log(document.forms); //HTMLCollection { 0: form, 1: form, 2: form, length: 3 }
// 9.获取页面中所有img标签
console.log(document.images); //HTMLCollection { 0: form, 1: form, 2: form, length: 3 }
// 10.获取页面中所有的a标签 只能获取带有href属性
console.log(document.links); //HTMLCollection { 0: a, 1: a, length: 2 }
</script>
</body>
获取元素
<body>
<div id="one" class="one">我是第一个div</div>
<div>我是第二个div</div>
<div name="username">我是第三个div</div>
<input type="text" name="username">
<script>
/**
* querySelector 返回第一个css选择器匹配到的元素
* querySelectorAll 返回所有css选择器匹配到的元素
*/
console.log(document.querySelector('div')); //<div id="one" class="one">
console.log(document.querySelector('#one')); //<div id="one" class="one">
console.log(document.querySelector('.one')); //<div id="one" class="one">
console.log(document.querySelectorAll('div')); //NodeList(3) [ div#one.one, div, div ]
//getElementById() 通过id获取元素
console.log(document.getElementById('one'),'获取id为one元素'); //<div id="one" class="one"> 获取id为one元素
//getElementsByClassName 通过类名获取元素
console.log(document.getElementsByClassName('one')); //(类数组对象) HTMLCollection { 0: div#one.one, length: 1, … }
//通过标签名获取元素
console.log(document.getElementsByTagName('div'),'通过标签名获取元素'); //HTMLCollection { 0: div#one.one, 1: div, 2: div, length: 3, … } 通过标签名获取元素
// getElementsByName 通过name属性获取标签
console.log(document.getElementsByName('username')); //NodeList [ div, input ]
</script>
</body>
读取文本内容
<body>
<div id="parent"> 我是 块级元素
<div> 我是块级元素 </div>
</div>
<script>
/**
* 获取元素内部内容方式以及区别? *******************
* 1.textContent 保留代码格式 只能获取文本内容
* 2.innerHTML 保留代码格式 可以识别代码片段 v-html
* 3.innerText 去除前后空格 中间多个空格会被解析为一个空白
*/
var parent = document.getElementById('parent');
console.log(parent.textContent); //我是 块级元素 我是块级元素
console.log(parent.innerHTML); //我是 块级元素 <div> 我是块级元素 </div>
console.log(parent.innerText); //我是 块级元素 我是块级元素
// 向文档写入标签或者文本
document.write('<h1>一级标题</h1>');
</script>
</body>
滚动条下滑到一定距离跳出顶部导航
<style>
*{
margin: 0;
padding: 0;
}
#one{
height: 300px;
background-color: red;
}
#two{
height: 100px;
background-color: pink;
display: none;
position: absolute;
width: 100%;
top: 200px;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div style="height: 5000px;"></div>
<button>回退一个页面</button>
<script>
window.onscroll = function(){
var two = document.getElementById('two');
// 获取滚动条滚动位置
var scrollTop = document.documentElement.scrollTop;
if(scrollTop>=60){
two.style.display = 'block';
two.style.position = 'fixed';
two.style.top = '0';
}else{
two.style.display = 'none';
}
}
</script>
</body>
4.Element类型
Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对象。
属性
-
.attributes 返回一个与该元素相关的所有属性的集合。
-
.classList 返回该元素包含的 class 属性的集合。
-
.className 获取或设置指定元素的 class 属性的值。
-
.clientHeight 返回元素内部的高度,包含内边距,但不包括水平滚动条、边框和外边距。
-
.clientWidth 返回该元素内部的宽度,包括内边距,但不包括垂直滚动条、边框和外边距。
-
.clientTop 返回距上边界的高度。
-
.clientLeft 返回距左边界的宽度。
-
.tagName 返回标签名。
-
.textContent 获取元素内部内容
-
.innerText 返回内部文本内容。
常用方法
- .innerHTML 设置或获取 HTML 语法表示的元素的后代。
- .attribute 修改属性值
- .getAttribute(“属性名”) 返回指定属性值
- .setAttribute(“属性名”,“属性值”) 设置属性值
- .style.property 改变样式
<body>
<div id="one" class="first one">块级元素</div>
<script>
var one = document.getElementById('one');
// 返回元素属性组成的集合
console.log(one.attributes); //NamedNodeMap(5) [ id="one", class="first one", title="我是div的title", flag="我是自定义属性", style="width: 100px; height: 100px; background-color: pink; font-size: 20px;" ]
// 返回属性类名组成列表 类数组对象
console.log(one.classList); //DOMTokenList [ "first", "one" ]
// 修改元素类名
// one.className = 'new';
// 返回元素类名
console.log(one.className); //first one
console.log(one.clientHeight, '获取元素内部高度'); //18 获取元素内部高度
console.log(one.clientWidth, '获取元素内部宽度'); //700 获取元素内部宽度
// 修改元素内部内容 innerText 识别代码片段 解析字符串中标签
one.innerText = '<h1>段落标签</h1>';
//获取属性getAttribute('属性名')
console.log(one.getAttribute('id')); //one
//给元素设置属性 setAttribute('属性名','属性值')
one.setAttribute('title', '我是div的title');
// 设置自定义属性
one.setAttribute('flag', '我是自定义属性');
// 给元素或者标签设置css样式
one.style.width = '100px';
one.style.height = '100px';
one.style.backgroundColor='pink';
one.style.fontSize = '20px';
</script>
</body>
5.Text类型
- .length文本长度
- .appendData(text) 追加文本
- deleteData(起始索引,num) 删除文本
- insertData(起始索引,text) 插入文本
- replaceData(起始索引,num,text) 替换文本
- splitText(起始索引) 从起始索引位置将文本节点一分为二
- document.createTextNode(text) 创建文本节点
- substringData(起始索引,num) 从起始索引位置提取
<body> <div> <!-- 我是注释 --> </div> <script> // 创建文本 var TextNode = document.createTextNode('hello world'); var div = document.querySelector('div'); // 添加文本 TextNode.appendData('hi'); // 插入文本 beginIndex '插入的字符' TextNode.insertData(0,'dom'); // 替换文本 beginIndex count '替换字符' TextNode.replaceData(0,5,'我被替换了'); // 删除文本 参数:beginIndex count TextNode.deleteData(0,5); div.appendChild(TextNode); console.log(TextNode.nodeType); //3 console.log(div.childNodes[1].nodeType); //8 // 判断节点类型 nodeType document9 注释节点8 element节点1 属性节点2 文本节点3 </script>
6.事件机制
JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
事件三要素:
1.事件源:给谁绑定事件
2.事件类型:单击 双击 鼠标移入 移出…
3.事件处理程序:单击做什么事情 以函数形式赋值
6.1事件流
事件流分为 3 个阶段:先进行事件捕获, 达到目标元素 ,进行事件冒泡
6.1.1事件冒泡
从具体元素触发事件从内向外依次触发 直到document对象
下面代码冒泡顺序:
- div#inner
- div#center
- div#outer
- body
- html
- document
阻止事件冒泡:event.stopPropagation();
注意:如果点击方法时需要同时传递其他参数和event,直接传递event这个单词即可
οnclick="test(123,event)"
target和currentTarget区别?
target就是触发事件目标元素
currentTarget当前正在执行事件的元素
<style>
.outer{
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
padding: 50px;
box-sizing: border-box;
}
.center{
width: 200px;
height: 200px;
background-color: pink;
padding: 50px;
box-sizing: border-box;
}
.inner{
width: 100px;
height: 100px;
/* 渐变色 线性渐变 */
background-image:linear-gradient(red,orange,cyan);
}
</style>
</head>
<body>
<div class="outer">
<div class="center">
<div class="inner"></div>
</div>
</div>
<script>
var outer = document.querySelector('.outer');
var center = document.querySelector('.center');
var inner = document.querySelector('.inner');
// 给outer绑定事件
outer.onclick = function(){
// alert('outer')
console.log(event,'事件对象'); //click { target: div.outer, buttons: 0, clientX: 247, clientY: 106, layerX: 247, layerY: 106 } 事件对象
console.log(event.target,'事件目标源'); //<div class="outer"> 事件目标源
console.log(event.currentTarget,'当前正在执行事件元素') //<div class="outer"> 当前正在执行事件元素
}
// 给center绑定事件
center.onclick = function(){
// alert('center')
console.log(event.target,'事件目标源'); //<div class="center"> 事件目标源
console.log(event.currentTarget,'当前正在执行事件元素') //<div class="center"> 当前正在执行事件元素
} //因为没有阻止冒泡,所以继续输出outer的输出结果
// 给inner绑定事件
inner.onclick = function(){
// alert('inner')
console.log(event.target,'事件目标源'); //<div class="inner"> 事件目标源
console.log(event.currentTarget,'当前正在执行事件元素'); //<div class="inner"> 当前正在执行事件元素
// 阻止事件向上冒泡
event.stopPropagation();//因为阻止了冒泡,所以控制台不会输出center和outer的点击事件
}
</script>
6.1.2事件捕获
从不具体元素从外向内依次触发事件 直到到达最具体元素
以下代码捕获顺序:
- document
- html
- body
- div
<style>
.outer{
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
padding: 50px;
box-sizing: border-box;
}
.center{
width: 200px;
height: 200px;
background-color: pink;
padding: 50px;
box-sizing: border-box;
}
.inner{
width: 100px;
height: 100px;
/* 渐变色 线性渐变 */
background-image:linear-gradient(red,orange,cyan);
}
</style>
</head>
<body>
<div class="outer">
<div class="center">
<div class="inner"></div>
</div>
</div>
<script>
var outer = document.querySelector('.outer');
var center = document.querySelector('.center');
var inner = document.querySelector('.inner');
function handler1(){
alert('我是outer')
}
function handler2(){
alert('我是center')
}
function handler3(){
alert('我是inner')
}
outer.addEventListener('click',handler1,true);//弹出outer
center.addEventListener('click',handler2,true);//弹出outer,center
inner.addEventListener('click',handler3,true);//弹出outer,center,inner
</script>
6.2DOM0/2事件处理程序
dom0级事件dom2级事件区别?
1.dom0级事件绑定 元素.on事件类型=function(){}
2.dom0级事件不可以追加同一类型的事件, 后面事件的会覆盖前面的
3.解绑直接 元素.οnclick=null;
+
1.dom2级事件绑定事件使用 元素.addEventListener(“事件类型”,事件处理程序,true/false) ,true:捕获时执行,false:冒泡时执行
2.dom2级事件可以追加同一类型事件,依次执行
3.dom2级事件解绑使用 removeEventListener(事件类型,函数)
4.dom2级事件可以控制事件在捕获或者冒泡阶段执行
<body>
<button>点击我</button>
<script>
var btn = document.querySelector('button');
// dom0级事件绑定 元素.on事件类型 = 事件处理程序
// dom0级同一类型事件不可以追加 后面事件的会覆盖前面的
btn.onclick = function(){
alert('我被点击了')
};
btn.onclick = function(){
alert('我第二次被点击了')
};
// dom0级事件解绑
btn.onclick = null;
// DOM2级事件
//addEventListener(事件类型,事件处理程序,[true]表示在事件捕获阶段执行,默认false表示事件在冒泡阶段执行 )
function handler(){
alert('第一次触发')
}
function handler1(){
alert('第二次触发')
}
btn.addEventListener('click',handler,false);
btn.addEventListener('click',handler1,false);
// dom2级事件解绑 removeEventListener(事件类型,具名处理程序)
btn.removeEventListener('click',handler); //解绑了之后就没第一次触发了
</script>
</body>
6.3事件对象
在 DOM 中发生事件时,所有相关信息都会被收集并存储在一个名为 event 的对象中。这个对象包含了一些基本信息,比如导致事件的元素、发生的事件类型,以及可能与特定事件相关的任何其他数据。事件官网
- 注意:event 对象只在事件处理程序执行期间存在,一旦执行完毕,就会被销毁。
阻止默认事件发生: event.preventDefault();
<body>
<form action="text.php">
<input type="submit" value="提交">
</form>
<a href="https://sdfbsdbnf">页面跳转</a>
<script>
var input = document.querySelector('input');
var a = document.querySelector('a');
input.onclick = function(){
// 阻止元素的默认行为
event.preventDefault()
}
a.onclick = function(){
event.preventDefault()
}
</script>
</body>
6.4事件委托
什么是事件委托/事件代理
- 只指定一个事件处理程序 就可以管理某一类型的事件
- 将本应该绑定给子元素事件绑定父元素代理
事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素)来处理。
也就是:利用冒泡的原理,(可以只使用一个事件处理程序来管理一种类型的事件),把事件加到父级上,通过判断事件来源的子集,执行相应的操作。
优点:减少事件的执行,减少浏览器重排和重绘,优化页面性能,可以给新增元素绑定事件
//不同元素采用相同样式
<script>
// 延迟代码执行 页面加载完毕后再执行
window.onload = function () {
var ul = document.querySelector('ul');
console.log(ul, '头部获取');
}
</script>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 给子元素绑事件(会导致后加孩子没有样式效果)
// var lis = ul.children; //children获取元素所有子元素节点
// console.log(lis,'获取子元素节点');
// for(var i=0;i<lis.length;i++){
// lis[i].onclick = function(){
// this.style.backgroundColor = 'red';
// }
// }
// 给父元素绑定事件
ul.onclick = function () {
console.log(event.target, '事件对象');
event.target.style.backgroundColor = 'red';
}
var newLi = document.createElement('li');
newLi.innerHTML = '我是新增li';
ul.appendChild(newLi);
</script>
</body>
//不同元素采用不用样式
<body>
<ul>
<li id="one">第一个li标签</li>
<li id="two">第二个li标签</li>
<li id="three">第三个li标签</li>
</ul>
<script>
// var one = document.getElementById('one');
// var two = document.getElementById('two');
// var three = document.getElementById('three');
// one.onclick = function(){
// this.innerHTML = 'hello html'
// }
// two.onclick = function(){
// this.innerHTML = 'hello css'
// }
// three.onclick = function(){
// this.innerHTML = 'hello js'
// }
//将li的事件代理给ul
var ul = document.querySelector('ul');
ul.onclick = function () {
// console.log(event.target)
// 获取点击的某一个li元素
var target = event.target;
switch (target.id) {
case 'one':
target.innerHTML = 'hello html';
break;
case 'two':
target.innerHTML = 'hello css';
break;
case 'three':
target.innerHTML = 'hello js';
break;
default:
target.innerHTML = '我是li标签';
}
}
</script>
</body>
6.5事件类型
6.5.1用户界面
- .onload 延迟触发
- .onselect 文本框选择字符触发
- .onresize 窗口被缩放时触发
- .onscroll 滚动条滚动触发
- document.documentElement.scrollTop 滚动条距顶部的距离(整数)
- .oninput 监听输入框值事件
6.5.2焦点事件
- .onfocus 获取焦点(不冒泡)
- .onfocusin 获取焦点(冒泡)
- .onblur 失去焦点(不冒泡)
- .onfocusout 失去焦点(冒泡)
6.5.3鼠标事件和鼠标滚轮事件
- .onclick 单机
- .ondblclick 双击
- .onmousedown 按下任意鼠标键
- .onmouseup 释放鼠标触发
- .onmouseenter 从元素外部移到内部时触发
- .onmouseleave 从元素内部移到外部时触发
- .onmousemove 在元素上移动时触发
- .onmouseout 从一个元素移到另一个元素时触发
- .onmouseover 从元素外部移到内部时触发
- .onmousewheel 滚轮触发
6.5.4键盘事件与输入事件
- .onkeydown 按下,持续按会重复触发
- .onkeypress 按下并产生字符,持续按会重复触发
- .onkeyup 释放按键触发
- .addEventListener(’ textInput ',函数) j监听输入框事件
输入事件只有一个,即 textInput。这个事件是对 keypress
事件的扩展,用于在文本显示给用户之前更方便地截获文本输入。textInput
会在文本被插入到文本框之前触发。当用户按下键盘上的某个字符键时,首先会触发 keydown 事件,然后触发 keypress 事件,最后触发
keyup 事件。
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<input type="text">
<div>我是一个div</div>
<!-- <div style="height: 5000px;"></div> -->
<script>
var input = document.querySelector('input');
//1.select 当选择输入框字符时候触发 火狐不支持
input.onselect = function () {
console.log(window.getSelection().toString(), '我被触发了');
}
//2.当页面发生缩放时候触发
window.onresize = function(){
console.log(window.outerWidth,window.outerHeight)
}
//3.滚动事件 scroll
window.onscroll = function () {
// console.log(window.pageYOffset,'获取距离上方位置')
console.log(document.documentElement.scrollTop, '获取距离上方位置')
}
//4.监听输入框值事件
input.oninput = function () {
console.log(event.target.value, '输入框输入的值')
}
//5. 聚焦事件 focus
input.onfocus = function () {
this.style.backgroundColor = 'red'
}
// 6.失焦事件 blur
input.onblur = function () {
// this.style.backgroundColor = 'blue';
}
/**
* 鼠标事件
* mouseenter 鼠标移入
* mouseleave 鼠标移除
* mousemove 鼠标一直移动
* mousedown
* mouseup
* mousewheel
* click
* dbclick
*/
var div = document.querySelector('div');
div.onmouseenter = function () {
console.log('鼠标移入');
}
div.onmouseleave = function () {
console.log('鼠标移出');
}
div.onmousemove = function () {
console.log('鼠标一直移动');
}
div.onmousedown = function () {
console.log('鼠标按下');
}
div.onmouseup = function () {
console.log('鼠标抬起')
}
div.onmousewheel = function () {
console.log('鼠标滚轮');
}
div.ondblclick = function () {
console.log('鼠标双击');
}
/**
* 键盘事件
* keydown 键盘按下事件
* keyup 键盘抬起事件
* keypress 键盘持续按下事件
*/
input.onkeydown = function () {
console.log(event.keyCode, '键盘keyCode我被按下了');
}
input.onkeyup = function () {
console.log('键盘抬起');
}
input.onkeypress = function () {
console.log('键盘持续按下事件');
}
input.addEventListener('textInput', function (event) {
console.log(event.data,'00000');
})
</script>
</body>
二、BOM
浏览器对象模型(BOM,Browser Object Model)
1.window对象
BOM的核心。window 对象在浏览器中有两重身份,一个是ECMAScript 中的 Global 对象,另一个就是浏览器窗口的 JavaScript 接口。
窗口
- screenLeft和screenTop 窗口相对于屏幕的x和y坐标(火狐不支持)
- screenX和screenY 窗口相对于屏幕的x和y坐标(ie不支持)
- pageXOffset 设置或返回当前页面相对于窗口显示区左上角的x位置
- pageYOffest 设置或返回当前y页面相对于窗口显示区左上角的y位置
- .resizeTo(num,num) 控制窗口打开宽高
- .moveTo(num,num) 控制窗口打开位置 x,y
- .close() 关闭窗口
- innerWidth 页面视图宽度
- innerHeight 页面视图高度
- outerWidth 浏览器窗口宽度
- outerHeight 浏览器窗口高度
- screen.width 屏幕总宽度(像素)
- screen.height 屏幕总高度(像素)
- screen.availWidth 可用深度
- screen.availHeight 可用高度
- screen.colorDepth 颜色深度
- screen.pixelDepth 颜色分辨率
<script>
var name = 'zhangsan';
var sayName = function () {
console.log(this.name);
}
console.log(window.name);//zhangsan
sayName(); //zhangsan
window.sayName();//zhangsan
console.log(window.innerHeight);//706
console.log(window.innerWidth);//716
console.log(window.outerWidth);//727
console.log(window.outerHeight);//824
</script>
系统对话框
- alert() 警告框
- confirm() 确认框
- prompt() 提示框
<script>
// 弹框
alert('我是一个弹框');
// 确认框
var res = confirm('您确定吗');//返回值true或者false
console.log(res);
if(res){
console.log('删除成功')
}else{
console.log('取消删除')
}
// 提示框
var res = prompt('请输入您的姓名');
console.log(res);
</script>
</body>
window.open()
- window.resizeTo(num,num) 新窗口宽高
- window.moveTo(num,num) 新窗口位置(x,y)
- window.close(); 关闭连接
- window.open(URL,name,specs,replace) 打开链接
- URL:可选,打开指定url,若无则开新空白窗口
- name:可选
_blank 加载到新窗口,默认
_parent加载到父框架
_self 替换当前页面
_top 替换任何可加载的框架集
name 窗口名称
specs
可选。一个逗号分隔的项目列表。支持以下值:
hannelmode=yes|no|1|0 | 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器 |
---|---|
directories=yes|no|1|0 | 是否添加目录按钮。默认是肯定的。仅限IE浏览器 |
fullscreen=yes|no|1|0 | 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window,还必须在影院模式。仅限IE浏览器 |
height=pixels | 窗口的高度。最小.值为100 |
left=pixels | 该窗口的左侧位置 |
location=yes|no|1|0 | 是否显示地址字段.默认值是yes |
menubar=yes|no|1|0 | 是否显示菜单栏.默认值是yes |
resizable=yes|no|1|0 | 是否可调整窗口大小.默认值是yes |
scrollbars=yes|no|1|0 | 是否显示滚动条.默认值是yes |
status=yes|no|1|0 | 是否要添加一个状态栏.默认值是yes |
titlebar=yes|no|1|0 | 是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes |
toolbar=yes|no|1|0 | 是否显示浏览器工具栏.默认值是yes |
top=pixels | 窗口顶部的位置.仅限IE浏览器 |
width=pixels | 窗口的宽度.最小.值为100 |
- replace:
true:url替换浏览历史中的当前条目
false:url在浏览历史中创建新条目
<body>
<button>打开页面</button>
<button>关闭窗口</button>
<script>
var btn1 = document.querySelector('button');
var btn2 = document.getElementsByTagName('button')[1];
btn1.onclick = function(){
// 打开一个链接 一个页面
w = window.open('https://baidu.com','_blank','width=600px,height=600px');
console.log(w,'窗口对象');
// 控制新窗口打开宽高
w.resizeTo(400,400);
// 控制窗口打开位置 x y
w.moveTo(200,200);
}
btn2.onclick = function(){
// 关闭窗口
w.close();
}
</script>
</body>
2.location对象
提供了与当前窗口中加载的文档有关的信息,还提供一些导航功能。
属性
- .host 服务器名称和端口号
- .hostname 不带端口号的服务器名称
- .href 当前加载页面的完整URL
- .pathname URL的目录和文件名
- .port URL中指定的端口号
- .protocol 页面使用的协议
- .search URL的查询字符串。这个字符串以问号开头
方法
- location.assign(url) 打开页面,并在浏览记录中生成一条记录。
- location.replace(url) 替换页面。结果会导致浏览器位置改变,但不会在历史记录中生成新记录。
- location.reload( [true] ) 刷新当前显示的页面。默认false表示以最有效方式重新加载,可能从缓存中直接加载。true表示强制从服务器中重新加载
<body>
<button>跳转页面</button>
<button>替换页面</button>
<button>刷新页面</button>
<button>前进下一个历史记录栈页面</button>
<script>
console.log(location,'加载当前窗口文档相关信息,提供导航功能');
console.log(location === window.location); //true
console.log(location === document.location); //true
console.log(window.location === document.location); //true
var btn1 = document.body.children[0];
var btn2 = document.body.children[1];
var btn3 = document.body.children[2];
var btn4 = document.body.children[3];
btn1.onclick = function(){
// 页面跳转 并且会在浏览器产生一条历史记录
location.assign('./4-网易严选滚动.html')
}
btn2.onclick = function(){
// 页面替换 将页面替换为页面 不会在浏览器产生一条历史记录
location.replace('./4-网易严选滚动.html')
}
btn3.onclick = function(){
// 刷新页面 true/false true表示请求服务器资源 false请求浏览器缓存
location.reload(true);
}
btn4.onclick = function(){
// history.forward();// 前进到下一个历史记录栈
history.go(1)// 前进一个下一个历史记录页面
}
console.log(history.length);
</script>
3.history对象
- history.length 返回历史列表中的网址数(注意:Internet Explorer和Opera从0开始,而Firefox、Chrome和Safari从1开始。)
- history.back() 加载 history 列表中的前一个 URL
- history.forward() 加载 history 列表中的下一个 URL
- history.go() 加载 history 列表中的某个具体页面,负数表示向后跳转,正数表示向前跳转。
4.计时器(间歇与超时调用)
javascript是单线程语言,但是可以通过超时值和间歇时间来调度代码在特定时刻执行。
-间歇调用(重复执行)
- setInterval(执行代码,毫秒时间)
- clearInterval(); 清除计时器
-超时调用(执行一次)
- setTimeout(执行代码,毫秒时间)
- clearTimeout(); 清除计时器
//间歇调用可用于动态显示时间
/**
* 间歇调用 setInterVal
* 参数:函数 间隔时间
* 每隔间隔时间函数执行一次 返回值是id
* 取消间歇调用clearInterval(id)
*/
var id = setInterval(function(){
console.log('我被调用了')
},1000);
// // 取消间歇调用
clearInterval(id);
console.log(id);
var div = document.querySelector('div');
div.innerHTML = new Date().toLocaleString();
setInterval(function(){
div.innerHTML = new Date().toLocaleString()
},1000)
//超时调用:在1秒后执行输出语句
/**
* 超时调用
* 超过wait时间后执行函数一次 wait单位毫秒
* setTimeout(函数,wait) 定时器
* 返回一个定时器id
* 取消超时调用 clearTimeout(id)
*/
var id = setTimeout(function(){
console.log('我是超时调用')
},2000);
// // 取消超时调用
clearTimeout(id);
console.log(id);
三、Ajax
console.log(1);
setTimeout(function(){
console.log(2)
},0);
console.log(3);
//1 3 2
//而不是123,因为此处涉及事件循环机制。js是一门单线程语言,同一时间只能做一件事情,当他遇到这种异步耗时的任务时不会立刻执行,而是先处理主线程的事情,执行完毕后再回头执行队列当中的任务
- 异步JavaScript和XML,结合HTML、XML、CSS和服务器进行通信和数据交互得一种方法
- 可以动态更新局部数据不需要刷新页面。
Ajax的四个步骤
<body>
<script>
// 1.创建请求实例
var xhr = new XMLHttpRequest();
// console.log(xhr);
// 2.打开一个连接 open(method(请求方式),url(请求路径))
xhr.open('get','http://121.199.0.35:8888/index/carousel/findAll');
// 3.发送请求
xhr.send();
// 4.监听响应
xhr.onreadystatechange = function(){
// xhr.readyState ===4表示请求发送完成 xhr.status===200表示请求发送成功
if(xhr.readyState ===4&&xhr.status===200){
// 获取请求实例返回得响应数据
// console.log(xhr.response);
// 服务器返回的数据格式是json字符串 需要转为js对象 JSON.parse
var res = JSON.parse(xhr.response);
console.log(res);
res.data.forEach(function(item){
// item ---> {id,name,introduce,url}
var div = document.createElement('div');
var img = document.createElement('img');
document.body.appendChild(div);
document.body.appendChild(img);
div.innerHTML = item.name +'-'+ item.introduce;
img.src = item.url;
img.style.width = '150px';
})
}
}
</script>
</body>
get请求(有参)
get发送体在链接之后
<body>
<script>
// 1.创建XMLHttpRequest请求实例
var xhr = new XMLHttpRequest();
var params = {
page:1,
pageSize:10
};
// 将js对象转为查询字符串 ?page=1&pageSize=10
var parseObj = Qs.stringify(params);
// console.log(parseObj);
// 2.打开一个链接
xhr.open('get','http://121.199.0.35:8888/index/article/pageQuery?'+parseObj);
// 3.发送请求
xhr.send();
// 4.监听响应
xhr.onreadystatechange = function(){
if(xhr.readyState ===4 && xhr.status===200){
// console.log(xhr.response);
var res = JSON.parse(xhr.response);
// console.log(res);
res.data.list.forEach(function(item){
// item---> {title:"",content:""}
var dt = document.createElement('dt');
var dd = document.createElement('dd');
dt.innerHTML = item.title;
dd.innerHTML = item.content;
document.body.appendChild(dt);
document.body.appendChild(dd);
})
}
}
</script>
</body>
post请求
post请求体在发送请求中
json请求
<body>
<script>
// 1.创建XMLHttpRequest请求实例
var xhr = new XMLHttpRequest();
var form = {
username:'admin2',
password:123321
}
// 2.打开一个连接
xhr.open('post','http://121.199.0.35:8888/user/login');
// 设置请求头数据格式为json格式
xhr.setRequestHeader('Content-Type','application/json')
// 3.发送请求
xhr.send(JSON.stringify(form));
// 4.监听响应
xhr.onreadystatechange = function(){
if(xhr.readyState ===4 && xhr.status===200){
console.log(JSON.parse(xhr.response))
}
}
</script>
</body>
表单请求
<body>
<script>
// 1.创建XMLHttpRequest请求实例
var xhr = new XMLHttpRequest();
// 2.打开一个连接
xhr.open('post','http://121.199.0.35:8888/baseUser/saveOrUpdate');
var params = {
username:"狗蛋123",
password:123321
}
// 将js对象转为表单格式数据(查询字符串)传给后端
var formObj = Qs.stringify(params);
// 设置请求头格式为表单格式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 3.发送请求
xhr.send(formObj);
// 4.监听响应
xhr.onreadystatechange = function(){
if(xhr.readyState ===4 && xhr.status===200){
console.log(JSON.parse(xhr.response))
}
}
</script>
</body>