js常用事件
Posted 黑面书生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js常用事件相关的知识，希望对你有一定的参考价值。
1 文档的处理
###1-1把新创建的li标签添加到ul标签里面的后面
代码块
先创建一个liele标签
var liele=document.createElement('li');
给空标签赋值
liele.innerText='哪吒';
将标签添加到ul
$('#u1').append(liele);1-2把新创建的li标签添加到ul标签里面的前面
代码块
var e1ele=document.createElement('li');
e1ele.innerText='朴树';
$('#u1').prepend(e1ele);1-3 remove()删除匹配元素
代码块
删除id=d1的标签
$('#d1').remove();
删除u1里面的li
$('#u1').empty();2 点击删除按钮，删除一行，点击添加按钮，添加一行
代码块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<button id="b1">添加</button>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>康抻</td>
<td>gay in gay out</td>
<td><button class="delete">开除</button></td>
</tr>
<tr>
<td>2</td>
<td>蝇蝇</td>
<td>用手</td>
<td><button class="delete">开除</button></td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
$("#b1").click(function () {
// 在表格的最后添加一行数据
// 1. 先有数据
var trEle = document.createElement("tr"); // trEle是一个DOM对象
// var tdEle1 = document.createElement("td");
// tdEle1.innerText = "3";
// $(trEle).append(tdEle1);
// var tdEle2 = document.createElement("td");
// tdEle2.innerText = "黄袍哥";
// $(trEle).append(tdEle2);
// var tdEle3 = document.createElement("td");
// tdEle3.innerText = "吹牛逼";
// $(trEle).append(tdEle3);
trEle.innerHTML = `
<td>3</td>
<td>黄袍哥</td>
<td>吹牛逼</td>
<td><button class="delete">开除</button></td>
`;
// 2. 追加到tbody的最后
$("tbody").append(trEle);
})
</script>
</body>
</html>3：replaceWith()替换标签
代码块
var aele=document.createElement('a');
aele.innerText='baidu';
$(aele).attr('href','http://www.baidu.com');
$('p').replaceWith(aele);4 clone克隆
代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<button class="btn">屠龙宝刀，点击就送</button>
<script src="jquery-3.4.1.min.js"></script>
<script>
$('.btn').click(function(){
<!--$(this).after($('.btn ').clone());-->
$(this).clone().insertAfter(this);
});
</script>
</body>
</html>
5 给标签绑定事件方式
6 常用的事件
7 冒泡事件
7-1 通过JS添加新的按钮，但是按钮不会产生效果
代码块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<button id="b1">点我</button>
<hr>
<button class="c1">蝇蝇</button>
<script src='../../../../../Users/hello王思雨/Desktop/jquery-3.4.1.min.js'></script>
<script>
// 1. 定义一个函数
function f() {
alert(123);
}
$("#b1").on("click", function () {
f();
});
$('.c1').click(function(){
alert(123);
});
// 利用事件冒泡的原理，进行事件委托 ，把.c1样式类的事件委托给父标签body来处理
<!--$("body").on("click", ".c1", function () {
<!-- alert("蝇蝇");-->
<!-- });-->
</script>
</body>
</html>操作js代码添加新的BUTTON按钮
代码块
var btn=document.createElement('button');
btn.innerText='进入';
$(btn).addClass('c1');
$('body').append(btn);
7-2 通过冒泡添加新的按钮。此时新的按钮也会应用之前的样式生效。
代码块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<button id="b1">点我</button>
<hr>
<button class="c1">蝇蝇</button>
<script src='../../../../../Users/hello王思雨/Desktop/jquery-3.4.1.min.js'></script>
<script>
// 1. 定义一个函数
function f() {
alert(123);
}
$("#b1").on("click", function () {
f();
});
// 利用事件冒泡的原理，进行事件委托 ，把.c1样式类的事件委托给父标签body来处理
$("body").on("click", ".c1", function () {
alert("蝇蝇");
});
</script>
</body>
</html>8： stopPropagation()阻止事件向上传递。
当我们给夫标签添加点击事件，点击子标签的时候也会出现绑定事件，点击的时候，会一层一层往上找，逐个执行点击事件。stopPropagation()可以阻止向上传播。
代码块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<div id="d1">
<p id="p1">
<span id="s1">span</span>
</p>
</div>
<script src='../../../../../Users/hello王思雨/Desktop/jquery-3.4.1.min.js'></script>
<script>
$("#d1").click(function () {
alert("div");
});
$("#p1").click(function () {
alert("ppp")
});
$("#s1").click(function (e) {
alert("sss");
// 阻止事件向上级传递
e.stopPropagation();
})
</script>
</body>
</html>以上是关于js常用事件的主要内容，如果未能解决你的问题，请参考以下文章