search

博客列表 >JS - jQuery 基础

JS - jQuery 基础

晴天
晴天原创
2020年05月28日 15:34:15834浏览

jQuery 基础

1. jQuery 是什么

  • jQuery 是一个非常流行的 JavaScript 函数库
  • jQuery 经常用于 DOM 查询, 常用动画, Ajax 等常用操作
  • jQuery 宗旨: 写得更少,而做得更多

2. 引入 jQuery

  • 官网下载: jQuery 下载
  • CDN:Bootstrap 中文网,又拍云

  • Composer: composer require components/jquery

  • CDN 与官网下载到本地的对比

    • 官网下载总是可以获取最新版本,如果网站需要离线浏览只能选择它, 但资源下载会延缓网站打开速度
    • CDN 可以让用户选择最近的节点下载,并且用户浏览器可能在访问其它站点时已经缓存了这个库,速度很快
  • composer 下载的 jQuery,就像一个普通文件一样,直接用<script src=""></script>引入

3. $()函数

  • jQuery 库是基于一个全局函数:jQuery()实现的,可简写为$()
  • 调用$()会返回一个 jQuery 对象,但它不是构造函数(不用new调用),而是工厂函数
  • 对象成员由属性和方法组成,但 jQuery 更偏爱方法,所有的 jQuery 方法都需要使用工厂函数\$()调用
  • 通过$()函数创建的对象,可以调用定义在 jQuery 对象上的所有方法和属性
  • $()函数如此强大, 以至于不得不重点讨论一下,但在学习之前,应该将 jQuery 函数库引入到我们的项目中

3.1 \$()工厂函数的四种使用场景

  • 基本语法：\$(选择器).操作()
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <script src="lib/jquery-3.5.1.js"></script>
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <ul id="first">
  11.       <li>item1</li>
  12.       <li>item2</li>
  13.       <li>item3</li>
  14.     </ul>
  15.     <ul id="second">
  16.       <li>item1</li>
  17.       <li>item2</li>
  18.       <li>item3</li>
  19.     </ul>
  20.   </body>
  21.   <script>
  22.     // 1. $(选择器, 上下文): 返回jQuery对象
  23.     //   改变li的文本颜色
  24.     // 原生
  25.     document.querySelectorAll("li").forEach(function (item) {
  26.       item.style.color = "red";
  27.     });
  28.     // jQuery
  29.     $("li").css("color", "blue");
  30.     // 若只改变第一组的颜色
  31.     $("li", "#first").css("color", "black");
  32.     // 也可以这样写
  33.     $("#first > li").css("color", "red");
  35.     // 2. $(js对象), 返回一个jQuery对象, 将js对象包装成JQ对象
  36.     // 给第二组加个背景颜色
  37.     var lis = document.querySelectorAll("#second > li");
  38.     // 原生
  39.     lis.forEach(function (item) {
  40.       item.style.backgroundColor = "yellow";
  41.     });
  42.     // 将lis包装成jq对象
  43.     $(lis).css("background-color", "lightblue");
  45.     // 3. $(html文本), 将html文本包装成一个jQuery对象并返回
  46.     // 将标签插入到第一组中
  47.     $("<h1>PHP中文网</h1>").insertBefore("#first");
  49.     // 4. $(callback): 当html文档结构加载完成后就会立即执行这个回调
  50.     $(function () {
  51.       $("#first").css("background-color", "lightcyan");
  52.       $("#second").css({
  53.         "background-color": "#8888",
  54.         color: "blue",
  55.         "font-size": "50px",
  56.       });
  57.     });
  58.   </script>
  59. </html>

