jQuery常用DOM操作及ajax和jsonp跨域请求

dom()

• 添加元素

  子元素像父元素添加用appendTo;父元素向子元素添加用append

//向父元素添加
$("<h1>这里是jquery插入的元素</h1>").appendTo("body");
//向子元素添加
 $("body").append("<h2>这里是向子元素添加的内容</h2>");

• children():方法只获取子元素

<ul id="first">
    <li>item1</li>
    <li>item2</li>
    <li>
        <ul>
          <li>1</li>
          <li class="red">2</li>
          <li>3</li>
        </ul>
    </li>
    <li>item4</li>
    <li>item5</li>
</ul>
// children()无法获取孙元素
console.log($("ul").filter("#first").children(".red"));

• find():方法可以获取任何层级的元素

// find()可以获取任何层级的元素
console.log($("ul").filter("#first").find(".red"));
//获取到.red元素后添加背景色为yellow
console.log($("ul").filter("#first").find(".red").css("background", "yellow"));

事件 用户注册小案例

//html代码
<div class="conn">
   <h2>用户登录</h2>
   <form action="login.php" method="POST" class="login">
   <input type="text" name="username" id="username" placeholder="请输入用户名" />
   <input type="password" name="password" id="password" placeholder="密码不能为空" />
   <button>登录</button>
   </form>
</div>
//jquery代码
<script>
      //去除表单默认的提交行为
      $("form").submit((ev) => ev.preventDefault());
      //   非空验证
      const user = $("#username");
      user.blur(function () {
        let tips = "";
        const users = ["admin", "manage", "root"];
        if ($(user).val().length === 0) {
          tips = "用户名不能为空";
          $(user).focus();
        } else if (users.indexOf($(user).val()) === -1) {
          tips = "用户名不存在,请注册" + "<button>注册</button>";
        } else {
          tips = '<i style="color:green">用户名正确</i>';
        }
        // 防止提示信息重复
        if ($(user).next()[0].tagName !== "DIV") {
          $("<div></div>").html(tips).css("color", "red").insertAfter($(user));
        }
        // 当用户修改文本的输入时,将提示信息清空
        // 通过 on 为元素添加事件
        user.on("input", function () {
          console.log($(user).next("div").remove());
        });
      });
    </script>

jQuery-Ajax

• $.get(请求url,查询参数,成功回调)

$(".get").click(function (ev) {
   $.get("users.php", { id: 2 }, function (data) {
   $(ev.target).after("<div></div>").next().html(data);
   });
});

• $.post(请求url,查询参数,成功回调)

$(".post").click(function (ev) {
   $.post("users.php", { id: 2 }, function (data) {
   $(ev.target).after("<div></div>").next().html(data);
   });
});

• $.ajax()&jsonp

$(".jsonp").click(function (ev) {
   $.ajax({
     type: "get",
     url: "http://world.io/test.php?id=2&jsonp=?",
     dataType: "jsonp",
     // 告诉跨域访问的服务器需要返回的函数名称
    //   jsonpCallback: "show",
    success: function (data) {
         console.log(data);
        $("button:last-of-type").after("<div>").next().html(`${data.name} [${data.email}}]`);
     },
     });
});