search

博客列表 >$()的四种类型； jQuery方法；jQuery对象转js对象的方法----0413

$()的四种类型； jQuery方法；jQuery对象转js对象的方法----0413

木樨
木樨原创
2021年04月21日 11:40:36713浏览

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>
上一条：jQuery常用操作； jQuery中的$.ajax方法； Vue基本术语与插值语法----0414下一条：购物车功能：全选与取消，自动计算----0412
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多