4. 重要术语

  • jQuery 函数 + jQuery()或$() + 用来创建 jQuery 对象 + 注册 DOM 就绪时需要执行的回调 + 充当 jQuery 命名空间 + 通常也称为jQuery全局对象,注意与 jQuery 对象的区别
  • jQuery 对象 + jQurey()函数的返回值 + 返回值是一组文档元素,也称之为”jQuery 集合”,”jQuery 包装集合”等
  • 选中元素 - 根据 css 选择器匹配到的所有文档元素集合 - 所以, 选中元素, 也可以称之为”匹配元素”
  • jQuery 方法: 只能由 jQuery 对象调用的方法, 如$('div').attr('style')
  • jQuery 静态方法: 定义在 jQuery 命名空间上的方法,即 jQuery 函数上的方法,如$.each()
  • 通过上下文,可以很方便的区分出 jquery 方法与静态方法,但有些方法的名称却是完全相同的,例如
  1. <script>
  2.   var cl = console.log.bind(console);
  3.   // 1. jQuery函数
  4.   //   $() === jQuery()
  5.   // 改变body背景颜色
  6.   // 原生
  7.   document.querySelector("body").style.backgroundColor = "red";
  8.   // jq对象
  9.   $("body").css("backgroundColor", "yellow");
  10.   jQuery("body").css("backgroundColor", "lightcyan");
  12.   // 2.jQuery对象
  13.   // 获取页面所有元素返回一个对象.对象无法进行foreach遍历
  14.   cl($("*"));
  15.   // 获取所有元素并将对象转为数组，进行遍历
  16.   cl(
  17.     $("*")
  18.       .toArray()
  19.       .forEach(function (item) {
  20.         cl(item);
  21.       })
  22.   );
  24.   // 3.jQuery静态方法与方法
  25.   // each() : 静态方法
  26.   $.each($("*"), function (index, item) {
  27.     cl(item); //序号   内容
  28.   });
  29.   // each()非静态方法
  30.   $("*").each(function (index, item) {
  31.     cl(index);
  32.   });
  33. </script>

5. jQuery 对查询结果的处理方式

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <script src="lib/jquery-3.5.1.js"></script>
  7.     <title>查询结果的处理</title>
  8.   </head>
  9.   <body>
  10.     <ul>
  11.       <li>item1</li>
  12.       <li>item2</li>
  13.       <li>item3</li>
  14.       <li>item4</li>
  15.       <li>item5</li>
  16.     </ul>
  17.   </body>
  18. </html>
  • toArray 将查询结果转为真正的数组
  1. <script>
  2.   var cl = console.log.bind(console);
  4.   var lis = $("ul > li"); // 返回一个jq对象
  5.   cl(lis);
  7.   //   原生
  8.   for (var i = 0; i < lis.length; i++) {
  9.     // 改变字体颜色
  10.     lis.get(i).style.color = "red";
  11.   }
  13.   //   jQuery
  14.   lis.toArray().forEach(function (item, index) {
  15.     // 改变字体颜色
  16.     $(item).css("color", "blue");
  17.     if (index >= 2) {
  18.       // 控制台打印
  19.       cl("元素" + index + " : " + item);
  20.       //   元素2 : [object HTMLLIElement]
  21.       //       元素3 : [object HTMLLIElement]
  22.       //       元素4 : [object HTMLLIElement]
  23.     }
  24.   });
  25. </script>
  • $.each() 回调的参数顺序与 forEach 不一样, \$().each(callback)
  1. <script>
  2.   var cl = console.log.bind(console);
  4.   var lis = $("ul > li"); // 返回一个jq对象
  5.   cl(lis);
  7.   lis.each(function (index, item) {
  8.     //   原生
  9.     this.style.color = "red";
  10.     // jq
  11.     $(this).css("color", "blue");
  12.   });
  13. </script>
  • $.map(), 必须要有返回值, 回调参数的参数与 foreach 的回调参数的参数相同
  1. <script>
  2.   var cl = console.log.bind(console);
  4.   var lis = $("ul > li"); // 返回一个jq对象
  5.   cl(lis);
  7.   var arr = $.map(lis, function (item, index) {
  8.     //    返回偶数
  9.     if (index % 2) {
  10.       return item;
  11.     }
  12.   });
  14.   $(arr).css("color", "yellow");
  15. </script>
  • index(): 返回 jQuery 查询集合中的索引
  1. <script>
  2.   var cl = console.log.bind(console);
  4.   var lis = $("ul > li"); // 返回一个jq对象
  5.   cl(lis);
  6.   lis.click(function () {
  7.     // 打印下点击了谁
  8.     cl("点击了", $(this).index() + 1);
  9.   });
  10. </script>

