Home > List of blog posts > 前端 - jQuery - DOM操作

Blogger Information

Blog 33

fans 0

comment 0

visits 27659

Special Recommendation

More>

Related recommendations

前端 - jQuery - DOM操作

一、基础语法

$(选择器).操作();

<!DOCTYPE html>
<html lang="zh_hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../jquery/jquery.min.js"></script>
  </head>
  <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
  </ul>
  <body>
    <script>
      //使用包含 CSS 选择器的字符串匹配一组元素
      var lis = $("li");
      console.log(lis);
      //动态创建一个元素
      var li05 = $("<li>li05</li>");
      console.log(li05);
    </script>
  </body>
</html>

二、选择器


<!DOCTYPE html>
<html lang="zh_hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  </head>
  <ul id="ul">
    <li class="li">01</li>
    <li class="li active">02</li>
    <li class="li" id="li03">03</li>
    <li class="li active">04</li>
  </ul>
  <div class="d1">
    <div class="d2">
      <div class="d3"></div>
    </div>
    <div class="d4"></div>
    <div class="d5"></div>
    <div class="d6"></div>
  </div>
  <form action="">
    <input type="text" name="username" id="username" />
    <input type="hidden" value="h123" />
    <input type="radio" value="篮球" />
    <input type="checkbox" value="足球" />
    <input type="password" name="password" id="password" />
    <input type="file" name="" id="" />
    <button type="submit">提交</button>
  </form>
  <form action="">
    <input type="text" disabled />
  </form>
  <select>
    <option value="1">Flowers</option>
    <option value="2" selected="selected">Gardens</option>
    <option value="3">Trees</option>
  </select>
  <body>
    <script>
      // 1. 基本
      //根据ID获取元素
      var ul = $("#ul");
      console.log(ul);
      //根据标签名获取元素
      var lis = $("li");
      console.log(lis);
      //根据类名获取元素
      var lis1 = $(".li");
      console.log(lis1);
      // 2. 层级
      //选择指定父元素下的所有指定的子元素（递归）
      var ds = $(".d1 div");
      console.log(ds);
      //选择指定父元素下的所有指定的子元素
      var d2 = $(".d1 > div");
      console.log(d2);
      //选择指定元素后紧接着的指定的兄弟元素
      var d = $(".d2 + div");
      console.log(d);
      //选择指定元素后的所有指定的兄弟元素
      var dd = $(".d2 ~ div");
      console.log(dd);
      // 3. 基本
      //匹配第一个元素
      var li01 = $("li:first")[0];
      console.log(li01);
      //匹配索引为偶数的元素
      var li2 = $("li:even");
      console.log(li2);
      //匹配索引为奇数的元素
      var li3 = $("li:odd");
      console.log(li3);
      //匹配指定索引的元素
      var li02 = $("li:eq(1)")[0];
      console.log(li02);
      //匹配大于指定索引的元素
      var li4 = $("li:gt(1)");
      console.log(li4);
      //匹配最后一个元素
      var li03 = $("li:last")[0];
      console.log(li03);
      //匹配小于指定索引的元素
      var li5 = $("li:lt(2)");
      console.log(li5);
      // 4. 内容
      //匹配包含给定文本的元素
      var l01 = $("li:contains('01')");
      console.log(l01[0]);
      //匹配不包含子元素或者文本的空元素
      var ndiv = $("div:empty");
      console.log(ndiv);
      //匹配含有指定元素的元素
      var ddiv = $("div:has('div')");
      console.log(ddiv);
      //匹配包含子元素或者文本的元素
      var hli = $("li:parent");
      console.log(hli);
      // 5. 可见性
      //匹配不可见元素
      var hin = $("form input:hidden");
      console.log(hin[0]);
      //匹配可见元素
      var vin = $("form input:visible");
      console.log(vin);
      // 6. 属性
      //匹配包含指定属性的元素
      var ili = $("li[id]");
      console.log(ili[0]);
      //匹配包含指定属性值的元素
      var pin = $("form input[type='password']");
      console.log(pin[0]);
      //匹配包含某些属性值的元素
      var ali = $("li[class*='active']");
      console.log(ali);
      // 7. 子元素
      //匹配第一个子元素
      var c1 = $("ul li:first-child");
      console.log(c1[0]);
      //匹配同类型的第一个元素
      var c2 = $("ul li:first-of-type");
      console.log(c2[0]);
      //匹配最后一个子元素
      var c3 = $("ul li:last-child");
      console.log(c3[0]);
      //匹配同类型的最后一个元素
      var c4 = $("ul li:last-of-type");
      console.log(c4[0]);
      //匹配指定的子元素
      var c5 = $("ul li:nth-child(2)");
      console.log(c5[0]);
      //匹配指定的子元素，从末尾数起
      var c6 = $("ul li:nth-last-child(2)");
      console.log(c6[0]);
      //匹配指定的同类型的子元素
      var c7 = $("ul li:nth-of-type(3)");
      console.log(c7[0]);
      //匹配只有一个子元素
      var c8 = $("form input:only-child");
      console.log(c8[0]);
      // 8. 表单
      //匹配单行文本框
      var b1 = $(":text");
      console.log(b1);
      //匹配密码框
      var b2 = $(":password");
      console.log(b2[0]);
      //匹配单选按钮
      var b3 = $(":radio");
      console.log(b3[0]);
      //匹配复选框
      var b4 = $(":checkbox");
      console.log(b4[0]);
      //匹配提交按钮
      var b5 = $(":submit");
      console.log(b5[0]);
      //匹配按钮
      var b6 = $(":button");
      console.log(b6[0]);
      //匹配文件域
      var b7 = $(":file");
      console.log(b7[0]);
      //匹配隐藏元素
      var b8 = $("input:hidden");
      console.log(b8[0]);
      // 9.表单对象属性
      //匹配可用的input元素
      var v1 = $("input:enabled");
      console.log(v1);
      //匹配不可用的input元素
      var v2 = $("input:disabled");
      console.log(v2[0]);
      //匹配被选中的元素
      var v3 = $("input:checked");
      console.log(v3[0]);
      //匹配被选中的option元素
      var v4 = $("select option:selected");
      console.log(v4[0]);
    </script>
  </body>
