Community Learn Tools Library Leisure
search
English
Home > List of blog posts > $()的四种类型； jQuery方法；jQuery对象转js对象的方法----0413
Blogger Information
Blog 18
fans 1
comment 0
visits 12217
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
$()的四种类型； jQuery方法；jQuery对象转js对象的方法----0413
木樨
Original
710 people have browsed it

1.$()的四种类型参数的应用场景实例演示

案例 html 结构：

  1. <ul class="list">
  2.   <li class="item">item1</li>
  3.   <li class="item">item2</li>
  4.   <li class="item">item3</li>
  5.   <li class="item">item4</li>
  6.   <li class="item">item5</li>
  7. </ul>

1. $(选择器, 上下文)

  1. // 1. $(选择器, 上下文): 获取dom元素
  2. // 将所有li前景色更新成红色
  3. // 原生
  4. document.querySelectorAll(".list .item").forEach((item) => (item.style.color = "red"));
  6. // jQuery
  7. console.log($(".item", ".list"));
  8. $(".item", ".list").css("color", "green");
  9. // 第二参数上下文完全可以用第一个参数来模拟
  10. $(".list .item").css("color", "blue");

2. $(js 原生对象)

  1. // 2. $(js原生对象): 将原生js对象转换jQuery对象,也叫"包装"成jQuery对象
  2. // 这时,这个$()也有一个名称: 包装器
  3. // document.body.css("background-color", "yellow");
  4. $(document.body).css("background-color", "yellow");
  5. console.log($(document.body) instanceof jQuery);

3. $(html 文本)

  1. // 3. $(html文本): 创建dom元素,直接包装成jQuery对象返回
  2. // const p = document.createElement("p");
  3. // p.textContent = "Hello World";
  4. // document.body.prepend(p);
  5. document.body.insertAdjacentHTML("afterbegin", "<p>哈哈,我还没有吃晚饭</p>");
  6. $("<p>同志们,辛苦了</p>").insertAfter(".list");

4. $(回调)

  1. // 4. $(回调): dom树一旦创建完成,就会立即执行这个回调
  2. // $("body h2").css("color", "red");
  3. $(() => {
  4.   $("body h2").css("color", "red");
  5. });

2. 将课堂提及的所有 jQuery 方法全部实例演示

案例 html 结构：

  1. <body id="main">
  2.   <h2 class="title">用户登录</h2>
  3.   <form action="handle.php" method="POST" id="login">
  4.     <label for="email">Email:</label>
  5.     <input type="email" name="email" id="email" autofocus placeholder="leture@php.cn" />
  6.     <label for="password">Password:</label>
  7.     <input type="password" name="password" id="password" placeholder="不少于6位" />
  8.     <label for="confirm">记住我:</label>
  9.     <div>
  10.       <input type="radio" name="save" id="confirm" value="1" checked />
  11.       <label for="confirm">保存</label>
  12.       <input type="radio" name="save" id="cancel" value="0" />
  13.       <label for="cancel">放弃</label>
  14.     </div>
  15.     <button>登录</button>
  16.   </form>
  17. </body>

案例 css 样式：

  1. body {
  2.   display: flex;
  3.   flex-direction: column;
  4.   align-items: center;
  5.   background-color: lightcyan;
  6.   font-weight: lighter;
  7. }
  9. #login {
  10.   width: 400px;
  11.   padding: 20px 10px;
  12.   border: 1px solid #aaa;
  13.   box-shadow: 0 0 5px #888;
  14.   box-sizing: border-box;
  15.   background-color: lightseagreen;
  16.   color: #fff;
  17.   display: grid;
  18.   grid-template-columns: 80px 200px;
  19.   gap: 10px;
  20.   place-content: center center;
  21. }
  23. #login input {
  24.   border: none;
  25.   outline: none;
  26. }
  28. button {
  29.   grid-column: 2 / 3;
  30.   height: 32px;
  31.   background-color: lightskyblue;
  32.   border: none;
  33.   outline: none;
  34. }
  36. button:hover {
  37.   color: white;
  38.   background-color: coral;
  39.   color: #fff;
  40.   /* border: none; */
  41.   cursor: pointer;
  42. }
  44. .title {
  45.   color: #666;
  46.   font-weight: lighter;
  47. }

