一、$()四种应用场景

1、$(选择器, 上下文)
2、$(js对象)
3、$(html文本)
4、$(callback)
$(): 工厂函数jquery(), $ 代替了 jQuery
demo.html中要引入lib/jquery-3.5.1.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>$()函数</title>
  </head>
  <body>
    <div id="first">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </div>
    <hr />
    <div id="second">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </div>
    <script src="lib/jquery-3.5.1.js"></script>
    <script>
      // 1. $(选择器, 上下文)
      // 原生
      document.querySelectorAll("li").forEach(function (item) {
        item.style.color = "red";
      });
      // jquery
      //   $("li").css("color", "green");
      // $()的第二参数, 上下文
      //只更新第一组列表的颜色
      $("li", "#first").css("color", "green");
      $("li", "#second").css("color", "blue");
      // 2. $(js原生对象)
      // 将js对象包装成一个jquery对象,从而可以直接调用jQuery中的方法
      var lis = document.querySelectorAll("#second li");
      console.log(lis);
      lis.forEach(function (item) {
        item.style.background = "yellow";
      });
      // 想使用jQuery中的css()方法,必须将lis包装/转换成一个jQuery对象
      console.log($(lis));
      $(lis).css("background-color", "cyan");
      // 3. $(html文本)
      // 在第一个前面插入文本
      $("<h2>Hello 世界</h2>").insertBefore("#first");
      // 4. $(callback): 当html文档加载完成之后立即调用这个函数
      $(function () {
        $(document.body).css({
          background: "wheat",
          "font-size": "20px",
        });
      });
    </script>
  </body>
</html>

二、attr()的常用操作

1、attr(): 获取元素的属性
2、attr(name): 获取属性的值
3、attr(name,value): 设置属性的值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>getter / setter -1</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #666;
      }
      form {
        width: 400px;
        /* height: 150px; */
        padding: 20px 10px;
        border: 1px solid #aaa;
        box-shadow: 0 0 5px #888;
        box-sizing: border-box;
        background-color: #eee;
        display: grid;
        grid-template-columns: 80px 200px;
        gap: 10px;
        place-content: center center;
      }
      button {
        grid-column: 2 / 3;
        height: 26px;
      }
      button:hover {
        color: white;
        background-color: #888;
        border: none;
        cursor: pointer;
      }
      .red {
        color: red;
      }
    </style>
  </head>
  <body>
    <h2 class="red">用户登录</h2>
    <form action="handle.php" method="GET"">
      <label for="email">Email:</label>
      <input
        type="email"
        name="email"
        id="email"
        autofocus
        value="leture@php.cn"
      />
      <label for="password">Password:</label>
      <input type="password" name="password" id="password" value="不少于6位" />
      <label for="confirm">记住我:</label>
      <div>
        <input type="radio" name="save" id="confirm" value="1" checked /><label
          for="confirm"
          >保存</label
        >
        <input type="radio" name="save" id="cancel" value="0" /><label
          for="cancel"
          >放弃</label
        >
      </div>
      <button>登录</button>
    </form>
    <script src="lib/jquery-3.5.1.js"></script>
    <script>
      var form = $("form");
       //1.获取元素的属性
      console.log(form.attr("action"));
      // 2.设置属性
      form.attr("action", "admin/check.php");
      console.log(form.attr("action"));
      // 同时设置多个属性值
      form.attr({
        "action": "select.php?id=10",
        "method": 'Post'
      });
      // attr()第二个参数支持回调
      // 3.获取当前的method属性值
      form.attr("action", function() {
          // 动态设置action
          // 根据请求的类型,动态设置action
         // get ==> query.php?id=1
         // post ==> register.php
         var method = $(this).attr('method').toLowerCase();
         console.log(method);
         // js表达式的的返回值,永远是等号的右边的值
          return (method === "get") ? 'query.php?id=1' : 'register.php'
      });
    </script>
  </body>
</html>

总结：
$()4种应用场景:选择器或上下文、js对象，html文本，callback
$:函数, 函数对象
$(): jQuery()对象
attr():获取元素的属性,获取属性的值,设置属性的值

批改老师：