【JavaScript】jQuery的使用

---

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>