jQuery 浅析（操作 dom，过滤器，事件，jQuery-Ajax，jq-留言板）

操作 dom()

由于 append/appendTo 只能追加到最后一个，感觉没有原生的灵活。
不过删除比较方便，获取元素直接 remove()

  1. //1. 添加元素
  2. // const h2 = document.createElement("h2");
  3. // h2.textContent = "你好吗？要开心哦。";
  4. // document.body.appendChild(h2);
  6. // document.body.insertAdjacentHTML("beforeend","<h2>你要坚强哦。加油！</h2>");
  7. // document.body.insertAdjacentElement("beforeend",h2);
  9. // const flg = document.createDocumentFragment();
  10. // const h2 = document.createElement("h2");
  11. // h2.textContent = "这是h2";
  12. // const h3 = document.createElement("h3");
  13. // h3.textContent = "这是h3";
  14. // flg.appendChild(h2);
  15. // flg.appendChild(h3);
  16. // document.body.appendChild(flg);
  18. // 使用 jQuery  要先生成元素
  19. // $('<h2>要过年了，都准备好了吗？</h2>').appendTo($('body'));
  20. $("<h3>").text("这是在子元素上调用的appendTo").appendTo($("body"));
  21. // 子元素.appendTo(父元素)
  22. $("body").append("<h2>这是在父元素上调用的append</h2>");
  24. //   $("body")
  25. //     .append("<ol></ol>")
  26. //     .append(() => {
  27. //       let str = "";
  28. //       for (let i = 0; i < 5; i++) {
  29. //         str += `<li><a>新品赏识：商品 ${i + 1}</a></li>`;
  30. //       }
  31. //       return str;
  32. //     });
  34. $("body").append("<ol></ol>");
  35. // $("body").append("<ol></ol>") 返回的是body 因为是在body上的操作
  36. const ol = $("ol");
  38. // 此时append() 与 html() 功能是一样的
  39. ol.append(() => {
  40.   let str = "";
  41.   for (let i = 0; i < 5; i++) {
  42.     str += `<li><a>新品上市：商品 ${i + 1}</a></li>`;
  43.   }
  44.   return str;
  45. });
  46. console.log($("li:first-of-type"));
  47. //   $(("li:first-of-type")).remove();
  48. // 如果用其他元素替代则是覆盖，不会复制后覆盖。
  49. //   $("li:nth-of-type(2)").replaceWith($("li:nth-of-type(3)"));

效果图

过滤器

这个过滤器不知道有什么应用场景，通过选择器也可以获得元素。
不过这find()很好用

  1. <body>
  2.   <ul id="first">
  3.     <li>item1</li>
  4.     <li>
  5.       item2
  6.       <ul>
  7.         <li>1</li>
  8.         <li class="red">2</li>
  9.         <li>3</li>
  10.         <li>4</li>
  11.         <li>5</li>
  12.       </ul>
  13.     </li>
  14.     <li>item3</li>
  15.     <li>item4</li>
  16.     <li>item5</li>
  17.   </ul>
  18.   <ul id="second">
  19.     <li>item1</li>
  20.     <li>item2</li>
  21.     <li>item3</li>
  22.     <li>item4</li>
  23.     <li>item5</li>
  24.   </ul>
  25.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  26.   <script>
  27.     console.log($("ul#first"));
  28.     $("ul#first").css("background", "skyblue");
  29.     console.log($("ul").filter("#first").children());
  30.     $("ul").filter("#first").children().css("color", "blue");
  31.     console.log($("ul").filter("#first").children().first().text());
  32.     console.log($("ul").filter("#first").children().last().text());
  33.     // jq只要第2个
  34.     console.log($("ul").filter("#first").children().eq(1).text());
  36.     //   find(): 可以获取任意层级的元素（包括子元素）
  37.     //   children():方法只获取子元素集合
  38.     console.log($("ul").filter("#first").children(".red"));
  39.     // 结果没有找到
  40.     $("ul").filter("#first").find(".red").css("background", "red");
  41.     //jq + 原生
  42.     $("#first .red")[0].style.background = "pink";
  43.     console.log("---------------");
  45.     //原生
  46.     console.log(document.getElementById("second").children);
  47.     document.getElementById("second").firstElementChild.style.color = "red";
  48.     document.getElementById("second").lastElementChild.style.color = "red";
  49.     document.getElementById("second").children[1].style.color = "blue";
  50.     console.log(document.getElementById("second").lastChild);
  51.     console.log(document.getElementById("second").lastElementChild.textContent);
  52.     console.log(document.getElementById("second").children[1].textContent);
  53.     console.log(document.getElementById("second").children.item(1).textContent);
  54.   </script>
  55. </body>

