jQuery-CSDN博客

本文链接：https://blog.csdn.net/weixin_38044598/article/details/108567621

jQuery

1. 导入方式

第一种方式：在线jQuery库

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

第二种方式：本地jQuery库

<script src="lib/jquery-3.5.1.js"></script>

2. jQuery的经典公式(非常重要)

$(selector).action()

<!--使用案例-->
<a href="https://www.baidu.com" id="test-jQuery" target="_blank">点我呀</a>

<!--公式：$(selector).action()-->
<script>
  // jQuery方式：快速
  $("#test-jQuery").click(function () {
  	alert('HELLO WORLD!');
	});
</script>

3. 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识jQuery</title>

    <!--导入方式1：在线jQuery库-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!--导入方式2：本地jQuery库-->
    <script src="lib/jquery-3.5.1.js"></script>

</head>
<body>

    <a href="https://www.baidu.com" id="test-jQuery" target="_blank">点我呀</a>

    <!--公式：$(selector).action()-->
    <script>
        // 原始方式：笨拙
        // var a = document.getElementById("id");

        // jQuery方式：快速
        $("#test-jQuery").click(function () {
            alert('HELLO WORLD!');
        });
    </script>

</body>
</html>

4. jQuery选择器

文档工具站：https://jquery.cuishifeng.cn/index.html

<script>
    //原生js选择器
        //标签选择器
        document.getElementsByTagName();
        //id选择器
        document.getElementById();
        //class选择器
        document.getElementsByClassName();

    //jQuery选择器
        //标签选择器
        $("p").click();
        //id选择器
        $("#id").click();
        //class选择器
        $(".class").click();
</script>

5. jQuery事件

鼠标事件

关键代码

<!--要求：获取鼠标当前的一个坐标-->
鼠标实时坐标: <span id="mouseMove"></span>
<div id="divMove">
    <p id="pMove">在这里移动鼠标试试</p>
</div>

<script>
    //当网页元素加载完毕之后，响应事件
    $(function () {
        //得到鼠标在div里面实时移动的坐标
        $("#divMove").mousemove(function (coordinates) {
            //将得到的坐标显示在屏幕上
            $("#mouseMove").text('X:'+coordinates.pageX +' '+ 'Y:'+coordinates.pageY);
        })
    })
</script>

完整代码

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>

      <!--导入方式2：本地jQuery库-->
      <script src="lib/jquery-3.5.1.js"></script>

      <style>
          #divMove{
              background: aqua;
              width: 800px;
              height: 500px;
          }
          #pMove{
              font-size: 30px;
              font-family: ACGN-GaiDingGB;
              color: red;
          }
      </style>
  </head>
    
    
  <body>

  <!--要求：获取鼠标当前的一个坐标-->
  鼠标实时坐标: <span id="mouseMove"></span>
  <div id="divMove">
      <p id="pMove">在这里移动鼠标试试</p>
  </div>

  <script>
      //当网页元素加载完毕之后，响应事件
      $(function () {
          //得到鼠标在div里面实时移动的坐标
          $("#divMove").mousemove(function (coordinates) {
              //将得到的坐标显示在屏幕上
              $("#mouseMove").text('X:'+coordinates.pageX +' '+ 'Y:'+coordinates.pageY);
          })
      })
  </script>

  </body>
  </html>

运行结果

键盘事件
其他事件

6. jQuery操作DOM元素

节点文本操作

//获取值
$("#test-ul li[name=java]").text();
//设置值
$("#test-ul li[name=java]").text('python');

//获取值
$("#test-ul").html();
//设置值
$("#test-ul").html('<strong>ZHQ</strong>');

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>

      <!--导入方式2：本地jQuery库-->
      <script src="lib/jquery-3.5.1.js"></script>

  </head>
  <body>
      <ul id="test-ul">
          <li class="js">javaScript</li>
          <li name="java">java</li>
      </ul>

      <script>
          //获取值
          $("#test-ul li[name=java]").text();
          //设置值
          $("#test-ul li[name=java]").text('python');

          //获取值
          $("#test-ul").html();
          //设置值
          $("#test-ul").html('<strong>ZHQ</strong>');
        	
          //css操作
          $("#test-ul li[name=java]").css({'color':'red','font-size':'30px'});
      </script>
  </body>
  </html>

css操作

//css操作
$("#test-ul li[name=java]").css({'color':'red','font-size':'30px'});

元素的显示和隐藏

//元素的显示和隐藏
$("#test-ul li[name=java]").hide();
$("#test-ul li[name=java]").show();

… …