Blogger Information

Blog 32

fans 0

comment 0

visits 22275

Special Recommendation

More>

Related recommendations

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

操作 dom()

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

//1. 添加元素
// const h2 = document.createElement("h2");
// h2.textContent = "你好吗？要开心哦。";
// document.body.appendChild(h2);
// document.body.insertAdjacentHTML("beforeend","<h2>你要坚强哦。加油！</h2>");
// document.body.insertAdjacentElement("beforeend",h2);
// const flg = document.createDocumentFragment();
// const h2 = document.createElement("h2");
// h2.textContent = "这是h2";
// const h3 = document.createElement("h3");
// h3.textContent = "这是h3";
// flg.appendChild(h2);
// flg.appendChild(h3);
// document.body.appendChild(flg);
// 使用 jQuery  要先生成元素
// $('<h2>要过年了，都准备好了吗？</h2>').appendTo($('body'));
$("<h3>").text("这是在子元素上调用的appendTo").appendTo($("body"));
// 子元素.appendTo(父元素)
$("body").append("<h2>这是在父元素上调用的append</h2>");
//   $("body")
//     .append("<ol></ol>")
//     .append(() => {
//       let str = "";
//       for (let i = 0; i < 5; i++) {
//         str += `<li><a>新品赏识：商品 ${i + 1}</a></li>`;
//       }
//       return str;
//     });
$("body").append("<ol></ol>");
// $("body").append("<ol></ol>") 返回的是body 因为是在body上的操作
const ol = $("ol");
// 此时append() 与 html() 功能是一样的
ol.append(() => {
  let str = "";
  for (let i = 0; i < 5; i++) {
    str += `<li><a>新品上市：商品 ${i + 1}</a></li>`;
  }
  return str;
});
console.log($("li:first-of-type"));
//   $(("li:first-of-type")).remove();
// 如果用其他元素替代则是覆盖，不会复制后覆盖。
//   $("li:nth-of-type(2)").replaceWith($("li:nth-of-type(3)"));

效果图

过滤器

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

<body>
  <ul id="first">
    <li>item1</li>
    <li>
      item2
      <ul>
        <li>1</li>
        <li class="red">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
  </ul>
  <ul id="second">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
  </ul>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script>
    console.log($("ul#first"));
    $("ul#first").css("background", "skyblue");
    console.log($("ul").filter("#first").children());
    $("ul").filter("#first").children().css("color", "blue");
    console.log($("ul").filter("#first").children().first().text());
    console.log($("ul").filter("#first").children().last().text());
    // jq只要第2个
    console.log($("ul").filter("#first").children().eq(1).text());
    //   find(): 可以获取任意层级的元素（包括子元素）
    //   children():方法只获取子元素集合
    console.log($("ul").filter("#first").children(".red"));
    // 结果没有找到
    $("ul").filter("#first").find(".red").css("background", "red");
    //jq + 原生
    $("#first .red")[0].style.background = "pink";
    console.log("---------------");
    //原生
    console.log(document.getElementById("second").children);
    document.getElementById("second").firstElementChild.style.color = "red";
    document.getElementById("second").lastElementChild.style.color = "red";
    document.getElementById("second").children[1].style.color = "blue";
    console.log(document.getElementById("second").lastChild);
    console.log(document.getElementById("second").lastElementChild.textContent);
    console.log(document.getElementById("second").children[1].textContent);
    console.log(document.getElementById("second").children.item(1).textContent);
  </script>
</body>

效果图

