1. 下载jQuery之后, 那如何使用呢?假如我想操作一个div标签, 给这个标签补充文字
<!DOCTYPE html>
<html>
<head>
<title>初识:JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<!--定义一个无文本的div标签-->
<div id = "info"></div>
<!--将jQuery引入-->
<script src="../file/jquery-3.7.1.min.js"></script>
<script>
// $("#info"):意思是找到id为“info”的标签,.text的意思是给这个标签插入文本
$("#info").text("插入的数据");
</script>
</body>
</html>
效果:
2、 jQuery的选择器:使用jQuery操作标签时,首先第一部得找到要操作的标签,如何寻找自己想要的标签? 就通过选择器来寻找
id选择器:$("#info")
<body>
<div id = "info"></div>
<script src="../file/jquery-3.7.1.min.js"></script>
<script>
$("#info").text("插入的数据");
</script>
</body>
class选择器:$(".info")
<body>
<div class="info"></div>
<div class="info"></div>
<script src="../file/jquery-3.7.1.min.js"></script>
<script>
$(".info").text("插入的数据");
</script>
</body>
标签选择器:$("h1")
<body>
<h1 class="info"></h1>
<h2 class="info"></h2>
<script src="../file/jquery-3.7.1.min.js"></script>
<script>
$("h1").text("插入的数据");
</script>
</body>
多选择器,也就是以不同条件选择多个标签:$("h1,.info2,#v1")
<body>
<h1 class="info"></h1>
<h2 class="info2"></h2>
<div id ='v1'></div>
<script src="../file/jquery-3.7.1.min.js"></script>
<script>
$("h1,.info2,#v1").text("插入的数据");
</script>
</body>
层级选择器,空格代表下一层级:$("#v1 h1.info2")
<body>
<div id ='v1'>
<h1 class="info"></h1>
<h1 class="info2"></h1>
</div>
<script src="../file/jquery-3.7.1.min.js"></script>
<script>
$("#v1 h1.info2").text("插入的数据");
</script>
</body>
3、 jQuery的筛选器:有了选择器之后为啥还有筛选器呢?在实际工作当中,当使用(选择器)之后可能要需要再做一层筛选,这时就用到了筛选器, 其实(筛选器)更像(关系选择器),它是使用(子、兄、父、子孙...)关系来进行筛选标签的
父级:parent
<body>
<div id ='v1'>
<h1 id="info"></h1>
</div>
<script src="../file/jquery-3.7.1.min.js"></script>
<script>
// .info 找到h1标签,parent找到它的父级标签,最后找到div标签
$(".info").parent();
</script>
</body>
孩子:children
<body>
<div id ='v1'>
<h1 id="info1"></h1>
<h2 id="info2"></h2>
</div>
<script src="../file/jquery-3.7.1.min.js"></script>
<script>
// .v1 找到div标签,children找到它的孩子标签,最后找到h1和h2标签
$(".v1").children();
</script>
</body>
兄弟:
上面的兄弟:prev
下面的兄弟:next
找与自己同层级上面和下面所有兄弟,除自己外:siblings
<body>
<div id ='v1'>
<h1 id="info1"></h1>
<h2 id="info2"></h2>
<h3 id="info3"></h3>
<h4 id="info4"></h4>
</div>
<script src="../file/jquery-3.7.1.min.js"></script>
<script>
// .info2 找到h2标签,prev上面兄弟h1标签
$(".info2").prev();
// .info2 找到h2标签,prev下面兄弟h3标签
$(".info2").next();
// .info2 找到h2标签,siblings与自己同级的所有兄弟,找到h1、h3、h4标签
$(".info2").siblings();
</script>
</body>
子孙:find
<body>
<div id="v1">
<div id ='v2'>
<h1 id="info1"></h1>
<h1 id="info2"></h1>
<h1 id="info3"></h1>
<h1 id="info4"></h1>
</div>
</div>
<script src="../file/jquery-3.7.1.min.js"></script>
<script>
// 找到所有h1标签
$(".v1").find('h1');
// 找到id=info1的h1标签
$(".v1").find('#info1');
</script>
</body>
补充:jQuery支持链式编程,也就是不断地在后面点下去
$(".v1").find('#info1').find('#info2')...;