cdn地址: BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
jquery地址
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
【金山文档】 Dom对象#
https://kdocs.cn/l/ceyfaHJsK57B
目录#
- DOM 树, DOM 节点, DOM 对象是什么
- 利用 DOM 对象对 DOM 节点进行增删改查操作
- 事件绑定
- 事件常见类型
- 事件对象
- 事件冒泡和事件捕获
(一) Dom树相关知识#
全称 Document Object Model, 中文名称文档对象模型, 主要用来操作页面上的元素, 对页面元素的内容, 属性和样式进行操作
- DOM 树 (见图)
- DOM 节点
- DOM 对象
- 操作DOM的js库 jQuery.js, 使用jq可以让我们操作dom变得非常方便
(二) Dom节点操作#
-
获取dom节点对象
-
获取和修改dom节点内容
-
获取和修改dom节点属性
-
获取和修改dom节点样式
1. 获取 DOM 节点对象#
原生js指的是不使用任何框架或者js库, 只使用js原本提供的功能
- 使用原生js获取dom节点对象
- 使用jq获取dom节点对象
- 原生jsdom节点对象和jq对象互想转换
- jquery对象的一些方法
01 获取节点#
document.querySeletor(); // 略
document.querySeletorAll(); // 略
document.getElementById();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">appppppppppppp</div>
<script>
var _app = document.getElementById('app');
console.log('_app: ',_app);
</script>
</body>
</html>
02 使用jq获取dom节点对象#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">appppppppppppp</div>
<div class="box">boxxxxxxxxx</div>
<ul class="" id="list">
<li class="item">1xxxx</li>
<li class="item">2xxxx</li>
<li class="item">3xxxx</li>
<li class="item">4xxxx</li>
<li class="item">5xxxx</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var $app = $('#app');
console.log('$app',$app);
var $box = $('.box');
console.log('$box',$box);
var $liList = $('#list>li');
console.log('$liList',$liList);
</script>
</body>
</html>
03 原生js dom节点对象和jquery节点对象互转#
// 只有jquery对象才可以使用jquery提供的方法, 所以有些时候需要将原生js dom对象转成jquery dom对象
- 原生转jq: $(原生dom节点对象);
- jq转原生 jq对象[0];
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">appppppppppppp</div>
<div class="box">boxxxxxxxxxx</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 原生js
var _app = document.querySelector('#app');
console.log('_app',_app);
// 把_app转为jq节点对象
var $app = $(_app);
console.log('$app',$app);
console.log('------------------')
// jq对象
var $box = $('.box');
console.log('$box',$box);
// jq转原生
var _box = $box[0];
console.log('_box',_box);
</script>
</body>
</html>
04 jquery对象相关方法#
- 获取元素的兄弟节点
- 获取元素的父节点
- 获取元素的在兄弟元素中的排列位置
- 查找元素的后代某个节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li>3.xxx</li>
<li>4.xxx</li>
<li>5.xxx</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var $first = $('ul>li:first-child');
console.log('$first',$first);
$first.text('我是第1个');
// 第一个的兄弟节点们
$first.siblings().text('我们是第一个li的兄弟们');
// 获取父节点
$first.parent().css('border','1px solid red');
// 获取$first的下标
var index = $first.index();
$first.text('我是第1个li,我的下标是'+index);
// 获取第三个元素的下标
var index2 = $('ul>li:nth-child(3)').index();
console.log(index2);
</script>
</body>
</html>
通过find查找后代元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<p>
<span class="aa">aaa</span>
</p>
<div class="item">
<i class="bb">bb</i>
</div>
<a href="#">百度</a>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 获取jq对象
var $box = $('.box');
// 获取.aa元素
var $aa = $box.find('.aa');
console.log($aa);
var $a = $box.find('a');
</script>
</body>
</html>
2. 获取和修改dom节点的内容#
// 原生dom节点获取内容(略) // 修改内容(略)
// jQuery获取和修改内容
- text()
- html()
- val()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<button>aaa</button>
</div>
<input type="text" value="1380000000000">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 获取jq对象
var $box = $('.box');
// 获取文本
var text = $box.text();
console.log('text:',text);
var html = $box.html();
console.log('html:',html);
var $input = $('input');
var value = $input.val();
console.log('value:',value);
// 修改内容
$box.find('button').text('ssssss');
$box.html(`
<li>111</li>
<li>111</li>
<li>111</li>
`);
$input.val('我爱coding');
</script>
</body>
</html>
3. 获取和修改dom节点的属性#
// 原生js获取和修改节点属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http://baidu.com">百度</a>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var _a = document.querySelector('a');
// 获取属性方法1
var href1 = _a.href;
// 获取属性方法2
var href2 = _a.getAttribute('href');
console.log('href1', href1);
console.log('href2', href2);
// 修改
_a.href = 'http://sina.com';
_a.setAttribute('href','http://souhu.com')
</script>
</body>
</html>
// jQuery获取和修改节点属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http://baidu.com">百度</a>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var $a = $('a');
// 获取属性
var href = $a.attr('href');
console.log('href',href);
// 修改属性
$a.attr('href','http://sina.com');
$a.text('新浪');
</script>
</body>
</html>
4. 获取和修改dom节点样式#
01 原生js获取节点样式(略)#
// 注: 元素.style.样式名称操作行内样式,非行内样式需要使用window.getComputedStyle来操作 // 原生js修改节点样式(略)
02 jQuery获取和修改节点样式#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
boxxxxxxxxxxxxxxxxxxx
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var $box = $('.box');
// 获取样式
var color = $box.css('color');
var fontSize = $box.css('font-size');
console.log('颜色:', color);
console.log('字体:', fontSize);
// 修改样式
$box.css('background','rgba(0,0,0,.5)');
// 链式调用
$box.css('color','#fff').css('border','1px solid red');
</script>
</body>
</html>
03 jQuery操作样式的其它方法#
- show()和hide();
- addClass();
- removeClass();
- toggleClass();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {color: red;}
</style>
</head>
<body>
<div class="box">bbbbbbbbbb</div>
<ul>
<li>1.xx</li>
<li>2.xx</li>
<li>3.xx</li>
<li>4.xx</li>
<li>5.xx</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('.box').hide();
$('.box').show();
// $('ul>li:first-child').addClass('red');
// $('ul>li:first-child').removeClass('red');
// $('ul>li:first-child').toggleClass('red');
// $('ul>li:first-child').toggleClass('red');
</script>
</body>
</html>
5. DOM节点增删#
01 原生js添加和删除节点#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li>3.xxx</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 原生js添加节点
// 1.创建节点
var _li = document.createElement('li');
// 2.给节点添加内容或样式
_li.innerText = '4.xxxx';
_li.style.color = 'red';
// 3.插入到ul里
var _ul = document.querySelector('ul')
_ul.appendChild(_li);
// 删除节点
var _second = document.querySelector('ul>li:nth-child(2)');
_second.remove();
</script>
</body>
</html>
给没有jQuery的网站添加jQuery.js
var el = document.createElement('script');
el.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js';
'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'
document.body.appendChild(el);
02. jq添加,删除,移动,克隆节点#
-
添加节点
- append,prepend: 添加到子元素
- before,after:作为兄弟元素添加
-
删除节点
$(选择器).remove();
-
移动节点
-
克隆节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li>3.xxx</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 添加子节点,append添加到父元素的底部
$('ul').append('<li>4.插入到底部</li>');
// 添加子节点,append添加到父元素的顶部
$('ul').prepend('<li>0.插入到顶部</li>');
// 添加兄弟节点
$('ul').after('<div class="box">在后面添加兄弟节点</div>');
$('ul').before('<div class="box">在前面添加兄弟节点</div>');
// 删除元素
$('ul>li:nth-child(2)').remove();
</script>
</body>
</html>
<!-- 移动和克隆节点 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li>3.xxx</li>
<li>4.xxx</li>
</ul>
<div class="box">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var $first = $('ul>li:first-child');
// 移动节点
$('.box').append($first);
// 克隆
var $last = $('ul>li:last-child').clone();
$('.box').append($last);
</script>
</body>
</html>
(三)事件绑定#
Dom事件分类#
-
DOM0级事件
-
DOM1级问题 DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容,所以没有所谓的1级DOM事件模型。
-
DOM2级事件
-
DOM3级事件
1. Dom0级事件及绑定#
DOM0级事件绑定分为两种
- 行内事件:在标签中写事件
- 元素.on事件名=函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {color: red;}
</style>
</head>
<body>
<button onclick="alert(222)">btn1</button>
<button>btn2</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var _button = document.querySelector('button:last-child');
_button.onclick = function() {
alert(333);
}
</script>
</body>
</html>
jquery事件绑定(属于二级事件)
注: jquery事件提供了this, 它指向了绑定的元素(原生的dom节点对象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li>3.xxx</li>
<li>4.xxx</li>
<li>5.xxx</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('#btn1').on('click',function() {
alert(111111);
});
$('#btn2').on('click',function() {
console.log(this);
});
$('ul>li').on('click',function() {
console.log(this);
var index = $(this).index();
alert(index);
})
</script>
</body>
</html>
练习:
- 显示和隐藏.box
- li高亮与不不高亮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {width: 300px;border: 1px solid;padding:15px;margin-top: 15px;}
.red {color: red;}
li {margin-top: 10px;cursor: pointer;}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div class="box">
我爱coding! 我爱coding! 我爱coding! 我爱coding! 我爱coding! 我爱coding!
</div>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li>3.xxx</li>
<li>4.xxx</li>
<li>5.xxx</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
</script>
</body>
</html>
2. Dom2级事件及绑定#
-
监听方法,有两个方法用来添加和移除事件处理程序:addEventListener()和removeEventListener()。 它们都有三个参数:
- 第一个参数是事件名(如click);
- 第二个参数是事件处理程序函数;
- 第三个参数如果是true则表示在捕获阶段调用,为false表示在冒泡阶段调用。
-
addEventListener() 添加事件
可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用。
注: 0级事件只能只能添加1个事件处理程序
-
removeEventListener() 移除事件
不能移除匿名添加的函数。
// Dom2级事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>btn</button>
<script>
var _button = document.querySelector('button');
_button.addEventListener('click',function() {
console.log(11111);
},false);
_button.addEventListener('click',function() {
console.log(222222);
},false);
</script>
</body>
</html>
3. Dom3级事件及绑定#
- html5新事件api, 拖拽,视频播放等
- 触摸事件 touchstart、touchmove和touchend
- 自定义事件
拖拽例子#
- 对需要拖拽的元素添加属性 draggable="true"
- 对目标容器添加dragover事件, 目的是阻止默认事件
- 对目标容器添加drop事件, 执行元素的移动操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text {
width: 200px;
height: 50px;
background-color: #f4f4f4;
line-height: 50px;
text-align: center;
}
.box {
border: 1px solid;
width: 300px;
height: 200px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="text" draggable="true">
我爱coding
</div>
<div class="box"> </div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// $('.text').on('dragstart',function() {
// console.log('开始拖动');
// });
$('.box').on('dragover',function(event) {
// 阻止默认事件
event.preventDefault()
})
$('.box').on('drop',function() {
var $text = $('.text');
// 把$text放入.box内
$(this).append($text);
})
</script>
</body>
</html>
(四) 事件常见类型#
事件名称 | 事件描述 |
---|---|
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 用户在一个 HTML 元素上移动鼠标 |
onmouseout | 用户从一个 HTML 元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onkeyup | 用户松开键盘按键 |
onkeypress | 用户按下按键 |
onload | 浏览器已完成页面的加载 |
oninput | 键盘输入事件 |
touchStart | 触摸开始 |
touchMove | 滑动 |
touchEnd | 触摸结束 |
更多事件类型
https://www.runoob.com/jsref/dom-obj-event.html
onkeypress事件
event.key可以获取按键的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text">
<script>
$('input').on('keypress',function() {
var value = $(this).val();
console.log(event.key);
if(event.key === 'Enter') {
alert('你按下了回车键');
}
})
</script>
</body>
</html>
onchange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="checkbox"><span>未选择</span>
<script>
$('input').on('change',function() {
// prop也是用来获取属性,attr获取不到属性时使用prop来获取
// next()是用来获取元素的下一个兄弟元素
var flag = $(this).prop('checked');
if(flag) {
console.log('已选择');
$(this).next().text('已选择');
} else {
console.log('未选择');
$(this).next().text('未选择');
}
})
</script>
</body>
</html>
onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
height: 200px;
width: 200px;
border: 1px solid;
padding: 50px;
}
</style>
<script>
// 页面加载完成就会自动触发onload事件, 执行onload所绑定的函数
window.onload = function () {
console.log(document.querySelector('#box'));
document.querySelector('#box').onclick = function () {
alert(222);
}
}
</script>
</head>
<body>
<div id="box">
阿斯顿发送到发送到发
</div>
</body>
</html>
<!-- jQuery也有对应的方法 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
height: 200px;
width: 200px;
border: 1px solid;
padding: 50px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#box').on('click',function() {
alert('页面加载完成')
})
})
</script>
</head>
<body>
<div id="box">
阿斯顿发送到发送到发
</div>
</body>
</html>
(五) 事件对象#
每个事件, js系统都会提供事件对象, 对象包含了很多内容
- event.type 事件类型
- event.key 触发事件的按键(针对input,keypress等键盘事件)
- event.target 事件触发的目标元素
- currentTarget 事件绑定的元素
1. event对象(事件对象)#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">btn</button>
<button id="btn2">btn2</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('#btn1').on('dblclick', function() {
console.log(event);
})
$('#btn2').on('dblclick', function(ev) {
console.log(ev);
})
</script>
</body>
</html>
2.target和currentTarget#
- event.target // 你点中的元素
- event.currentTarget // 事件绑定的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
height: 200px;
width: 200px;
border: 1px solid;
padding: 50px;
}
</style>
</head>
<body>
<div id="box">
<button>btn</button>
<span>span</span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('#box').on('click', function(ev) {
console.log('点击的元素: ',ev.target);
console.log('事件绑定的元素: ',ev.currentTarget);
})
</script>
</body>
</html>
(六) 事件冒泡和事件捕获#
1. 事件流(事件传播方式)#
- 事件捕获阶段
- 目标阶段
- 事件冒泡阶段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
height: 200px;
width: 200px;
border: 1px solid;
padding: 50px;
}
button {
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div id="box">
<button>点我</button>
</div>
<script>
var box = document.querySelector('#box');
box.addEventListener('click',function() {
alert('box被点击了');
},false);
var button = document.querySelector('button');
button.addEventListener('click',function() {
alert('button被点击了')
},false)
</script>
</body>
</html>
2. 事件冒泡应用: 事件委托#
// 原生js事件托管
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {cursor: pointer;}
ul {
border: 1px solid;
}
</style>
</head>
<body>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li>3.xxx</li>
<li>4.xxx</li>
<li>5.xxx</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.onclick = function() {
console.log(event.target);
}
</script>
</body>
</html>
// jquery事件托管
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {cursor: pointer;}
ul {
border: 1px solid;
}
</style>
</head>
<body>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li>3.xxx</li>
<li>4.xxx</li>
<li>5.xxx</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// jq事件委托写法
$('ul').on('click','li', function() {
console.log(this);
})
</script>
</body>
</html>
注: 元素js和jquery使用事件委托绑定事件的区别
原生js事件只要点击ul范围内的任意元素, 都会触发事件, 而jquery事件则只有点击li才触发事件, 会更方便
3. 阻止默认事件和阻止事件冒泡#
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="box">
<a href="http://www.baidu.com">百度</a>
</div>
<script>
document.querySelector('a').onclick = function() {
// 阻止默认事件
event.preventDefault();
// 阻止事件冒泡
event.stopPropagation();
console.log(2222);
}
document.querySelector('.box').onclick = function() {
alert('我是父元素');
}
</script>
</body>
</html>
(七) 作业:#
1. 底部 tab 栏的切换#
2. 全选, 全不选和单选#
- 点击全选, 所有的checkbox都被选中
- 其后的文字变为已选择
- 点击全不选则是相反的逻辑
- 单选的逻辑也如此
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="yes">全选</button>
<button id="no">全不选</button>
<hr>
<div class="box">
<p><span>篮球</span><input type="checkbox"><span class="text">未选择</span></p>
<p><span>足球</span><input type="checkbox"><span class="text">未选择</span></p>
<p><span>羽毛球</span><input type="checkbox"><span class="text">未选择</span></p>
<p><span>乒乓球</span><input type="checkbox"><span class="text">未选择</span></p>
</div>
<script>
// 全选
$('#yes').on('click',function() {
$(".box input").prop('checked',true);
$('.box .text').text('已选择');
})
// 全不选
$('#no').on('click',function() {
$(".box input").prop('checked',false);
$('.box .text').text('未选择');
})
// 单选
$('.box input').on('change', function() {
// 获取input元素的checkd属性
var flag = $(this).prop('checked');
console.log(flag);
if (flag) {
// checkbox后面的span标签改变文字
$(this).next().text('已选择');
} else {
$(this).next().text('未选择');
}
})
</script>
</body>
</html>
3. todo list#
- 输入内容, 回车, 添加一条清单
- 点击 x , 移除一条清单
- 不输入内容就回车, 弹出: 请先输入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 375px;
min-height: 300px;
margin: 0 auto;
padding-top: 20px;
padding: 20px 20px;
/* border: 1px solid #999; */
margin-top: 20px;
box-shadow: 2px 2px 5px #888888;
}
ul,
li {
list-style: none;
}
#inp {
width: 100%;
height: 40px;
border: none;
outline: none;
text-indent: 10px;
border: 1px solid #ebebee;
}
.item {
height: 50px;
border-bottom: 1px solid #ebebeb;
line-height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
.item button {
background-color: #ebebeb;
border: none;
padding: 5px;
color: red;
}
</style>
</head>
<body>
<div class="box">
<input type="text" name="" id="inp" autofocus="true" placeholder="请输入清单">
<ul class="list" id="list">
<li class="item "><span>● xxxx </span><button>X</button></li>
<li class="item "><span>● xxxx </span><button>X</button></li>
<li class="item "><span>● xxxx </span><button>X</button></li>
</ul>
</div>
<script>
// 使用事件委托
$('#list').on('click', 'button', function () {
// 删除button的父元素
$(this).parent().remove();
})
$('#inp').on('keypress', function () {
// 获取输入的文本
var text = $(this).val();
// 判断用户是否按下了回车键
if (event.key === 'Enter') {
// 判断输入内容是否为空
if (!text.trim()) {
alert('请输入清单');
return false;
} else {
$('#list').append(` <li class="item "><span>● ${text} </span><button>X</button></li> `);
}
}
// $(this).val('');
})
</script>
</body>
</html>
4. 小程序拖拽#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrapper {
width: 375px;
border: 1px solid;
margin: 0 auto;
min-height: 500px;
border-radius: 10px;
padding: 20px;
background-color: #28263b;
color: #fff;
position: relative;
}
.trash {
position: absolute;
right: 0;
bottom: 0;
margin: 20px;
border: 1px solid;
padding: 15px 20px;
}
.box {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
}
.box img {
width: 45px;
height: 45px;
padding: 10px 20px;
}
.fix {
padding: 0 20px;
width: 45px;
height: 0;
}
.my {
min-height: 150px;
position: relative;
/* border: 1px solid; */
}
.pop {
width: 150px;
height: 30px;
background-color: #fff;
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
line-height: 30px;
padding: 10px 20px;
border-radius: 5px;
display: none;
color: #000;
}
</style>
</head>
<body>
<div class="wrapper">
<p>最近使用的小程序</p>
<div class="box last">
<img draggable="true" src="http://static.huruqing.cn/fresh/r1.png" alt="" />
<img draggable="true" src="http://static.huruqing.cn/fresh/r2.png" alt="" />
<img draggable="true" src="http://static.huruqing.cn/fresh/r3.png" alt="" />
<img draggable="true" src="http://static.huruqing.cn/fresh/r4.png" alt="" />
<img draggable="true" src="http://static.huruqing.cn/fresh/r5.png" alt="" />
<img draggable="true" src="http://static.huruqing.cn/fresh/r6.png" alt="" />
<img draggable="true" src="http://static.huruqing.cn/fresh/r7.png" alt="" />
<img draggable="true" src="http://static.huruqing.cn/fresh/r8.png" alt="" />
<span class="fix"></span>
<span class="fix"></span>
<span class="fix"></span>
</div>
<p>我的小程序</p>
<div class="box my">
<!-- 图片放在这里 -->
<span class="fix"></span>
<span class="fix"></span>
<span class="fix"></span>
<div class="pop">松手把图标放在这里</div>
</div>
<div class="trash">
垃圾桶
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js "></script>
<script>
// 声明变量保存图片来源
var from;
// 保存拖动的图片下标
var currIndex;
// 保存已拖动图片的下标
var indexList = [];
// 绑定'拖拽开始'事件
$('.last img').on('dragstart', function () {
// 给from赋值
from = 'last';
// 获取下标
var index = $(this).index();
// 把下标存到全局变量
currIndex = index;
})
//1.对图片添加draggable=true
//2.对目标容器阻止默认事件
$('.my').on('dragover', function () {
event.preventDefault();
})
//3.绑定drop事件
$('.my').on('drop', function () {
// 判断indexList是否包含拖进来的图片下标
if (!indexList.includes(currIndex)) {
// 获取下标对应的图片
var currImg = $(`.last img:nth-child(${currIndex+1})`).clone();
// 把图片放入我的小程序
$(this).prepend(currImg);
// 把拖动进来的图片下标放入indexList
indexList.push(currIndex);
}
})
$('.my').on('dragstart','img', function () {
// 给from赋值
from = 'my';
// 获取下标
var index = $(this).index();
// 把下标存到全局变量
currIndex = index;
})
// 阻止默认事件
$('.trash').on('dragover', function () {
event.preventDefault();
})
$('.trash').on('drop', function () {
// 判断图片来源
if (from === 'last') {
// 获取拖动的图片
$(`.last img:nth-child(${currIndex+1})`).remove();
} else {
$(`.my img:nth-child(${currIndex+1})`).remove();
}
});
</script>
</body>
</html>
5. 计算总价#
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>计算商品总数和总价</title>
<style>
.title {
margin-top: 0px;
text-align: center;
}
ul,
li {
list-style: none;
margin: 0;
}
.wrapper {
border: 1px solid;
width: 400px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
box-shadow: 1px 1px 1px 5px #999;
}
.item {
display: flex;
justify-content: space-between;
}
.num1 {
margin-left: 5px;
}
.num2 {
margin-right: 5px;
}
.item p {
display: flex;
align-items: center;
}
input {
height: 20px;
width: 60px;
}
</style>
</head>
<body>
<div class="wrapper">
<h3 class="title">计算商品总数和总价</h3>
<ul id="list">
<!-- <li class="item">
<p>
<input type="button" value="-" />
<span class="num1">0</span><span class="num2">件</span>
<input type="button" value="+" />
<em>1.00元</em>
</p>
<p>
结果:
<input type="text" />
</p>
</li> -->
</ul>
<div class="item">
<p>
<span>商品总数: </span>
<input style="width: 80px" type="text" id="number" />
</p>
<p>
<span>商品总价: </span><input style="width: 80px" type="text" id="price" />元
</p>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var list = [{
id: '001',
buyNum: 1,
price: 4,
}, {
id: '002',
buyNum: 3,
price: 5,
}, {
id: '003',
buyNum: 1,
price: 6,
}, {
id: '004',
buyNum: 2,
price: 3,
}, {
id: '005',
buyNum: 1,
price: 9,
}]
// 渲染页面
function render(list) {
var str = '';
// 拼接字符串
list.forEach(function (item, index) {
str += `<li class="item">
<p>
<input type="button" value="-" />
<span class="num1">${item.buyNum}</span><span class="num2">件</span>
<input type="button" value="+" />
<em>${item.price.toFixed(2)}元</em>
</p>
<p>
结果:
<input type="text" value="${item.buyNum*item.price}"/>元
</p>
</li>`;
});
// 把拼接好的字符串插入的ul的
$('#list').html(str);
}
render(list);
// 绑定事件
$('#list').on('click', 'input', function () {
// 获取li的下标 closest('li') 找到当前元素的叫'li'祖先元素
var index = $(this).closest('li').index();
console.log(index);
if (this.value === '+') {
// 商品数量+1
list[index].buyNum += 1;
} else {
// 购买数量大于0才减一
if (list[index].buyNum > 0) {
list[index].buyNum -= 1;
}
}
// 重新渲染页面
render(list);
compute(list);
});
// 计算总数和总价
function compute(list) {
// 计算总数
var total = list.reduce(function(sum,item){
return sum + item.buyNum;
},0)
$('#number').val(total);
// 计算价
var totalMoney = list.reduce(function(sum,item){
return sum + (item.price * item.buyNum);
},0)
$('#price').val(totalMoney.toFixed(2));
}
compute(list);
</script>
</html>