dome元素操作,选择器操作和鼠标事件学习
<!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>