前端 - 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操作的特点以及基本用法。

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

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

2020-06-24 12:59:31