初学jQuery

1.$()的用法

<!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="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script> -->
    <script src="js/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <h1>今天学jQuery</h1>
    <div class="one">
      <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
      </ul>
    </div>
    <div class="two">
      <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
      </ul>
    </div>
    <script>
      //1.$():工厂函数
      $("h1").css("color", "red");
      //$()的第二个参数，上下文
      $("li", ".one").css("color", "green");
      $("li", ".two").css("color", "blue");
      //2.$(js原生对象)
      //将js对象包装成一个jquery对象，从而可以直接调用jQuery中的方法
      var lis = document.querySelectorAll(".two li");
      console.log(lis);
      lis.forEach(function (item) {
        item.style.background = "yellow";
      });
      //想使用jquery中的css()方法，必须将lis包装/转换成一个jQuery对象
      console.log($(lis));
      $(lis).css("background-color", "pink");
      //3.$(html文本)  创建元素
      /* var h2 = document.createElement("h2");
      h2.innerText = "文本内容";
      document.body.appendChild(h2); */
      $("<h2>文本内容</h2>").appendTo(document.body);
      //4.$(callback):当html文档加载完之后立即调用这个函数
      $(function () {
        $(document.body).css({
          background: "wheat",
          "font-size": "20px",
        });
      });
    </script>
  </body>
</html>

2.重要术语

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>重要术语</title>
    <script src="js/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <script>
      //1.jquery函数
      $(document.body).css("background", "wheat");
      jQuery(document.body).css("background", "green");
      document.body.style.backgroundColor = "lightgreen";
      //2.jQuery对象
      console.log($("*"));
      console.log($("*").length);
      console.log($("*")[6]);
      $("*")[6].style.backgroundColor = "lightblue";
      $("*").get(6).style.backgroundColor = "lightgreen";
      //$("*")[6] === $("*").get(6)
      //3.jQuery静态方法
      //$:函数，函数对象
      //$():jQuery对象
      /* $.each($("*"), function (key, value) {
        console.log(key, value);
      }); */
      //each()此时就不是静态方法了，为什么，它在对象上调用
      $("*").each(function (key, value) {
        console.log(key, value);
      });
    </script>
  </body>
</html>

3.查询结果的处理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>查询结果的处理</title>
    <script src="js/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
    <script>
      //1.toArray():将结果转为真正数组
      console.log(document.getElementsByTagName("li"));
      //返回一个集合
      var lis = $(document.getElementsByTagName("li")).toArray();
      console.log(lis);
      lis.forEach(function (item) {
        item.style.color = "red";
      });
      //2.map()
      //map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象
      var arr = [1, 2, 3, 4];
      var res = arr.map(function (item) {
        return item * 2;
      });
      console.log(arr, res);
      var res2 = $.map(arr, function (item) {
        return item * 2;
      });
      console.log(res2);
      //3.index()：返回jQuery集合中的元素的索引
      //jquery对象是一个类数组：具有从0开始的递增的正整数索引，并且还有一个length属性
      var obj = {
        0: "a",
        1: "b",
        2: "c",
        3: "d",
        length: 4,
      };
      //obj满足类数组特征，所以它就是类数组（类似一个数组）
      console.log($("li"));
      $("li").click(function () {
        console.log($(this).index() + 1);
      });
    </script>
  </body>
</html>

4.表单的应用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>getter/setter</title>
  </head>
  <body>
    <h2 class="red">用户登录</h2>
    <form action="handle.php" method="POST">
      <label for="username">账号：</label>
      <input
        type="text"
        name="username"
        id="username"
        placeholder="请输入账号!"
        required
      />
      <label for="">密码：</label>
      <input
        type="password"
        name="password"
        id="password"
        placeholder="请输入密码!"
        required
      />
      <label for="">记住我</label>
      <div>
        <input type="radio" name="save" id="confrim" value="1" checked />
        <label for="confrim">保存</label>
        <input type="radio" name="save" id="cancel" value="0" />
        <label for="cancel">放弃</label>
      </div>
      <button>登录</button>
    </form>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
      var form = $("form");
      //attr():获取元素的属性
      //attr(name):获取属性的值
      //attr(name,value):设置属性的值
      console.log(form.attr("action"));
      //设置属性
      form.attr("action", "admin/check.php");
      console.log(form.attr("action"));
      //同时设置多个属性
      form.attr({
        action: "index.php",
        method: "GET",
      });
      console.log(form.attr("action"));
      console.log(form.attr("method"));
      //attr()第二个参数支持回调
      //根据请求的类型，动态设置action
      //get ==> query.php?id=1
      //post ==> register.php
      form.attr("action", function () {
        var method = $(this).attr("method");
        console.log(method);
        return method === "get" ? "query.php?id=1" : "register.php";
      });
    </script>
  </body>
</html>

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

初学jQuery

2020-08-29 07:53:59