</html>

三、属性


<!DOCTYPE html>
<html lang="zh_hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
      .active {
        color: blue;
      }
    </style>
  </head>
  <body>
    <ul id="ul01">
      <li class="li01">01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
    </ul>
  </body>
  <form action="">
    <input type="radio" value="篮球" name="" id="" />
  </form>
  <script>
    // 1. 属性
    //获取指定属性值
    var ul = $("ul").attr("id");
    console.log(ul);
    //删除属性
    var li01 = $("ul li:nth-of-type(1)");
    li01.removeAttr("class");
    console.log(li01[0]);
    //设置属性值
    var li02 = $("ul li:nth-of-type(2)");
    li02.prop({
      class: "li02",
      style: "color: red;",
    });
    console.log(li02[0]);
    // 2. CSS类
    //添加一个类
    li01.addClass("active");
    //删除一个类
    li02.removeClass("li02");
    //存在则删除，不存在则添加一个类
    var li03 = $("ul li:nth-of-type(3)");
    li03.toggleClass("li03");
    console.log(li03[0]);
    // 3. HTML代码/文本/值
    //获取文本内容
    console.log(li03.html());
    //设置文本内容
    li02.text("0202");
    console.log(li02[0]);
    //获取value值
    var val = $("form input").val();
    console.log(val);
    //设置value值
    $("form input").val("足球");
    console.log($("form input")[0]);
  </script>
</html>

四、文档处理

<!DOCTYPE html>
<html lang="zh_hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  </head>
  <body>
    <ul id="u01">
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
    </ul>
    <li class="oli">1</li>
    <li class="oli">2</li>
    <li class="oli">3</li>
    <li class="oli">4</li>
    <li class="o2li">1</li>
    <li class="o2li">2</li>
    <li class="o2li">3</li>
    <li class="o2li">4</li>
    <div style="color: blue;">
      <p>123</p>
    </div>
  </body>
  <script>
    // 1. 内部插入
    //在末尾插入一个子元素
    $("ul").append("<li>05</li>");
    //将子元素插入到该元素的末尾
    $("<li>06</li>").appendTo("ul");
    //在起始位置插入一个子元素
    $("ul").prepend("<li>00</li>");
    //将子元素插入到该元素的起始位置
    $("<li>-1</li>").prependTo("ul");
    // 2. 外部插入
    //在元素后面添加一个元素
    $("ul li:last-child").after("<li>001</li>");
    //在元素前面添加一个元素
    $("ul li:first-child").before("<li>002</li>");
    //将元素添加到该元素的后面
    $("<li>003</li>").insertAfter("ul li:last-child");
    //将元素添加到该元素的前面
    $("<li>004</li>").insertBefore("ul li:first-child");
    // 3. 包裹
    //把一个元素用另一个元素包裹起来
    $(".oli").wrap("<ol></ol>");
    //移除父元素
    $("p").unwrap();
    //把所有元素用另一个元素包裹起来
    $(".o2li").wrapAll("<ol></ol>");
    // 4. 替换
    //替换元素
    console.log($("ul li").length);
    $("ul li").replaceWith("<p>hello</p>");
    //用新元素把旧元素给替换掉
    $("<li>test</li>").replaceAll("ul p");
    // 5. 删除
    //删除元素
    $(".oli:last").remove();
    //删除子元素
    $("#u01").empty();
    // 6. 复制
    var lili02 = $(".o2li").clone();
    console.log(lili02);
  </script>
</html>

五、课程总结

今天学习了 jQuery 的基础知识和DOM操作，通过上课认真听讲和认真完成老师布置的作业，使得我对 jQuery的理解和运用更加深入和熟悉。最主要的知识点是明白和掌握了DOM操作的特点以及基本用法。

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

前端 - JS - DOM操作和事件处理

2020-06-24 12:59:31

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation