【JavaScript】jQuery的使用
文章目录
- 1.快速上手
- 2.寻找标签
- 3.间接寻找
- 4.操作样式
- 5.值的操作
- 6.事件
jQuery是一个JavaScript的第三方模块
1.快速上手
<!--修改内容为xiechimon-->
<h1 id="txt">XIECHIMON</h1><script src="static/js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">// 找到txt标签后修改内容$("#txt").text("xiechimon");</script>
2.寻找标签
-
ID选择器
<h1 id="txt">XIECHIMON</h1> <h1>XIECHIMON</h1>$("#txt") -
样式选择器
<h1 class="c1">XIECHIMON</h1> <h1 class="c2">XIECHIMON</h1>$(".c1") -
标签选择器
<h1>XIECHIMON</h1> <div>123</div> <h1>XIECHIMON</h1>$("div") -
层级选择器
<h1 class="c1"><div class="c2"><span></span><a></a></div> </h1>$(".c1 .c2 a") -
多选择器
<h1 class="c1"><div class="c2"><span></span><a></a></div> </h1> <li>123</li>$("#c1, #c2, li") -
属性选择器
<input type="text" name="n1">
<input type="text" name="n1">
<input type="text" name="n2">
$("input[name="n1"]")
3.间接寻找
- 找兄弟
<div><div>first</div><div id="c1">second</div><div>third</div><div>fourth</div> </div>$("#c1").prev() $("#c1") $("#c1").next() $("#c1").next().next()$("#c1").siblings() // 找到所有的兄弟标签 - 找父子
<div><div>first</div><div id="c1">second<div class="p10">1</div><div>2</div></div><div>third</div><div>fourth</div> </div> <div><div>1</div><div>2</div><div>3</div><div>4</div> </div>$("#c1").parent() $("#c1").parent().parent()$("#c1").children() $("#c1").children(".p10") // 所有的儿子中寻找class=p10$("#c1").find(".p10") // 去所有的子孙中寻找class=p10 $("#c1").find("div") // 去所有的子孙中寻找div
4.操作样式
- addClass
- removeClass
- hasClass
5.值的操作
<div id="c1">内容</div>
$("#c1").text("abc") //获取并设置文本内容为abc
<input type="text" id="c2" />
$("#c2").val("abc") //获取并设置值为abc
6.事件
<!--DOM绑定事件(不可批量绑定)-->
<input type="text" id="txtUser" placeholder="Username"><script src="static/js/jquery-3.7.1.min.js"></script>
<script>function getInfo() {}
</script>
<!--jQuery绑定事件(可批量绑定)-->
<ul><li>Baidu</li><li>Google</li><li>sougou</li>
</ul><script src="static/js/jquery-3.7.1.min.js"></script>
<script>// 点击li标签时，自动执行这个函数// $(this)表示当前点击的那个标签$("li").click(function() {});
</script>
- 在jQuery中可以直接删除标签
<div>Baidu</div><script>$("div").click(function() {$(this).remove();});
</script>
- 优先执行
<script>$(function () {// 当页面框架加载完成之后，自动就执行$("li").click(function() {var text = $(this).text();console.log(text);});})
</script>