效果图

事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>事件</title>
  7.     <style>
  8.       form {
  9.         display: grid;
  10.         padding: 1em;
  11.         width: 15em;
  12.         gap: 1em;
  13.         border: 1px solid blue;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <form action="check.php">
  19.       <label>用户登录</label>
  20.       <input type="text" name="username" placeholder="UserName" autofocus />
  21.       <input type="password" name="password" placeholder="Password" />
  22.       <button>Submit</button>
  23.     </form>
  24.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  25.     <script>
  26.       // 禁用表单的默认提交行为
  27.       // document.querySelector("form").onsubmit = ev => ev.preventDefault();
  28.       //jq
  29.       $("form").submit((ev) => ev.preventDefault());
  30.       //表单验证
  31.       //验证用户名：如果为空提示不能为空，如果用户名已存在，提示用户重新填写
  32.       const user = $('input[name="username"]');
  33.       // 在失去焦点的时候进行验证
  34.       user.blur(function () {
  35.         // 如果使用this关键字就不能用箭头函数，此处如果使用箭头函数 this指向window
  36.         // 提示信息
  37.         let tips = "";
  38.         // 用户列表
  39.         const users = ["admin", "user", "root"];
  41.         if ($(this).val().length === 0) {
  42.           tips = "用户名不能为空";
  43.           $(this).focus();
  44.         } else if (users.indexOf($(this).val()) === -1) {
  45.           tips = "用户不存在，请注册" + "<button>注册</button>";
  46.         } else {
  47.           tips = '<i style="color:green">用户名正确</i>';
  48.         }
  49.         if ($(this).next()[0].tagName !== "SPAN") {
  50.           $("<span></span>")
  51.             .html(tips)
  52.             .css("color", "red")
  53.             .insertAfter($(this));
  54.         }
  55.       });
  57.       //   user.on("input", () => $("span").remove());
  58.       user.on("input", function () {
  59.         $(this).next("span").remove();
  60.       });
  61.     </script>
  62.   </body>
  63. </html>

jQuery 的事件感觉要比原生的好记忆，可能初学还没有大量实战感觉有误。就是编辑器对 on()里面的语法提示没有，需要查文档，不是很方便。

jQuery-Ajax 这个有点意思

配置环境：开启虚拟环境，创建站点并新建 info.php;创建另外一个站点，并新建 users.php

info.php

  1. <?php
  2. //info.php
  3. header('content-type:text/html;charset=utf-8');
  5. //获取回调名称
  7. $callback = $_GET['jsonp'];
  8. $id = $_GET['id'];
  10. //模拟接口数据
  11. $users = [
  12.     0 =>'{"name":"朱老师","email":"peter@php.cn"}',
  13.     1 =>'{"name":"西门","email":"xm@php.cn"}',
  14.     2 =>'{"name":"灭绝","email":"mj@php.cn"}'
  15. ];
  16. if (array_key_exists(($id-1), $users)) {
  17.     $user = $users[$id-1];
  18. }
  20. // 动态生成handle()的调用
  21. echo $callback . '(' . $user . ')';

users.php

  1. <?php
  2. //users.php
  3. //二维数组来模拟数据表的查询结果
  4. $users = [
  5.     ['id' => 1,'name' => '天蓬大人','age' => '55'],
  6.     ['id' => 2,'name' => '灭绝师太','age' => '22'],
  7.     ['id' => 3,'name' => '西门老妖','age' => '44'],
  8. ];
  9. //$_REQUEST:相当于$_GET + $_POST + $_COOKIE 三合一
  10. if (in_array($_REQUEST['id'], array_column($users, 'id'))) {
  11.     foreach ($users as $user) {
  12.         if ($user['id'] == $_REQUEST['id']) {
  13.             //vprintf(输出模板,数组表示的参数)
  14.             vprintf('%s; %s %s岁', $user);
  15.             // 以下语句配合$.getJOSN()调用，其他请求时请注释掉
  16.             // echo json_encode($user);
  17.         }
  18.     }
  19. } else {
  20.     die('<span style="color:red">没找到</span>');
  21. }

html 实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>jQuery-Ajax</title>
  7.     <style>
  8.       body {
  9.         display: grid;
  10.         gap: 2em;
  11.         padding: 2em;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <button class="get">1. $.get() 请求数据</button>
  17.     <button class="post">2. $.post() 请求数据</button>
  18.     <button class="jsonp">3. $.ajax():JSONP 跨域请求数据</button>
  20.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  21.     <script>
  22.       // 1. $.get(url,QueryString,callback)
  23.       // console.log($('.get'));
  24.       $("button:first-of-type").click(function (ev) {
  25.         // $.get('users.php?id=1',function (data){
  26.         $.get("users.php", { id: 2 }, function (data) {
  27.           // console.log(data);
  28.           //站在触发的对象上思考
  29.           // $(ev.target).after("<div></div>").next().html(data);
  30.           //站在要添加的对象上思考
  31.           $("<div></div>")
  32.             .html(data)
  33.             .css("color", "pink")
  34.             .insertAfter($(ev.target));
  35.           // console.log($(ev.target));
  36.         });
  37.       });
  39.       // 2. post()
  40.       $(".post").click(function (ev) {
  41.         $.post("users.php", { id: 3 }, function (data) {
  42.           $("<div></div>")
  43.             .html(data)
  44.             .css("color", "pink")
  45.             .insertAfter($(ev.target));
  46.         });
  47.       });
  49.       // 3. jsonp  $.ajax()
  50.       //   $.ajax({
  51.       //       type:'get',
  52.       //       url: 'users.php',
  53.       //       data: {id: 2},
  54.       //       dataType: 'html',
  55.       //       success: function () {
  57.       //       }
  58.       //   })
  59.       $(".jsonp").click(function (ev) {
  60.         $.ajax({
  61.           type: "get",
  62.           url: "http://world.io:8088/info.php?id=2&jsonp=?",
  63.           //   data: { id: 2},
  64.           dataType: "jsonp",
  65.           // 告诉跨域访问的服务器需要返回的函数名称
  66.           jsonpCallback: "show",
  67.         });
  68.       });
  69.       function show(data) {
  70.         console.log(data);
  71.         $(".jsonp")
  72.           .after("<div></div>")
  73.           .next()
  74.           .html(`${data["name"]}  ${data.email}`);
  75.       }
  76.     </script>
  77.   </body>
  78. </html>

总结：
$.get('users.php?id=1',function (data){}
$.get("users.php", { id: 2 }, function (data) {}

  1. $(".jsonp").click(function (ev) {
  2.   $.ajax({
  3.     type: "get",
  4.     url: "http://world.io:8088/info.php?id=2&jsonp=?",
  5.     //   data: { id: 2},
  6.     dataType: "jsonp",
  7.     // 告诉跨域访问的服务器需要返回的函数名称
  8.     jsonpCallback: "show",
  9.   });
  10. });

语法需要记忆

jQuery实现一个留言板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>留言板</title>
  7.     <link rel="stylesheet" href="./iconfont/icon-font/iconfont.css" />
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.         font-size: 10px;
  14.       }
  15.       ul,
  16.       li {
  17.         list-style: none;
  18.       }
  20.       .box {
  21.         width: 50rem;
  22.         height: 10rem;
  23.         margin: 1rem auto;
  24.       }
  25.       h2 {
  26.         font-size: 3rem;
  27.         display: flex;
  28.         justify-content: center;
  29.         margin-bottom: 1rem;
  30.       }
  31.       .message {
  32.         display: flex;
  33.         flex-flow: column nowrap;
  34.         width: 100%;
  35.       }
  37.       .message textarea {
  38.         width: 100%;
  39.         min-height: 10rem;
  40.         padding: 0.6rem 1rem;
  41.         border: 1px solid #c9c9c9;
  42.         border-radius: 2px;
  43.         outline: none;
  44.         font-size: 1.4rem;
  45.       }
  47.       .message .button {
  48.         width: 100%;
  49.         height: 5rem;
  50.         margin-top: 1rem;
  51.       }
  52.       .message .button .btn {
  53.         padding: 0 2rem;
  54.         height: 3.5rem;
  55.         border-radius: 3px;
  56.         border-width: 0;
  57.         font-size: 1.2rem;
  58.         outline: none;
  59.         cursor: pointer;
  60.       }
  61.       .message .button .btn:hover {
  62.         transition: all 0.3s;
  63.         opacity: 0.8;
  64.       }
  65.       .message .button .btn.btn-submit {
  66.         background-color: #3e7777;
  67.         color: #fff;
  68.       }
  69.       .message .button .btn.btn-reset {
  70.         margin-left: 0.5rem;
  71.       }
  72.       .message .content-wrap em.tips {
  73.         color: red;
  74.         margin-top: 1rem;
  75.       }
  76.       .list {
  77.         width: 100%;
  78.         display: grid;
  79.         grid-template-columns: 1fr;
  80.         grid-template-rows: auto;
  81.         margin-top: 1rem;
  82.       }
  83.       .list li {
  84.         display: grid;
  85.         grid-template-columns: 4rem 1fr;
  86.         grid-template-rows: auto auto;
  87.         gap: 0.5rem;
  88.         margin-top: 1rem;
  89.       }
  90.       .list li.item .avatar {
  91.         width: 4rem;
  92.         height: 4rem;
  93.       }
  94.       .list li.item .avatar .iconfont.icon-my {
  95.         font-size: 4em;
  96.         border-radius: 50%;
  97.         color: #3e7777;
  98.       }
  99.       .list li.item .comment {
  100.         display: grid;
  101.         grid-template-columns: 1fr;
  102.         row-gap: 0.5rem;
  103.       }
  104.       .list li.item .comment .title {
  105.         display: flex;
  106.         flex: rows nowrap;
  107.         align-items: center;
  108.       }
  109.       .list li.item .comment .title .nick > * {
  110.         font-size: 1.6rem;
  111.         color: #000;
  112.       }
  113.       .list li.item .comment .title .time {
  114.         color: #8c92a4;
  115.         margin-left: 0.5rem;
  116.         font-size: 1.2rem;
  117.         font-size: 1.4rem;
  118.       }
  119.       .list li.item .comment .context {
  120.         color: #40485b;
  121.         font-size: 1.4rem;
  122.         margin: 0.5rem 0;
  123.       }
  124.       .list li.item .del {
  125.         margin: 0.5rem 0;
  126.         display: grid;
  127.         cursor: pointer;
  128.         border: none;
  129.         place-self: center end;
  130.         grid-area: 2 / 1 / 2 / 3;
  131.         padding: 0.5rem;
  132.         outline: none;
  133.       }
  134.       hr {
  135.         border-color: rgba(222, 222, 222, 0.5);
  136.       }
  137.     </style>
  138.   </head>
  139.   <body>
  140.     <div class="box">
  141.       <h2>留言板</h2>
  142.       <div class="message">
  143.         <div class="content-wrap">
  144.           <textarea
  145.             name="message"
  146.             class="content"
  147.             placeholder="请输入内容"
  148.             cols="30"
  149.             rows="10"
  150.           ></textarea>
  151.           <em class="tips" style="display: none">* 留言内容不能为空。</em>
  152.         </div>
  153.         <div class="button">
  154.           <button class="btn btn-submit">提交</button>
  155.           <button class="btn btn-reset" type="reset">重置</button>
  156.         </div>
  157.       </div>
  158.       <hr />
  159.       <ul class="list"></ul>
  160.     </div>
  161.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  162.     <script>
  163.       const msg = $(".content");
  164.       const btnSubmit = $(".btn-submit");
  165.       const btnReset = $(".btn-reset");
  166.       const ul = $(".list");
  168.       btnSubmit.click((ev) => {
  169.         let str = `<li class="item">
  170.                 <div class="avatar">
  171.                     <span class="iconfont icon-my"></span>
  172.                     </div>
  173.                     <div class="comment">
  174.                         <div class="title">
  175.                             <span class="nick">
  176.                                 <b>游客</b>
  177.                                 </span>
  178.                             <div class="time">${formatDate(Date.now())}</div>
  179.                             </div>
  180.                             <div class="context">${msg.val()}</div>
  181.                             <hr>
  182.                         </div>                        
  183.                         <button class="del"  >删除</button>
  184.                 </li>`;
  185.         //onclick="del(this)"
  186.         if (msg.val().length === 0) {
  187.           $(".tips").css("display", "block");
  188.           return false;
  189.         }
  190.         // ul.append(str);
  191.         ul[0].insertAdjacentHTML("afterbegin", str);
  192.         msg.val(null);
  193.       });
  195.       msg.on("input", (ev) => {
  196.         $(".tips").css("display", "none");
  197.       });
  198.       btnReset.click((ev) => {
  199.         msg.val(null);
  200.       });
  202.       ul.on("click", function (ev) {
  203.         if (ev.target.className === "del") {
  204.           //   console.log(ev.target.parentNode);
  206.           confirm("是否删除?") ? ev.target.parentNode.remove() : false;
  207.         }
  208.       });
  209.       //   function del(ev) {
  210.       //     ev.parentNode.remove();
  211.       //   }
  213.       // 获取时间
  214.       function formatDate(time) {
  215.         let date = new Date(time);
  216.         let y = date.getFullYear();
  217.         let m = date.getMonth()+1;
  218.         let d = date.getDate();
  219.         let h = date.getHours();
  220.         let mi = date.getMinutes();
  221.         let s = date.getSeconds();
  222.         return `${y}-${m}-${d} ${h}:${mi}:${s}`;
  223.       }
  224.     </script>
  225.   </body>
  226. </html>


总结：jq对象转成js对象，或者js对象转jq对象将会有更大的灵活性。

更多相关文章

  1. 面向对象封装，继承，加载器
  2. 面向对象编程基础
  3. 0202面向对象编程基础
  4. PHP面向对象编程
  5. PHP类与对象的基础概念
  6. 1208作业
  7. 初探jQuery（$(),attr(),css(),val(),html(),text(),each()）
  8. 浮动，消除浮动，BFC，定位，固定定位模态框
  9. CSS常用伪类

随机推荐

  1. Android界面五种常用布局方式
  2. android创建文件夹和文件
  3. Android关于Activity屏蔽/拦截Home键
  4. 安卓真机appium环境配置
  5. Unity头像上传功能实现 二
  6. android 5.1.1开机优化(framework层)
  7. WebViewJavascriptBridge传递Header、Coo
  8. Android的Looper类使用的5个要点
  9. Android对文件的操作（简单的文件读取与写
  10. 关于android百度地图离线地图的使用