演示$()函数的四个参数以及部分getter/setter方法

$()函数:

$(选择器,上下文): 获取元素
$(js对象): jQuiey包装器,js对象是原生的js对象,将原生的js对象转为jQuery对象
$(html文本): 生成dom元素
$(callback回调函数):传一个回调当参数,当页面加载完成后会自动调用它

样式代码:

<title>$()</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
      $(function () {       // 回调函数
        $("<li>今天要晚起</li>").appendTo(document.querySelector("#first"));
        console.log(document.querySelector("#first"));
      });
</script>
<body>
    <ul id="first">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
    <ul id="second">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
  <script>
   //$(选择器,上下文): 获取元素 原生
      document.querySelectorAll("li").forEach((li) => (li.style.color = "blue"));
      $("#first li").css("color", "green");    // jquery
      document.body.style.backgroundColoe = "yellow";    // 因为想使用jQuery对象上的非常丰富的方法或属性
      $(document.body).css("background", "lightgreen");   //想用jquery中的css方法来设置style属性(内联样式)
      //将jquery对象还原成原生的js对象集合 ....spread扩展,....rest归并
    console.log($(document.querySelectorAll("li")).get(2));
     // get(n),[n]: 将jQuery集合中的某一个对象还原成原生的js对象
      $(document.querySelectorAll("li")).get(2).style.backgroundColor =
        "violet";
      $(document.querySelectorAll("li"))[0].style.backgroundColor = "white";
            document       //$(html文本): 生成dom元素
        .querySelector("#first")
        .insertAdjacentHTML("beforeend", "<li>大家晚上好呀~~</li>");
        console.log($("<li>大家晚上好呀~~</li>"));
        $("<li>今天吃了吗?</li>").appendTo(document.querySelector("#first")); 
   </script>
</body>

效果预览:

getter/setter方法:

样式代码:

  <body>
    <h2 class="red">用户登录</h2>
    <form action="handle.php" method="post">
      <label for="email">账号:</label>
      <input type="email" name="email" id="email" autofocus value="leture@php.cn" />
      <label for="password">密码:</label>
      <input type="password" name="password" id="password" value="不少于六位" />
      <label for="confirm">记住密码:</label>
      <div>
        <input type="radio" name="save" id="confirm" value="1" checkeb /><label for="confirm">保存</label>
        <input type="radio" name="save" id="cancel" value="0" /><labelfor="cancel">返回</label>
     </div>
     <button>登录</button>
    </form>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
   <script>
      // attr():获取/设置元素属性
      // attr(name):getter / attr(name,value): setter
      const form = $("form");
      console.log(form.attr("action"));
      form.attr("action", "admin/check.php");
      console.log(form.attr("action"));
      //   第二个参数使用回调
      form.attr("action", () => {
        let method = form.attr("method").toUpperCase();
        return method === "GET" ? "query.php?id=2" : "register.php";
      });
      console.log(form.attr("action"));
    </script>
  </body>
</html>

css代码:

<style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: violet;
      }
      form {
        width: 400px;
        /* height: 150px; */
        padding: 20px 10px;
        border: 1px solid blue;
        box-shadow: 0 0 5px blueviolet;
        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:  #bbbbbb;
        border: none;
        cursor: pointer;
      }
      .red {
        color: red;
      }
</style>

$()函数:

样式代码:

效果预览:

getter/setter方法:

样式代码:

css代码:

效果预览:

相关文章