1. 属性操作: attr()

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  2. <script>
  3.   // console.log($("body").attr("id"));
  5.   // attr():获取/设置元素属性
  6.   // attr(name):getter
  7.   // attr(name,value): setter
  8.   // removeAttr(name): 删除属性
  10.   const form = $("form");
  11.   // 获取
  12.   console.log(form.attr("action"));
  13.   // 设置
  14.   form.attr("action", "admin/check.php");
  15.   console.log(form.attr("action"));
  17.   // 第二个参数允许使用回调
  19.   // 根据表单的请求类型, 动态设置不同的处理脚本
  20.   // get: action = query.php?id=2
  21.   // post: action = register.php
  23.   form.attr("action", () => {
  24.     return form.attr("method").toLocaleLowerCase() === "post" ? "register.php" : "query.php?id=2";
  25.   });
  26.   console.log(form.attr("action"));
  28.   // 删除属性
  29.   $("h2").removeAttr("class");
  30. </script>

2.行内样式操作: css()

  1. // css(): 包括了行内样式的计算样式
  2. // css(name): getter
  3. // css(name,value): setter
  4. // css(name,callback)
  6. // 原生
  7. console.log(document.querySelector("form").style.width);
  8. console.log(window.getComputedStyle(document.querySelector("form"), null).getPropertyValue("width"));
  10. // jquery
  11. const form = $("#login");
  12. // css()可以直接获取到计算样式
  13. console.log(form.css("width"));
  15. form.css("border-top", "5px solid yellow");
  16. // css(obj), 同时设置多个样式声明
  17. form.css({
  18.   "border-bottom": "5px solid #000",
  19.   background: "green",
  20. });
  22. // css(name,callback)
  23. // 表单的背景色随机变换
  24. form.css("background", () => {
  25.   const colors = ["lightpink", "lightblue", "lime", "wheat"];
  26.   // 生成一个随机的数组下标, 0 - 3之间
  28.   return colors[Math.floor(Math.random() * colors.length)];
  29. });

3.表单控件的值: val()

  1. // val():无参,默认就是获取控件元素(input,select...)的value属性的值
  2. // val(param): 设置
  3. // val(callback)
  5. // 原生
  6. document.forms.login.email.value = "admin@qq.com";
  7. console.log(document.forms.login.email.value);
  9. // jquery
  10. console.log($("#email").val());
  11. // $("#password").val("123456");
  12. $("input:password").val("123456");
  13. console.log($("input:password").val());
  15. console.log($("input:radio:checked").val());
  17. $("#email").val(() => "朱老师@php.cn");

4. text(), html()

  1. <div class="box"></div>
  2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  4. <script>
  5.   // text(): 读/写入文本, textContent
  6.   // html(): 读/写html文本, innerHTML
  8.   $(".box").text("hello world");
  9.   // text()不能解析文本中的html,转为实体字符原样输出
  10.   $(".box").text("<strong style='color:red'>hello world</strong>");
  12.   // html()
  13.   $(".box").html("<strong style='color:red'>hello world</strong>");
  14. </script>

5. class 操作

  1. <style>
  2.   .title {
  3.     color: red;
  4.   }
  5. </style>
  6. <h1>php.cn</h1>
  7. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  8. <script>
  9.   // 原生: classList对象
  10.   let h1 = document.querySelector("h1");
  11.   h1.classList.add("title"); // 添加class
  12.   h1.classList.remove("title"); // 移除class
  13.   h1.classList.toggle("title"); // 切换class
  15.   // -------------------------------
  17.   // jquery
  18.   // addClass() => classList.add()
  19.   // removeClass() => classList.remove()
  20.   // toggleClass() => classList.toggle()
  21.   const h1 = $("h1");
  22.   h1.addClass("title");
  23.   h1.removeClass("title");
  24.   h1.toggleClass("title");
  25. </script>

3. 为什么需要将 jQuery 对象转 js 对象,方法是什么?

因为 jQuery 的局限性,很多场景下需要将 jQuery 对象转为 js 原生对象来调用 js 功能完成操作

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  2. <ul class="list">
  3.   <li class="item">item1</li>
  4.   <li class="item">item2</li>
  5.   <li class="item">item3</li>
  6.   <li class="item">item4</li>
  7.   <li class="item">item5</li>
  8. </ul>
  10. <script>
  11.   // 因为jQuery的局限性,很多场景下需要将jQuery对象转为js原生对象来调用js功能完成操作
  13.   console.log($(".list .item"));
  14.   // 任何一个$()返回的都是一个jQuery集合对象
  15.   // 整体集合是一个JQuery对象,但是集合中的每个成员却是原生的js对象
  16.   console.log($(".list .item")[0]);
  18.   // 第一个li本身就是原生js对象
  19.   $(".list .item")[0].style.backgroundColor = "yellow";
  20.   // 也可以使用jQuery封装的另一个方法
  21.   $(".list .item").get(2).style.backgroundColor = "lightgreen";
  23.   // 将整个ul当成js原生对象
  24.   console.log($(".list"));
  25.   console.log($(".list")[0]);
  26.   $(".list")[0].style.border = "2px solid";
  27. </script>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
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