6. 基础的 getter 与 setter

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <script src="lib/jquery-3.5.1.js"></script>
  7.     <title>Document</title>
  8.     <style>
  9.       body {
  10.         display: flex;
  11.         flex-direction: column;
  12.         align-items: center;
  13.         color: #666;
  14.       }
  16.       form {
  17.         width: 400px;
  18.         /* height: 150px; */
  19.         padding: 20px 10px;
  20.         border: 1px solid #aaa;
  21.         box-shadow: 0 0 5px #888;
  22.         box-sizing: border-box;
  23.         background-color: #eee;
  24.         display: grid;
  25.         grid-template-columns: 80px 200px;
  26.         gap: 10px;
  27.         place-content: center center;
  28.       }
  30.       button {
  31.         grid-column: 2 / 3;
  32.         height: 26px;
  33.       }
  35.       button:hover {
  36.         color: white;
  37.         background-color: #888;
  38.         border: none;
  39.         cursor: pointer;
  40.       }
  42.       .red {
  43.         color: red;
  44.       }
  45.     </style>
  46.   </head>
  47.   <body>
  48.     <h2 class="red">用户登录</h2>
  49.     <form action="handle.php" method="get">
  50.       <label for="email">Email:</label>
  51.       <input
  52.         type="email"
  53.         name="email"
  54.         id="email"
  55.         autofocus
  56.         value="leture@php.cn"
  57.       />
  58.       <label for="password">Password:</label>
  59.       <input type="password" name="password" id="password" value="不少于6位" />
  60.       <label for="confirm">记住我:</label>
  61.       <div>
  62.         <input type="radio" name="save" id="confirm" value="1" checked /><label
  63.           for="confirm"
  64.           >保存</label
  65.         >
  66.         <input type="radio" name="save" id="cancel" value="0" /><label
  67.           for="cancel"
  68.           >放弃</label
  69.         >
  70.       </div>
  71.       <button>登录</button>
  72.     </form>
  73.   </body>
  74.   <script>
  75.     var cl = console.log.bind(console);
  77.     // 拿到form;
  78.     var form = $("form");
  79.     // attr(name) ： 获取 getter
  80.     // attr(name，value) ：修改 setter
  81.     // 拿到action的值
  82.     cl(form.attr("action")); //handle.php
  83.     // 修改action的值
  84.     form.attr("action", "1.php");
  85.     cl(form.attr("action")); // 1.php
  87.     // 修改多个值 使用对象字面量
  88.     form.attr({
  89.       action: "3.php",
  90.       method: "post",
  91.     }); //<form action="3.php" method="post">
  93.     // 动态修改action
  94.     form.attr("action", function () {
  95.       // 根据method值修改请求地址
  96.       // 先把method值转为小写
  97.       var method = $(this).attr("method").toLowerCase();
  98.       return method === "get" ? "login.php" : "register.php";
  99.     });
  100.   </script>
  101. </html>

7. jQuery 属性与 DOM 常用操作

7.1 属性操作

7.1.1 获取和设置 HTML 属性

  • attr(): 获取与设置 html 元素的属性
  • removeAttr(): 移除 html 元素属性

7.1.2 获取和设置 CSS 属性

  • css(): 获取的是元素的计算样式,设置的是内联样式,但不适用于复合样式,如margin
  • addClass(): 添加类样式
  • removeClass(): 移除类样式
  • toggleClass(): 自动切换类样式
  • hasClass(): 判断是否存在某个类样式

7.1.3 获取和设置表单的值

  • val(): 获取和设置表单的值

7.1.4 获取和设置元素的内容

  • text(): 获取和设置元素的文本内容
  • html(): 获取和设置元素的 html 内容

7.1.5 获取和设置元素的位置与宽高

  • offset(): 获取元素的位置信息
  • scrollTop(),scrollLeft():获取元素滚动条位置

7.1.6 获取和设置元素中的数据

  • data(): 获取和设置元素中的数据
  • removeData(): 从元素中删除数据

7.2. DOM 操作

7.2.1 插入与替换元素

  • append() | appendTo(): 尾部插入元素
  • prepend() | prependTo(): 头部插入元素
  • after() | insertAfter(): 后面插入元素
  • befor() | insertBefor(): 前面插入元素
  • replaceWidh() | replaceAll(): 替换目标元素内容

7.2.2 复制元素

  • clone(): 创建并返回每一个选中元素的副本

7.3 删除元素

  • empty():
  • remove():

8. 总结

jQuery 简化了就是 js 代码，短短几行完成了原生几十行的功能，像是 php 的静态类 根据不同的参数完成不同的功能

上一条：细说文件上传原理与实战下一条：linux 限制用户只能操作某个目录下的权限
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多