【jQuery】1、jquery获取元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery</title>
  <!-- 引入jquery模块 -->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <div id="box">
    <p class="aa">paa</p>
  </div>
  <div class="aa"></div>
  <div class="aa"></div>
  <div class="bb" data-bb="这是自定义标签属性"></div>
  <script>
    //1.获取标签
    //jQuery
    const $boxp = $("p");  //通过标签获取
    const $box = $("#box");
    const $boxaa = $("#box .box"); //和css选择器类似
    //原生
    const box = document.getElementById("box"); 

    //2.创建标签
    //jQuery
    const $a = $("<a>123</a>");
    //原生
    const a = document.createElement("a");
    a.innerHTML = 123;

    //3.jQuery遍历方法each()
    const $aa = $(".aa");
    $aa.each((i,v) =>{
      console.log(i); // 0 1
      console.log(v); //<div class="aa"></div>
    })
    //获取长度
    console.log($aa.length); //3

    //jQuery获取 get转原生对象
    const p = $box.get(0);  //<p class="aa">paa</p>
    //修改内容
    p.innerHTML = 111; //<p class="aa">111</p>

    //获取自定义属性9
    const $bb = $(".bb");
    console.log($bb.data("bb"));  //这是自定义标签属性

  </script>
</body>
</html>
发布了218 篇原创文章 · 获赞 35 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/qq_41614928/article/details/102623312