JS进阶知识：JQuery基础操作

代码练习

1、demo1代码

<!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="../JQuery3.5.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      h2 {
        /* display: block; */
        width: 350px;
        margin: 0 auto;
        text-align: center;
        padding-top: 10px;
        box-sizing: border-box;
      }
      form {
        margin: 10px auto;
        width: 350px;
        height: 250px;
        background-color: #5384e8;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-evenly;
        align-content: center;
        align-items: center;
        font-size: 1.2rem;
      }
      form:hover {
        box-shadow: 0 0 5px #626262;
      }
      form > .button {
        width: 280px;
        display: flex;
        justify-content: space-evenly;
      }
      form > .button > input {
        width: 100px;
        height: 30px;
        background-color: #00bb00;
        border: none;
        border-radius: 15px;
      }
      form > .button > input:hover {
        background-color: red;
        color: white;
      }
      a {
        color: white;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <h2 data-index="one">用户注册</h2>
    <form method="POST" onsubmit="return false">
      <div class="account">
        <label for="username">账户：</label>
        <input
          type="email"
          required
          name="username"
          id="username"
          placeholder="example@163.com"
        />
      </div>
      <div class="pwd">
        <label for="p2">密码：</label>
        <input
          type="password"
          required
          name="p2"
          id="p2"
          placeholder="不少于六位"
        />
      </div>
      <div class="button">
        <input type="submit" value="登陆" />
        <input type="reset" value="重置" />
      </div>
      <div>
        <a href="regist.php">没有账号,点击此处注册!</a>
      </div>
    </form>
  </body>
  <script>
    var cl = console.log.bind(console);
    // cl($('input[type="email"]'));
    var form = $("form");
    // cl(form);
    //修改元素标签属性值attr:只有一个参数获取其值，两个参数修改其值
    form.attr("method", "GET");
    //修改元素的样式：CSS()
    form.css("background", "lightgreen");
    //获取input标签中的值：val();
    var email = $('input[type="email"]');
    email.val("ldy@php.edu");
    cl(email.val());
    //html()和text()修改元素标签中的文本内容
    cl($("h2").html());
    $("h2").text("注册新用户");
    cl(form.offset()); //相对于文档的坐标位置
    cl(form.offsetParent()); //取得离指定元素最近的含有定位信息的祖先元素
    cl(form.position()); //获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标
    cl(form.scrollTop());
    form.scrollTop(30); //滚动距离顶部的距离
    form.scrollLeft(30); //滚动距离左边的距离
    //data自定义属性值的获取和设置
    $("h2").data("index", "ok"); //设置data自定义属性
    cl($("h2").data("index")); //获取自定义属性值
  </script>
</html>

演示结果：

2、demo2代码

<!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="../JQuery3.5.1.js"></script>
  </head>
  <body></body>
  <script>
    var cl = console.log.bind(console);
    $("body").append("<ul></ul>");
    cl($("body"));
    $("<li>富豫369</li>").appendTo("ul"); //尾部插入
    $("ul").prepend("<li>成玉668</li>"); //头部插入
    $("<li>大成168</li>").prependTo("ul");
    $("li").last().css("color", "red");
    $("li").first().css("color", "green");
    $("li:nth-child(2)").before("<li>新产品</li>"); //在某个元素之前插入元素
    $("<li>新产品2</li>").insertBefore("li:nth-child(2)");
    $("li:nth-child(4)").after("<li>新产品</li>"); //在某个元素之前插入元素
    $("<li>新产品2</li>").insertAfter("li:nth-child(4)");
    $("li:nth-child(5)").replaceWith('<p style="color:red">替换内容</p>'); //替换
    $("<span>中国人</span>").replaceAll("li:nth-child(6)");
    cl("^^^^^^^^^^^^^^^^^");
    cl($("li").eq(2).html());
    cl($("li").eq(2));
    cl($("li").eq(2).parent());
    cl($("ul").children());
    cl("&&&&&&&&&&&&&&&&&&");
    cl($("ul").children("span")); //获取子代元素
    cl($("ul").children().filter("li")); //过滤函数
    cl($("ul").find("p")); //查找其所有后代元素
  </script>
</html>

运行结果图：

知识点总结：

1、JQuery常用元素标签属性操作函数：

.css():样式获取和设置方法（两个参数：属性、值）
.attr()：元素标签属性的获取和设置方法（两个参数：属性、值）
.val():表单中的值的获取方式和设置方法（一个参数：值）
.html()/text():元素标签中文本的获取和设置方法（一个参数：值）
.data():元素标签的自定义属性的获取和设置（两个参数：属性、值）

2、JQuery元素位置信息和滚动信息获取和设置

.position():获取当前元素的位置相对于定位父级坐标信息
.offset()：获取当前元素相对于文档的坐标信息
.scrollTop|scrollLeft():获取当前元素的滚动条位置信息
.scroll(function(ev){}):滚动监听函数

3、JQuery元素添加函数：

.append()|.appendTo():在指定元素尾部添加
.prepend()|prependTo():在指定元素头部添加
.before()|insertBefore():在指定元素之前插入
.after()|.insertAfter():在指定元素之后插入
.|replaceWith()|.replaceAll():替换指定元素内容

4、Jquery获取子代和后代元素

.children():获取所有子代元素
.filter():过滤函数
.first():获取子代元素中的第一个
.last():获取子代元素的最后一个
.eq():获取子代元素中的任意一个元素
.find():获取所有后代元素

代码练习

知识点总结：

相关文章