2021-12-06
一、事件绑定
<body>
<button id="btn1" onclick="onBtn()">按钮1</button>
<button id="btn2">按钮2</button>
<script>
function onBtn(){
alert('事件属性触发')
}
// 获取按钮元素
var btn2Ele = document.querySelector('#btn2')
//绑定事件
btn2Ele.onclick = function(){
alert('事件绑定触发')
}
</script>
</body>
二、DOM操作css样式
三、操作元素属性1.style操作样式 <script> //行内样式 style var divEle = document.querySelector('div') divEle.style.width = '200px' // 设置元素width样式值为200px divEle.style.height = '200px' divEle.style.backgroundColor = 'red' //操作内部样式 className var h2Ele = document.querySelector('h2') // h2Ele.className = 'c1' // h2Ele.className = 'c2' //操作多个内部样式 classList h2Ele.classList.add('c1') h2Ele.classList.add('c2') h2Ele.classList.add('c3') h2Ele.classList.remove('c2') </script> 2.className操作内部样式 <script> var h2Ele=document.querySlector('h2) h2Ele.className='类名' </script> 3.添加多个样式：classList 里例如： h2Ele.class.add('c1') h2Ele.class.add('c2')操作样式=> 获取操作的元素=> style行内样式语法:标签元素.style.样式名 = 样式值
<body>
<div id="d1" a='100' class="c1"></div>
<script>
var divEle = document.querySelector('#d1') //获取id名为#d1元素
var value1 = divEle.getAttribute('class') // 操作class属性
var value2 = divEle.getAttribute('a')
console.log(value1, ' ', value2)
divEle.setAttribute('data-index',1001) //新增属性
divEle.removeAttribute('a') // 移除属性
</script>
</body>
四、DOM 节点
html标签元素 <div id="d1">元素一</div> document文档对象模型 html文档中的所有元素都可以看作是dom节点对象 整个文档 document对象 html标签 根对象 每个html标签元素 元素节点对象 内容 文本节点对象 属性 属性节点对象<!--children=> 所有子元素节点childNodes=> 所有节点包含文本节点--><body><div id="d1"><p>元素一</p><span>元素二</span><h2>标题</h2></div><script>var divRootEle = document.querySelector('#d1')var childNodeArray = divRootEle.childNodes //返回当前节点的所有子节点console.log('childNodeArray.length :',childNodeArray.length);console.log('divRootEle.firstElementChild: ',divRootEle.firstElementChild);console.log('divRootEle.firstChild: ',divRootEle.firstChild);console.log('divRootEle.lastElementChild: ',divRootEle.lastElementChild);console.log('divRootEle.lastChild: ',divRootEle.lastChild);//var spanEle = document.querySelector('span')console.log('spanEle.nextElementSibling: ',spanEle.nextElementSibling);console.log('spanEle.nextSibling: ',spanEle.nextSibling);console.log('spanEle.previousElementSibling: ',spanEle.previousElementSibling);console.log('spanEle.parentElement: ',spanEle.parentElement);</script></body>
五、DOM小结
dom节点知识点小结
1. dom节点
- 每个html标签、标签属性、内容、注释...都被看成dom节点
2. 节点分类
元素节点
属性节点
文本节点
注释节点
document文档节点
3. 节点树形结构
document
html
head body
4. 获取dom节点
- getElement系列
- queryselector系列
- 层次结构
parentElement 父节点
children 子元素节点
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling
- 非常规节点获取
document.body
获取body/head document.body/head
2021-12-07
一、动态操作节点-
使用js代码创建删除节点
- 创建节点:
createElement
createTextNode
createAttribute
- 添加节点
父节点.appendChild(子节点)
父节点.insertBefore(新子节点，原来的子节点)
- 移除节点
父节点.removeChild(子节点)
节点.remove()
- 替换节点
replaceChild
- 复制节点
cloneNode
<body>
<div>
<p>原来的节点</p>
</div>
<script>
//插入节点
function testInsertNode() {
var divEle = document.querySelector('div')
var pEle = document.querySelector('p')
//创建一个新的span节点
var spanEle = document.createElement('span') //<span></span>
var textNode = document.createTextNode('我是新元素span') //我是新元素span
spanEle.appendChild(textNode) //<span>我是新元素span</span>
divEle.insertBefore(spanEle, pEle)
}
//创建节点
function testCreateNode() {
//元素节点
var divEle = document.createElement('div')
console.log(divEle); //<div></div>
//文本节点
var textNode = document.createTextNode('js动态操作节点')
console.log(textNode);
//属性节点
var attrNode = document.createAttribute('id')
attrNode.value = 'd1' //id="d1"
divEle.appendChild(textNode) // <div>js动态操作节点</div>
console.log(divEle);
divEle.setAttributeNode(attrNode)
//获取body节点
document.body.appendChild(divEle)
}
//删除节点
function testRemoveNode() {
var divEle = document.querySelector('div')
var pEle = document.querySelector('p')
// divEle.removeChild(pEle)
pEle.remove()
}
//替换节点
function testReplaceNode() {
var divEle = document.querySelector('div')
var pEle = document.querySelector('p')
var h2Ele = document.createElement('h2')
var h2TextNode = document.createTextNode('标题')
h2Ele.appendChild(h2TextNode) // <h2>标题</h2>
//替换
divEle.replaceChild(h2Ele, pEle)
}
//复制节点
function testClone() {
var divEle = document.querySelector('div')
var newDivEle = divEle.cloneNode(true)
// <div>
// <p>原来的节点</p>
// </div >
document.body.appendChild(newDivEle)
}
// testInsertNode()
// testRemoveNode()
// testReplaceNode()
testClone()
</script>
</body>
二、节点属性
<body>
<div>元素一</div>
<ul>
1
<li>元素一</li>
2
<li>元素二</li>
3
<li>元素三</li>
4
</ul>
<script>
function testNodeAttribute() {
var divEle = document.querySelector('div')
console.log(divEle.nodeType, ' ', divEle.nodeValue, ' ', divEle.nodeName);
}
function testUlNode() {
var ulEle = document.querySelector('ul')
var nodeArr = ulEle.childNodes
console.log('nodeType' + ' ' + 'nodeValue' + ' ' + 'nodeName');
for (var i = 0; i < nodeArr.length; i++) {
var nodeItem = nodeArr[i]
console.log(nodeItem.nodeType + ' ' + nodeItem.nodeValue + ' ' + nodeItem.nodeName);
}
}
testUlNode()
// testNodeAttribute()
</script>
</body>
三、获取样式值
操作节点样式
dom.style.样式名 = 样式值
获取行间样式
dom.style.样式名
获取非行间样式值
var 样式值 = window.getComputedStyle(节点).样式名
=> 非IE浏览器
var 样式值 = dom.currentStyle.样式名
=> IE浏览器
<style>
.c1{
height: 300px;
width: 400px;
}
</style>
<body>
<!-- <div style="width:200px;">元素一</div> -->
<div class="c1"></div>
<script>
function testClassStyle(){
var divEle = document.querySelector('div')
// console.log('divEle.style.width ：', divEle.style.height);
console.log( window.getComputedStyle(divEle).height );
console.log( window.getComputedStyle(divEle).width );
}
testClassStyle()
function testSetStyle() {
var divEle = document.querySelector('div')
divEle.style.height = '100px'
}
//获取行间样式
function testGetStyle() {
var divEle = document.querySelector('div')
console.log('divEle.style.width ：', divEle.style.width);
}
// testGetStyle()
</script>
</body>
四、获取偏移量
<style>
*{padding: 0; margin: 0;}
div{
width: 100px;
height: 100px;
background-color: cadetblue;
margin: 100px;
padding: 10px;
position: relative;
}
p{
position: absolute;
width: 20px;
height: 20px;
background-color: rgb(237, 100, 225);
}
<body>
<div>
<p></p>
</div>
<script>
function testOffset(){
var divEle = document.querySelector('div')
var pEle = document.querySelector('p')
console.log( 'divEle.offsetTop ：',divEle.offsetTop, ' divEleoffsetLeft', divEle.offsetLeft );
console.log( 'pEle.offsetTop ：',pEle.offsetTop, 'pEle.setEleoffsetLeft', pEle.offsetLeft );
}
testOffset()
</script>
</body>
五、获取元素尺寸
<style>
div{
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid blue;
}
</style>
<body>
<div></div>
<script>
function testSize(){
//获取内容宽高
var divEle = document.querySelector('div')
console.log('内容宽 :', window.getComputedStyle(divEle).width );
console.log('内容宽 + padding :', divEle.clientWidth);
console.log('内容宽 + padding + border', divEle.offsetWidth);
}
testSize()
</script>
</body>
2021-12-08
一、事件对象
1.事件对象：每触发一个事件都会生成事件对象，事件对象包含对事件的描述信息，例如坐标位置等
2.获取事件对象
事件处理函数中定义一个形式e获取，
要兼容ie浏览器 window.event获取
兼容写法
e = e || window.event <body>
<button>按钮</button>
<script>
var btnEle = document.querySelector('button')
btnEle.onclick = function(e){
e = e || window.event //兼容写法
console.log(e);
}
</script>
</body>
二、获取光标位置
事件对象中获取光标位置
offsetX offsetY 相对自身事件源
clientX clientY 相对浏览器窗口
pageX pageY 相对页面
<body>
<div></div>
<script>
var divEle = document.querySelector('div')
//divEle:事件源
//onclick:事件类型
// function: 事件处理函数
divEle.onclick = function(e){
e = e || window.event //获取事件对象
// var x = e.offsetX //X轴
// var y = e.offsetY //Y轴
var x = e.clientX
var y = e.clientY
console.log('x :',x, 'y :',y);
console.log('pageX :',e.pageX, 'pageY :',e.pageY);
}
</script>
</body>
三、鼠标事件
常见鼠标事件 click：鼠标点击事件 dbclick：鼠标双击事件 contextmenu：鼠标右键单击事件 mousedown：鼠标右键按下 mouseup：鼠标左键抬起 mousemove：鼠标移动 mouseover：鼠标移入 mouseout：鼠标移出 mouseenter：鼠标移入 mouseleavr：鼠标移出四、表单事件
1.表单事件：表单提交时。默认执行表单提交事件，在跳转到action动作指定的URL页面
2.表单提交事件：submit，事件源是form表单
3.表单提交的作用：
表单验证：非空验证、密码强度验证等
4.阻止默认表单action动作：e.preventDefault()
//给表单form绑定表单提交事件
formEle.onsubmit = function (e) {
e = e || window.event //事件对象
e.preventDefault() //阻止表单默认action动作
var username = userNameInput.value
var password = passwordInput.value
if (username == '' || password == '') {
alert('用户名或密码不能为空')
}else{
//跳转提交页面
location.href = `https://www.baidu.com/?username=${username}&password=${password}`
}
}
五、焦点事件
失去焦点：onblur 获取焦点：onfocus六、键盘事件
<body>
<div>
<h2>登录界面</h2>
<button class="login-btn">登录</button>
</div>
<script>
document.onkeyup = function(e){
e = e || window.event //事件对象
var keyCode = e.keyCode || e.which //兼容firfox2.0
// ctrl + enter 13
if(e.ctrlKey && keyCode == 13){
location.href = './main.html'
}
}
</script>
</body>
2021-12-09
一、绑定事件的方式
1.属性时间绑定
<button onclick="onClick()">点击</button>
function onClick(){
alert('点击')
}
2.绑定事件
<button></button>
var btn=document.querySelector('button')
btn.onclick=(function(){
alert('点击')
})
事件绑定优缺点
优点：符合“行为、样式、结构”相分离，便于操作当事对象，方便读取事件对象
缺点：只能给一个元素注册一个事件，绑定一个事件，如果绑定两个，后一个会覆盖前一个
例：
<div>按钮</div>
var divEle = document.querySelector('div')
divEle.onclick = function(){
console.log('这是第一个事件绑定操作');
}
divEle.onclick = function(){
console.log('这是第二个事件绑定操作');
}
3.事件监听
1.事件监听三要素：事件源、事件类型、处理函数
2.语法：
事件源.addEventListener(事件类型，function(){
//处理函数
})
例：
<button></button>
var btn=document.querySelector('button')
btn.addEventListener('click',function(){
//处理函数
})
3.事件监听兼容性写法：
addEventListener：非IE7,8使用
attachEvent：IE7,8使用
4.事件监听优点：事件监听给同一个元素绑定两个事件，后一个不会覆盖前一个，会按顺序输出
注：事件绑定需加on，监听事件不需要加on
三、事件传播
1.事件传播的行为
事件冒泡：由内向外
事件捕获：有外向内
2.事件目标对象：target
兼容IE的写法：var target=e.target || e.srcElement
3.事件传播事件监听写法：事件源.addEvenListener(事件类型，function（）{函数体}，捕获true|冒泡false)，addElevenListener的第三个参数，决定了是捕获还是冒泡
4.事件传播注意点：
只会传播同类事件
只会从点击元素开始按照html的结构逐层向上元素的事件会被触发
内部元素不管有没有该事件，只要上层元素有该事件，那么上层元素的事件就会被触发
5.
四、事件对象和事件目标对象的区别
事件对象：事件触发时自动创建，可以在事件处理函数中定义一个形参e来接收
事件目标对象：事件对象的一个属性target获取，表示当前点击的事件源
五、事件委托
1.事件委托：元素自身处理的事件，委托给他的父级元素处理
2.优点：
1.减少事件绑定的数量
2.对后来动态添加的元素依然有效
3.解决动态添加的元素节点无法绑定的事件问题
4.减少事件的冗余绑定，节约了事件资源
阻止默认行为：例如 form、a标签 e.preventDefault() //非IE使用 e.returnvalue=false //IE使用
六、自执行函数
1.语法
(function(){
//函数体
arguments：在函数内部自带的变量，表示所有实参的集合，是伪数组
})()
七、this关键字
1.this关键字：表示当前对象，根据当前使用场景决定
1.在事件处理函数里：this指向事件源 2.普通函数里：this指向window对象 3.定时器里：this指向window对象 4.自执行函数里:this指向window对象 5.简单对象：this指向调用方法的引用变量的对象2.强行改变this指向
1.call：附加在函数调用后面使用，可以忽略函数本身的this指向 语法：函数名.call（要改变的this指向，要给函数传递的参数） 例：fn.call(obj,10,20,30) 2.apply 语法：函数名.apply（this指向新对象，[参数1，参数2]） 3.bind：h和前面两个不一样，就是不会立即执行函数，而是返回一个已改变了this指向的函数，返回this指向的新函数 语法：var newFn=函数名.bind(this新指向) newFn（参数1，参数2）
2021-12-10
一、JavaScript新增特性1.const let 声明函数：不能重复声明同一变量，没有变量提升（预解析），必须先声明在使用，声明变量会被代码块限制作用范围，用{}括起来就是一个代码块
2.const：只能赋值一次，称为长常量
二、箭头函数
1.箭头函数：简化声明函数写法，赋值式函数定义
2.语法：（可写形参）=>{函数体执行代码}
注：箭头函数只能简写函数表达式，不能简写声明函数
3.特殊写法：
1.函数体执行代码只有一行时，大括号可以不写
2.函数体只有一行代码并且有返回值时，大括号和return可不写
3.形参只有一个时，括号可以不写
4.this关键字：箭头函数中this指向应用上下文
5.函数默认值
<script>
const fn = (a = 10)=>{
// a = a || 10
console.log(a);
}
// fn(10)
fn()
6.解构赋值：快速获取
<script>
const obj = {
name:'jack',
age:20
}
// let name = obj.name
// let age = obj.age
let {name,age} = obj
console.log('name ',name, ' age ',age);
7.解构数组
const arr = ['jack','rose','tom']
let [a,b,c] = arr
console.log('a :',a , ' b :',b , ' c ',c);
8.展开运算符
<script>
const arr = [1,2,3,4]
// console.log(...arr);
const arr1 = [5,6]
// [1,2,3,4,5,6]
const arr2 = [...arr,...arr1]
console.log(arr2);
const obj = {
name:'jack',
age:20
}
const obj1 = {
...obj,
gender:'男'
}
console.log(obj1);
</script>
京公网安备 11010502036488号