<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
<!-- <h1>花花</h1>
<h2>花花</h2>
<h3>花花</h3>
<h4>花花</h4>
<h5>花花</h5>
<h6>花花</h6> -->
<button id="button">添加列表项</button>
<ul class="list">
<li class="item1">1克里</li>
<li class="item2">2克里</li>
<li class="item3">3克里</li>
<li class="item4">4克里</li>
<li class="item5">5克里</li>
<li class="item6">6克里</li>
<li class="item7">7克里</li>
<li class="item8">8克里</li>
<li class="item9">9克里</li>
<li class="item10">10克里</li>
</ul>
<!-- after在这里追加的元素 -->
<button>按钮</button>
</body>
<script>
// dom元素：添加，更新，删除
// 1.append（）元素的结尾插入指定的元素
// $(".list").html("<span>小明明天一觉睡到天明</span>");//将ul清空替换成“小明明天一觉睡到天明”
// 选择父元素，在他里面追加一个元素
// $(".list").append('<li class="item">11黑执事大人</li>');
//jq追加元素
$("button").click(function () {
// $(".list").append('<li class="item">11黑执事大人</li>');
// js追加元素
// let li = document.createElement("li");
// li.textContent="item111";
// li.style.color="red";
// document.querySelector(".list").append(li);
// $(".item4").css("color","red");//选择中item4改颜色为红色
// console.log($("h1").next());
// console.log($("h1").nextAll());
// 2.appendTo（）元素的结尾插入指定的元素
// appendTO里面是选择器，而要追加的内容在前面，与append位置相反
// 3.prepend元素的开头插入指定的内容
// $(".list").prepend("<li class='item'>黑执事大人13</li>")
// 4.prependTo元素的开头插入指定的元素
// $("<li class='item' style='color:red;'>黑执事大人14</li>").prependTo(".list");
// 5.after()元素后插入指定的内容
// 选中标签，在标签后面追加一个元素
// $(".list").after("<li style='color:red;'>黑执事大人20</li>");
// 6.before()元素之前插入指定内容
// $(".list").before("<li>黑执事大人21</li>");
// 7.insertAfterr() 元素之后插入html标记
// 需要把追加的内容，写在前面。inserAfterr这个方法是选择器
$("<p style='color:bule;'>格格巫</p>").insertAfter(".list")
// 8.insertBefore()在元素之前插入html标记
$("<p style='color:bule;'>格格巫</p>").insertBefore(".list")
// 展示了4种追加位置
// 内：尾部
// 内：头部
// 外：后面
// 外：前面
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
<!-- <h1>花花</h1>
<h2>花花</h2>
<h3>花花</h3>
<h4>花花</h4>
<h5>花花</h5>
<h6>花花</h6> -->
<button id="button">添加列表项</button>
<ul class="list">
<li class="item1">1克里</li>
<li class="item2">2克里</li>
<li class="item3">3克里</li>
<li class="item4">4克里</li>
<li class="item5">5克里</li>
<li class="item6">6克里</li>
<li class="item7">7克里</li>
<li class="item8">8克里</li>
<li class="item9">9克里</li>
<li class="item10">10克里</li>
<p>这是p标签</p>
<p>这是p标签</p>
<p>这是p标签</p>
</ul>
<!-- after在这里追加的元素 -->
<button>按钮</button>
</body>
<script>
// dom元素：添加，更新，删除
// 9.replaceWith() 用新的内容替换匹配元素
$("button").click(function(){
// 也可以先删除，在追加，但是是2步
// 现在修改，就一步完成
// $("p").replaceWith("<li class='item'>黑执事大人</li>");
// 10.replaceAll()用匹配的元素替换所有匹配的元素
// $("<li class='item'>喵咪桑</li>").replaceAll("p");
// 11.remove()删除元素，包括文本和子节点
// $("ul").remove();
// $("li").remove();
// $("p").remove();
// document.querySelector("li").remove();
// document.querySelector("p").remove();
// document.querySelector("item").remove();
});
</script>
</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.js"></script>
<style>
* {
text-align: center;
font-size: 20px;
}
.title {
text-align: center;
}
.width {
width: 1200px;
}
tr {
height: 50px;
}
button {
width: 600px;
color: #fff;
background-color: #28a745;
border-color: #28a745;
margin-top: 30px;
}
</style>
</head>
<body>
<h3 class="title" id="titleId">php中文网名单</h3>
<table class="width" id="tableId" border="1" align="center" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>天蓬</td>
<td>tianpeng@php.cn</td>
<td>13854381111</td>
<td>安徽</td>
<td>合肥</td>
<td>40</td>
</tr>
<tr>
<th>2</th>
<td>欧阳克</td>
<td>ouyangke@php.cn</td>
<td>13854382222</td>
<td>安徽</td>
<td>马鞍山</td>
<td>40</td>
</tr>
<tr>
<th>3</th>
<td>灭绝师太</td>
<td>miejue@php.cn</td>
<td>13854383333</td>
<td>安徽</td>
<td>滁州</td>
<td>18</td>
</tr>
<tr>
<th>4</th>
<td>裘千丈</td>
<td>qiuqianzhang@php.cn</td>
<td>13854384444</td>
<td>安徽</td>
<td>蚌埠</td>
<td>40</td>
</tr>
<tr>
<th>5</th>
<td>钟老师</td>
<td>zhonglaoshi@php.cn</td>
<td>13854385555</td>
<td>安徽</td>
<td>淮南</td>
<td>30</td>
</tr>
<tr>
<th>6</th>
<td>小编1</td>
<td>xiaobian1@php.cn</td>
<td>13854386661</td>
<td>安徽</td>
<td>安庆</td>
<td>18</td>
</tr>
<tr>
<th>7</th>
<td>小编2</td>
<td>xiaobian2@php.cn</td>
<td>13854386662</td>
<td>安徽</td>
<td>亳州</td>
<td>18</td>
</tr>
<tr>
<th>8</th>
<td>小编3</td>
<td>xiaobian3@php.cn</td>
<td>13854386663</td>
<td>安徽</td>
<td>淮北</td>
<td>18</td>
</tr>
<tr>
<th>9</th>
<td>小编4</td>
<td>xiaobian4@php.cn</td>
<td>13854386664</td>
<td>安徽</td>
<td>阜阳</td>
<td>18</td>
</tr>
<tr>
<th>10</th>
<td>小编5</td>
<td>xiaobian5@php.cn</td>
<td>13854386665</td>
<td>安徽</td>
<td>六安</td>
<td>18</td>
</tr>
</tbody>
</table>
<button id="up">上一页</button>
<button id="per">下一页</button>
</body>
<script>
$("#up").click(function(){
let html="";
html +="<tr>";
html +="<th>10</th>";
html +="<td>小编5</td>";
html +="<td>xiaobian5@php.cn</td>";
html +="<td>13854386665</td>";
html +="<td>安徽</td>";
html +="<td>六安</td>";
html +="<td>18</td>";
html +="</tr>";
// $("#up").html(html);
// $("#per").append(html);
$("tbody").html(html);
// $("#per").append(html);
});
$("#per").click(function(){
let html="";
html +="<tr>";
html +="<th>10</th>";
html +="<td>小编6</td>";
html +="<td>xiaobian5@php.cn</td>";
html +="<td>13854386665</td>";
html +="<td>安徽</td>";
html +="<td>六安</td>";
html +="<td>18</td>";
html +="</tr>";
$("tbody").html(html);
});
</script>
</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.js"></script>
<style>
* {
text-align: center;
font-size: 20px;
}
.title {
text-align: center;
}
.width {
width: 1200px;
}
tr {
height: 50px;
}
button {
width: 600px;
color: #fff;
background-color: #28a745;
border-color: #28a745;
margin-top: 30px;
}
</style>
</head>
<body>
<h3 class="title" id="titleId">php中文网名单</h3>
<table class="width" id="tableId" border="1" align="center" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>天蓬</td>
<td>tianpeng@php.cn</td>
<td>13854381111</td>
<td>安徽</td>
<td>合肥</td>
<td>40</td>
</tr>
<tr>
<th>2</th>
<td>欧阳克</td>
<td>ouyangke@php.cn</td>
<td>13854382222</td>
<td>安徽</td>
<td>马鞍山</td>
<td>40</td>
</tr>
<tr>
<th>3</th>
<td>灭绝师太</td>
<td>miejue@php.cn</td>
<td>13854383333</td>
<td>安徽</td>
<td>滁州</td>
<td>18</td>
</tr>
<tr>
<th>4</th>
<td>裘千丈</td>
<td>qiuqianzhang@php.cn</td>
<td>13854384444</td>
<td>安徽</td>
<td>蚌埠</td>
<td>40</td>
</tr>
<tr>
<th>5</th>
<td>钟老师</td>
<td>zhonglaoshi@php.cn</td>
<td>13854385555</td>
<td>安徽</td>
<td>淮南</td>
<td>30</td>
</tr>
<tr>
<th>6</th>
<td>小编1</td>
<td>xiaobian1@php.cn</td>
<td>13854386661</td>
<td>安徽</td>
<td>安庆</td>
<td>18</td>
</tr>
<tr>
<th>7</th>
<td>小编2</td>
<td>xiaobian2@php.cn</td>
<td>13854386662</td>
<td>安徽</td>
<td>亳州</td>
<td>18</td>
</tr>
<tr>
<th>8</th>
<td>小编3</td>
<td>xiaobian3@php.cn</td>
<td>13854386663</td>
<td>安徽</td>
<td>淮北</td>
<td>18</td>
</tr>
<tr>
<th>9</th>
<td>小编4</td>
<td>xiaobian4@php.cn</td>
<td>13854386664</td>
<td>安徽</td>
<td>阜阳</td>
<td>18</td>
</tr>
<tr>
<th>10</th>
<td>小编5</td>
<td>xiaobian5@php.cn</td>
<td>13854386665</td>
<td>安徽</td>
<td>六安</td>
<td>18</td>
</tr>
</tbody>
</table>
<button>按钮</button>
</body>
<script>
$("button").click(function(){
// 选择器
// 节点选择，但是不能单独选中其中1条，或者自由的选择多条。
// 1.：first选择第一个元素
// $("tbody tr:first").css("color","lightpink");
// // 2.：last选择最后一个元素
// $("tbody tr:last").css("color","lightpink");
// //3.:even选择偶数，从0开始，0，2，4，6，8，10
// $("tr:even").css("color","lightpink");
// // 4.：odd选择奇数从1开始
// $("tr:odd").css("color","lightpink");
//5.:first-child选择父元素的第一个元素
// 6.:first-of-type选中父元素的第一个元素
// 7.：last-child:选择父元素里的最后一个元素
// 8.：last-of-type选择父元素里的最后一个元素
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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.js"></script>
<style>
* {
text-align: center;
font-size: 20px;
}
.title {
text-align: center;
}
.width {
width: 1200px;
}
tr {
height: 50px;
}
button {
width: 600px;
color: #fff;
background-color: #28a745;
border-color: #28a745;
margin-top: 30px;
}
</style>
</head>
<body>
<button>按钮</button>
<p class="p1">php中文网1</p>
<p class="p2">php中文网2</p>
<div class="div1">
<p class="p3">php中文网3</p>
<p class="p4">php中文网4</p>
<p class="p5">php中文网5</p>
</div>
<div class="div2">
<p class="p6">php中文网6</p>
<p class="p7">php中文网7</p>
<p class="p8">php中文网8</p>
<div class="div3">
<p class="p9">php中文网9</p>
<p class="p10">php中文网10</p>
<p class="p11">php中文网11</p>
<div class="div4">
<p class="p12">php中文网12</p>
<p class="p13">php中文网13</p>
<p class="p14">php中文网14</p>
</div>
</div>
</div>
</body>
<script>
$("button").click(function(){
// $("p:first-child").css("color","red");
// $("p:first-of-type").css("color","red");
// $("p:last-child").css("color","red");
// $("p:last-of-type").css("color","red");
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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.js"></script>
<style>
* {
text-align: center;
font-size: 20px;
}
.title {
text-align: center;
}
.width {
width: 1200px;
}
tr {
height: 50px;
}
button {
width: 600px;
color: #fff;
background-color: #28a745;
border-color: #28a745;
margin-top: 30px;
}
</style>
</head>
<body>
<button>按钮</button>
<p class="p1">php中文网1</p>
<p class="p2">php中文网2</p>
<div class="div1">
<p class="p3">php中文网3</p>
<p class="p4">php中文网4</p>
<p class="p5">php中文网5</p>
</div>
<div class="div2">
<p class="p6">php中文网6</p>
<p class="p7">php中文网7</p>
<p class="p8">php中文网8</p>
<div class="div3">
<p class="p9">php中文网9</p>
<p class="p10">php中文网10</p>
<p class="p11">php中文网11</p>
<div class="div4">
<p class="p12">php中文网12</p>
<p class="p13">php中文网13</p>
<p class="p14">php中文网14</p>
</div>
</div>
</div>
</body>
<script>
$("button").click(function(){
// 1.eq()指定某个元素，相当于=
// $("p:eq(9)").css("color","red");
// console.log($("p"));
// 2.:get()获取大于指定的元素，相当于>
// 这里是大于10，不是大于等于10.
// 大于10：11，12，13，14
// 大于等于10：10，11，12，13，14，
$("p:gt(10)").css("color","red");
console.log($("p"));
// lt()获取小于指定的元素，相当于<
$("p:lt(10)").css("color","red");
console.log($("p"));
// input
});
</script>
</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>事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
* {
background-color: #d4edda;
text-align: center;
font-size: 20px;
}
.form-control {
width: 500px;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
button {
width: 600px;
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.select {
width: 265px;
height: 47px;
}
</style>
</head>
<body>
<h2 class="title">注册</h2>
<form action="" onsubmit="return false;">
<!-- onsubmit="return false;可以不用提交 -->
<p>
账户:
<input type="text" class="form-control" id="account" />
</p>
<p>
密码:
<input type="password" class="form-control" id="password" />
</p>
<p>
省市:
<select id="prov" class="form-control select">
<option value="">请选择</option>
<option value="1">安徽</option>
<option value="2">江苏</option>
<option value="3">河南</option>
</select>
<select id="city" class="form-control select">
<option value="">请选择</option>
</select>
</p>
<button>注册</button>
</form>
</body>
<script>
// 1.click点击事件
// $("button").click(function(){
// let accout = $("#account").val();
// if (!account){
// alert("请输入账号");
// return false;
// }
// alert("成功");
// });
// 2.dblclick（）双击事件
// 必须快速，连续点击2次，这个事件才触发
// $("button").dblclick(function(){
// let accout = $("#account").val();
// if (!account){
// alert("请输入账号");
// return false;
// }
// alert("成功");
// });
// 3.mouseenter()鼠标放在元素上就触发
// $("#account").mouseenter(function(){
// alert("鼠标经过事件");
// let accout = $("#account").val();
// if (!account){
// alert("请输入账号");
// return false;
// }
// alert("成功");
// });
// 4.mouseleave()鼠标移开元素，就触发
// $("#account").mouseleave(function(){
// alert("鼠标移开触发");
// });
// 5.hover()鼠标触碰和移开，都会触发
// $("#account").hover(
// function(){
// alert("鼠标放在账户框上了");
// },
// function(){
// console.log("鼠标从账户上移开了")
// });
$("button").click(function(){
let account = $("#account").val();
if (!account){
alert("请输入账户");
return false;
// return false是可以停止代码的，让代码不往下走了。
}
// 在这里把数据(账号，密码，省事)，传给后端代码
// 在ji，jq代码里，进行判断，可以减少服务器的压力
// 应为我们没有判断输入的值，直接请求服务器的接口，那样服务接口，要判断，判断完后，在返回的错误值（这个流程，就会请求一次服务器，服务器会有压力）
// 学习php后，在写接口的时候，接口也会判断。为什么它要多次一举那？因为它是直接访问数据库，要保证安全和数据的正确性。
// ==是等于
// 有更多违法的词，或者公司违禁的词，不给用的话，就可以在这里进行判断
if(account=="admin"||account =="php中文网"){
alert("该账户不能使用");
return false;
}
let password =$("#password").val();
if (!password){
alert("请输入密码");
return false;
}
if(password.length <=6){
alert("请输入大于6位的密码");
return false;
}
alert("成功");//代表把数据提交给数据库了
})
</script>
</html>
浙公网安备 33010602011771号