👌JavaScript学习笔记-(肆)

开头
JQuery
巩固

开头

写在一开始.
批判思维开场 - JQuery 过时了吗?
于是找了篇文章看看…

2019 年了，jQuery 过时了吗？

多看文章就是好,hh,这次又收获了个美美哒分割线,如下

JQuery

JQuery API 中文文档

使用

JQuery 是个 JavaScript 函数库,使用方法:
- $(selector).action()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="../lib/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <a href="#" id="test-jquery">点我</a>

    <script>
      //选择器就是css选择器
      $("#test-jquery").click(function () {
        alert("hello,jQuery!");
      });
    </script>
  </body>
</html>

选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();

//jQuery css中的选择器它全部都能用！
//标签选择器
$("p").click();
//id选择器
$("#id1").click();
//class选择器
$(".class1").click;

事件

鼠标事件

案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="../lib/jquery-3.5.1.min.js"></script>
    <style>
      #divMove {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>

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

    <script>
      /**
       * ! 当网页元素加载完毕之后，响应事件
       * 原型: $(document).ready(function(){});
       * 简化后的: $(function (){});
       */
      $(function () {
        $("#divMove").mousemove(function (e) {
          $("#mouseMove").text("X: " + e.pageX + "Y: " + e.pageY);
        });
      });
    </script>
  </body>
</html>

展示

操作 DOM

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../lib/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <ul id="test-ul">
      <li class="js">JavaScript</li>
      <li name="python">Python</li>
    </ul>

    <script>
      // 操作DOM文本
      $("#test-ul li[class=js]").text(); //获得值
      $("#test-ul li[class=js]").text("设置值"); //设置值
      $("#test-ul").html(); //获得值
      $("#test-ul li[name=python").html("<strong>123</strong>"); //设置值

      // 操作css
      $("#test-ul li").css({ color: "red" });

      // 控制元素显示,本质display:none
      $("#test-ul li[name=python]").hide();
      $("#test-ul li[name=python]").show();
    </script>
  </body>
</html>