事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
    <style>
      form {
        display: grid;
        padding: 1em;
        width: 15em;
        gap: 1em;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <form action="check.php">
      <label>用户登录</label>
      <input type="text" name="username" placeholder="UserName" autofocus />
      <input type="password" name="password" placeholder="Password" />
      <button>Submit</button>
    </form>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
      // 禁用表单的默认提交行为
      // document.querySelector("form").onsubmit = ev => ev.preventDefault();
      //jq
      $("form").submit((ev) => ev.preventDefault());
      //表单验证
      //验证用户名：如果为空提示不能为空，如果用户名已存在，提示用户重新填写
      const user = $('input[name="username"]');
      // 在失去焦点的时候进行验证
      user.blur(function () {
        // 如果使用this关键字就不能用箭头函数，此处如果使用箭头函数 this指向window
        // 提示信息
        let tips = "";
        // 用户列表
        const users = ["admin", "user", "root"];
        if ($(this).val().length === 0) {
          tips = "用户名不能为空";
          $(this).focus();
        } else if (users.indexOf($(this).val()) === -1) {
          tips = "用户不存在，请注册" + "<button>注册</button>";
        } else {
          tips = '<i style="color:green">用户名正确</i>';
        }
        if ($(this).next()[0].tagName !== "SPAN") {
          $("<span></span>")
            .html(tips)
            .css("color", "red")
            .insertAfter($(this));
        }
      });
      //   user.on("input", () => $("span").remove());
      user.on("input", function () {
        $(this).next("span").remove();
      });
    </script>
  </body>
</html>

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

jQuery-Ajax 这个有点意思

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

info.php

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

users.php

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

html 实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery-Ajax</title>
    <style>
      body {
        display: grid;
        gap: 2em;
        padding: 2em;
      }
    </style>
  </head>
  <body>
    <button class="get">1. $.get() 请求数据</button>
    <button class="post">2. $.post() 请求数据</button>
    <button class="jsonp">3. $.ajax():JSONP 跨域请求数据</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
      // 1. $.get(url,QueryString,callback)
      // console.log($('.get'));
      $("button:first-of-type").click(function (ev) {
        // $.get('users.php?id=1',function (data){
        $.get("users.php", { id: 2 }, function (data) {
          // console.log(data);
          //站在触发的对象上思考
          // $(ev.target).after("<div></div>").next().html(data);
          //站在要添加的对象上思考
          $("<div></div>")
            .html(data)
            .css("color", "pink")
            .insertAfter($(ev.target));
          // console.log($(ev.target));
        });
      });
      // 2. post()
      $(".post").click(function (ev) {
        $.post("users.php", { id: 3 }, function (data) {
          $("<div></div>")
            .html(data)
            .css("color", "pink")
            .insertAfter($(ev.target));
        });
      });
      // 3. jsonp  $.ajax()
      //   $.ajax({
      //       type:'get',
      //       url: 'users.php',
      //       data: {id: 2},
      //       dataType: 'html',
      //       success: function () {
      //       }
      //   })
      $(".jsonp").click(function (ev) {
        $.ajax({
          type: "get",
          url: "http://world.io:8088/info.php?id=2&jsonp=?",
          //   data: { id: 2},
          dataType: "jsonp",
          // 告诉跨域访问的服务器需要返回的函数名称
          jsonpCallback: "show",
        });
      });
      function show(data) {
        console.log(data);
        $(".jsonp")
          .after("<div></div>")
          .next()
          .html(`${data["name"]}  ${data.email}`);
      }
    </script>
  </body>
</html>

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

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

语法需要记忆

jQuery实现一个留言板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>留言板</title>
    <link rel="stylesheet" href="./iconfont/icon-font/iconfont.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 10px;
      }
      ul,
      li {
        list-style: none;
      }
      .box {
        width: 50rem;
        height: 10rem;
        margin: 1rem auto;
      }
      h2 {
        font-size: 3rem;
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
      }
      .message {
        display: flex;
        flex-flow: column nowrap;
        width: 100%;
      }
      .message textarea {
        width: 100%;
        min-height: 10rem;
        padding: 0.6rem 1rem;
        border: 1px solid #c9c9c9;
        border-radius: 2px;
        outline: none;
        font-size: 1.4rem;
      }
      .message .button {
        width: 100%;
        height: 5rem;
        margin-top: 1rem;
      }
      .message .button .btn {
        padding: 0 2rem;
        height: 3.5rem;
        border-radius: 3px;
        border-width: 0;
        font-size: 1.2rem;
        outline: none;
        cursor: pointer;
      }
      .message .button .btn:hover {
        transition: all 0.3s;
        opacity: 0.8;
      }
      .message .button .btn.btn-submit {
        background-color: #3e7777;
        color: #fff;
      }
      .message .button .btn.btn-reset {
        margin-left: 0.5rem;
      }
      .message .content-wrap em.tips {
        color: red;
        margin-top: 1rem;
      }
      .list {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        margin-top: 1rem;
      }
      .list li {
        display: grid;
        grid-template-columns: 4rem 1fr;
        grid-template-rows: auto auto;
        gap: 0.5rem;
        margin-top: 1rem;
      }
      .list li.item .avatar {
        width: 4rem;
        height: 4rem;
      }
      .list li.item .avatar .iconfont.icon-my {
        font-size: 4em;
        border-radius: 50%;
        color: #3e7777;
      }
      .list li.item .comment {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 0.5rem;
      }
      .list li.item .comment .title {
        display: flex;
        flex: rows nowrap;
        align-items: center;
      }
      .list li.item .comment .title .nick > * {
        font-size: 1.6rem;
        color: #000;
      }
      .list li.item .comment .title .time {
        color: #8c92a4;
        margin-left: 0.5rem;
        font-size: 1.2rem;
        font-size: 1.4rem;
      }
      .list li.item .comment .context {
        color: #40485b;
        font-size: 1.4rem;
        margin: 0.5rem 0;
      }
      .list li.item .del {
        margin: 0.5rem 0;
        display: grid;
        cursor: pointer;
        border: none;
        place-self: center end;
        grid-area: 2 / 1 / 2 / 3;
        padding: 0.5rem;
        outline: none;
      }
      hr {
        border-color: rgba(222, 222, 222, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h2>留言板</h2>
      <div class="message">
        <div class="content-wrap">
          <textarea
            name="message"
            class="content"
            placeholder="请输入内容"
            cols="30"
            rows="10"
          ></textarea>
          <em class="tips" style="display: none">* 留言内容不能为空。</em>
        </div>
        <div class="button">
          <button class="btn btn-submit">提交</button>
          <button class="btn btn-reset" type="reset">重置</button>
        </div>
      </div>
      <hr />
      <ul class="list"></ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
      const msg = $(".content");
      const btnSubmit = $(".btn-submit");
      const btnReset = $(".btn-reset");
      const ul = $(".list");
      btnSubmit.click((ev) => {
        let str = `<li class="item">
                <div class="avatar">
                    <span class="iconfont icon-my"></span>
                    </div>
                    <div class="comment">
                        <div class="title">
                            <span class="nick">
                                <b>游客</b>
                                </span>
                            <div class="time">${formatDate(Date.now())}</div>
                            </div>
                            <div class="context">${msg.val()}</div>
                            <hr>
                        </div>                        
                        <button class="del"  >删除</button>
                </li>`;
        //onclick="del(this)"
        if (msg.val().length === 0) {
          $(".tips").css("display", "block");
          return false;
        }
        // ul.append(str);
        ul[0].insertAdjacentHTML("afterbegin", str);
        msg.val(null);
      });
      msg.on("input", (ev) => {
        $(".tips").css("display", "none");
      });
      btnReset.click((ev) => {
        msg.val(null);
      });
      ul.on("click", function (ev) {
        if (ev.target.className === "del") {
          //   console.log(ev.target.parentNode);
          confirm("是否删除?") ? ev.target.parentNode.remove() : false;
        }
      });
      //   function del(ev) {
      //     ev.parentNode.remove();
      //   }
      // 获取时间
      function formatDate(time) {
        let date = new Date(time);
        let y = date.getFullYear();
        let m = date.getMonth()+1;
        let d = date.getDate();
        let h = date.getHours();
        let mi = date.getMinutes();
        let s = date.getSeconds();
        return `${y}-${m}-${d} ${h}:${mi}:${s}`;
      }
    </script>
  </body>
</html>

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

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML他是啥

2020-12-09 16:09:43