<!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>
【jQuery】1、jquery获取元素
最新推荐文章于 2022-05-19 12:55:19 发布