jquery基础知识：jQuery参数四种类型|getter|setter方法实操

jQuery参数四种类型|getter|setter方法实操

实例演示$()函数的四个参数;
将课堂上提及的所有getter/setter方法全部上机做一遍

一、jQuery参数四种类型

1.1 $(选择器,上下文): 获取元素

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  </head>
  <body>
      <ul id="first">
      <li>我们爱家园1</li>
      <li>我们爱家园家2</li>
      <li>我们爱家园3</li>
    </ul id="second">
      <li>我们爱家园1</li>
      <li>我们爱家园家2</li>
      <li>我们爱家园3</li>
    </ul>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
    <script>
      // 1. $(选择器,上下文): 获取元素
       // 原生js
      document.querySelectorAll("li").forEach(li => (li.style.color = "red"));
      //转成jq
      $("#first li").css("color", "green");
</script>
</body>
</html>

图示：
$(选择器,上下文)获取元素

1.2$(js)对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>$(js)对象转为jQuery对象</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  </head>
  <body>
    <ul id="first">
      <li>我们爱家园1</li>
      <li>我们爱家园家2</li>
      <li>我们爱家园3</li>
    </ul id="second">
      <li>我们爱家园1</li>
      <li>我们爱家园家2</li>
      <li>我们爱家园3</li>
    </ul>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
    <script>
  // 原生js
      document.querySelectorAll("li").forEach(li => (li.style.color = "red"));
      //转成jq
      $("#first li").css("color", "green");
      $("#first li").css("color", "green");
    //(js对象): jQuiery包装器,js对象是原生的js对象,将原生的js对象转为jQuery对象
    // 因为想使用jQuery对象上的非常丰富的方法或属性
      document.body.style.backgroundColor = "DoderBlue";
      //   想用jquery中的css方法来设置style属性(内联样式)
      $(document.body).css("background", "MediumBlue");
</script>
</body>
</html>

图示：
$(js)对象转为jQuery对象

1.3$(html文本): 生成dom元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>$(html文本): 生成dom元素</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  </head>
  <body>
    <ul id="first">
      <li>我们爱家园1</li>
      <li>我们爱家园家2</li>
      <li>我们爱家园3</li>
    </ul id="second">
      <li>我们爱家园1</li>
      <li>我们爱家园家2</li>
      <li>我们爱家园3</li>
    </ul>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
    <script>
  // 原生js
      document.querySelectorAll("li").forEach(li => (li.style.color = "red"));
      //转成jq
      $("#first li").css("color", "DeepSkyBlue");
    //(js对象): jQuiery包装器,js对象是原生的js对象,将原生的js对象转为jQuery对象
    // 因为想使用jQuery对象上的非常丰富的方法或属性
      document.body.style.backgroundColor = "DoderBlue";
      //   想用jquery中的css方法来设置style属性(内联样式)
      $(document.body).css("background", "Lavender");
       document.querySelector("#first").insertAdjacentHTML("beforeend", "<li>PHP中文网14期学习氛围好~~</li>");
      //console.log($("<li>JQ基础要好好学~~</li>"));
      //$("<li>PHP中文网14期学习氛围?</li>").appendTo(document.querySelector("#first"));
</script>
</body>
</html>

图示：
$(html文本): 生成dom元素
1.4$(callback回调函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>$(callback回调函数</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>
  </head>
  <body>
    <ul id="first">
      <li>我们爱家园1</li>
      <li>我们爱家园家2</li>
      <li>我们爱家园3</li>
    </ul id="second">
      <li>我们爱家园1</li>
      <li>我们爱家园家2</li>
      <li>我们爱家园3</li>
    </ul>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
    <script>
  // 原生js
      document.querySelectorAll("li").forEach(li => (li.style.color = "red"));
      //转成jq
      $("#first li").css("color", "DeepSkyBlue");
    //(js对象): jQuiery包装器,js对象是原生的js对象,将原生的js对象转为jQuery对象
    // 因为想使用jQuery对象上的非常丰富的方法或属性
      document.body.style.backgroundColor = "DoderBlue";
</script>
</body>
</html>

图示：
$(callback回调函数

二、getter|setter方法实操

<body>
    <h2 class="red">用户登录</h2>
    <form action="handle.php" method="post" id="login">
      <label for="email">Email:</label>
      <input type="email" name="email" id="email" autofocus value="chinagirl@chinagirl.com.cn" />
      <label for="password">Password:</label>
      <input type="password" name="password" id="password" value="不少于6位" />
      <label for="confirm">PHP网:</label>
      <div>
        <input type="radio" name="save" id="confirm" value="1" /><label for="confirm">保存</label>
        <input type="radio" name="save" id="cancel" value="0" checked /><label for="cancel">放弃</label>
      </div>
      <button>登录</button>
    </form>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
      // html(): innerHTML
      // text(): innerText / textContent
      console.log(document.querySelector("h2").innerHTML);
      // jquery
      console.log($("h2").html());
      // text()获取元素的文本内容
      console.log($("h2").text());
    </script>
  </body>

图示：
getter|setter方法实操

一、jQuery参数四种类型

二、getter|setter方法实操

相关文章