• JQuery快速入门

    目录

    一、引入依赖

    二、JQuery语法

    三、JQuery选择器

    四、JQuery事件

    五、操作元素

    1、获取 / 设置元素内容

    1）获取元素

    2）设置元素内容

    2、获取 / 设置元素属性

    1）获取元素属性

    2）设置元素属性

    3、获取 / 返回css属性

    1）获取元素属性

    2）设置元素属性

    4、添加元素

    5、删除元素

    1）remove代码示例

    2）empty代码示例

            W3C 标准给我们提供了一系列的函数，让我们可以操作：网页内容、网页结构、网页样式。

            但是原生的JavaScript提供的API操作DOM元素时，代码比较繁琐，所有我们学习使用JQuery来操作页面对象。

            JQuery 是一个快速、简洁且功能丰富的JavaScript框架，于2006年发布。它封装JavaScript常用的功能代码，提供了简洁而强大的选择器和DOM操作。

            使用JQuery可以轻松地选择和操作HTML元素，从而减少了开发人员编写的代码量，提高了开发效率，它提供的API易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和Ajax操作更加简单。

            JQuery 对于事件的处理也进行了简化，提供了一个简单的API来绑定、触发和处理事件，使开发人员能够更方便地处理各种交互行为。

    一、引入依赖

            使用 JQuery 需要先引入对应的库，在使用JQuery CDN时，只需要在HTML文档中加入如下代码：

            其中，src 属性指明了JQuery库所在的URL，这个URL是CDN（内容分发网络）服务器提供商为JQuery库提供的一个统一资源定位符。

            也可以去官网：jQuery CDN

            把官网上的JQuery库下载下来，保存到本地，以后每次要使用的时候，就会很快，因为访问本地的JQuery库，比去访问官网上的JQuery库要快很多。在写JavaScript代码时，src后面放JQuery在你电脑上的目录。

            一般公司上都是使用公司提供的CDN地址，原因也很简单，直接访问自己服务器，比较稳定，是可靠的，如果访问外网的，别人的服务器挂了，那自己这边也动不了了，还有访问自己的服务器，肯定要比访问别人的服务器快，还有访问外部地址也有风险；一般开发是把JQuery库下载下来使用或者使用公司提供的CDN。

            下面我们去上面网站下载一个JQuery库，这个网站页面如下：

            这里可以选择不同的版本，这里我们介绍3.7.1的版本，JQuery官方提供了4种类型的JQuery库：

    uncompressed：非压缩版本（易读，但是文件较大，传输速度慢）。

    minified：压缩包（不易读，文件小，性能高，开发中推荐）。

    slim：精简瘦身版，没有Ajax和一些特效。

    slim minified：slim 的压缩包。

            开发时，建议把JQuery库下载到本地，放在当前项目中。引入外部地址，会有外部地址不能访问的风险。

            下载方式：通过浏览器访问上述连接，选择号版本，右键 -> 在新的标签页打开链接 -> 在当前页面再右键 -> 点击另存为，保存到你电脑目录上。也可以在其他网站上下载。

            使用JQuery库前，记得要在JavaScript代码中导入这个库。

    二、JQuery语法

            JQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。

            基础语法：

    $(selector).action()

    $() 是一个函数，它是JQuery提供的一个全局函数，用于选择和操作HTML元素。

    selector 选择器，用来 “查询” 和 “查找” HTML元素。

    action 操作，执行对元素的操作。

            JQuery 的代码通常都写在 document ready 函数中。

    document：整个文档对象，一个页面就是一个文档对象，使用document表示。

            这是为了防止文档在完全加载（就绪）之前运行 JQuery 代码，即在 文档加载完成后才可以对页面进行操作。如果文档没有完全加载之前就运行函数，操作可能会失败。

            下面示例代码是简单的JQuery语句，

    1.     
    2.  
    3.     <script src="jquery-3.7.1.slim.min.js" >script>
    4.     <script>
    5.         $(document).ready(function() {
    6.             $("#test").click(function() {
    7.                 $(this).hide();
    8.             });
    9.         });
    10.     script>

            先导入JQuery库，然后在script标签里写JQuery语句，上面语句的意思是点击上面的按钮后，消失。

            下面是简写的代码，两种都可以

    1.

            最下面那个写法是不规范写法，如果是在企业中，还是推荐写中间那个。因为有些内容没有加前两个多出来的代码，页面是加载不出来的。

    三、JQuery选择器

            我们通过JQuery选择器来选择一些HTML元素，然后对元素进行操作；JQuery选择器基于已经存在的CSS选择器，除此之外，还有一些自定义的选择器。

            JQuery中所有选择器都以 $ 开头：$()    如下表：

    四、JQuery事件

            JS要构建动态页面，就需要感知到用户的行为，用户对于页面的一些操作（点击、选择、修改等）操作，都会在浏览器中产生一个个的事件，被 JS 获取到，从而进行更复杂的交互操作。

    浏览器就是一个哨兵，在侦查敌情（用户行为）。一旦用户有反应（触发具体动作），哨兵就会点燃烽火台的狼烟（事件），后方就可以狼烟来决定下一步的对敌策略。

    事件由三部分组成：

    1、事件源：哪个元素触发的。

    2、事件类型：是点击，选中，还是修改？

    3、事件处理程序：进一步如何处理。往往是一个回调函数。

    4、动作（点击、选中.....）发生后执行的代码。

            例如：某个元素的点击事件：

    1. $("p").click(function(){
    2.     //动作发⽣后执⾏的代码
    3. });

            常见的事件有：

    事件代码
    文档就绪事件（完成加载）$(document).ready(function)
    点击事件$(selector).click(function)
    双击事件$(selector).dblclick(function)
    元素的值发生改变$(selector).change(function)
    鼠标悬停事件$(selector).mouseover(function)

    五、操作元素

    1、获取 / 设置元素内容

            三个简单的获取元素内容的JQuery方法，如下表：

    JQuery方法说明
    text()设置或返回所选元素的文本内容
    html()设置或返回所选元素的内容(包括 htm l标签)
    val()设置或返回表单字段的值

            这三个方法既可以获取元素的内容，又可以设置元素的内容。有参数时，就进行元素的值设置；没有参数时，就进行元素内容的获取。

    1）获取元素

            代码示例如下：

    1.     
      "test">
    2.         <span>你好span>
    3.
  • <input type="text" value="hello">
  • <script src="jquery-3.7.1.min.js">script>
  • <script>
  • $(document).ready(function (){
  • var text = $("#test").text();
  • console.log("文本内容为:"+text);
  • var html = $("#test").html();
  • console.log("html内容为:"+html);
  • var inputVal = $("input").val();
  • console.log(inputVal);
  • });
  • script>

    •         结果如下：

            

    2）设置元素内容

            代码如下：

    1.     
      "test1">
    2.     <div id="test2">div>
    3.     <input type="text" value="">
    4.  
    5.     <script src="jquery-3.7.1.min.js">script>
    6.     <script>
    7.         $(document).ready(function() {
    8.             $("#test1").html("hello");
    9.             $("#test2").text("world");
    10.             $("input").val("hahaha");
    11.         })
    12.     script>

            原本页面上是这样的：

            

            现在是这样的：

            

    2、获取 / 设置元素属性

            JQuery 中的 attr() 方法用于获取属性值。

    1）获取元素属性

            代码如下：

    1.     
      <a href="https://www.baidu.com" id="baidu">百度a>
    2.     <script src="jquery-3.7.1.min.js">script>
    3.  
    4.     <script>
    5.         $(document).ready(function() {
    6.             var href = $("p a").attr("href");
    7.             console.log(href);
    8.         })
    9.     script>

            执行结果：

            

    2）设置元素属性

            代码如下：

    1.     
      <a href="https://www.baidu.com" id="baidu">百度a>
    2.     <script src="jquery-3.7.1.min.js">script>
    3.  
    4.     <script>
    5.         $(document).ready(function() {
    6.             $("p a").attr("href", "https://www.bilibili.com");
    7.             console.log($("p a").attr("href"));
    8.         }) 
    9.     script>

            执行结果，这是把百度的网址换成B站的网站了，点击链接也会去到B站上。

            

            点击：

            

            来到B站上了

            

    3、获取 / 返回css属性

            css() 方法设置返回被选元素的一个或多个样式属性。

    1）获取元素属性

            代码示例：

    1.     
      "font-size: 36px;">我是一个文本
    2.     <script src="jquery-3.7.1.min.js">script>
    3.     <script>
    4.         $(document).ready(function() {
    5.             var fontSize = $("div").css("font-size");
    6.             console.log(fontSize);
    7.         });
    8.     script>

            结果如下：
            

            

    2）设置元素属性

            代码示例：

    1.     
      "font-size: 36px;">我是一个文本
    2.     <script src="jquery-3.7.1.min.js">script>
    3.     <script>
    4.         $(document).ready(function() {
    5.             $("div").css("font-size", "24px");
    6.         });
    7.     script>

            结果如下：字体变小了

            

    4、添加元素

    1、append()：在被选元素的结尾插入内容。

    2、prepend()：在被选元素的开头插入内容。

    3、after()：在被选元素之后插入内容。

    4、before()：在被选元素之前插入内容。

    html代码：

    1.     <ol>
    2.         <li>List item 1li>
    3.         <li>List item 2li>
    4.         <li>List item 3li>
    5.     ol>

            在不插入元素之前，页面是这样的：

            

            append和prepend插入后：

            代码：
     

    1.     
      1.         <li>List item 1li>
      2.         <li>List item 2li>
      3.         <li>List item 3li>
      4.
  • <script src="jquery-3.7.1.min.js">script>
  • <script>
  • $(document).ready(function() {
  • $("ol").append("
  • append
    • ");
  • $("ol").prepend("
  • prepend
    • ");
  • });
  • script>

    •         结果如下：

            ​​​​​​​

            after和before插入后：

            代码：

    1.     
      1.         <li class="item1">List item 1li>
      2.         <li>List item 2li>
      3.         <li class="item3">List item 3li>
      4.     
    2.  
    3.     <script src="jquery-3.7.1.min.js">script>
    4.     <script>
    5.         $(document).ready(function() {
    6.             $("ol").append("
    7. append
      8. ");
    8.             $("ol").prepend("
    9. prepend
      10. ");
    10.  
    11.             $(".item1").after("
    12. after
      13. ");
    13.             $(".item3").before("
    14. before
      15. ");
    15.         });
    16.     script>

      17.         执行结果：

              ​​​​​​​​​​​​​​

      5、删除元素

              删除元素和内容，一般使用以下两个JQuery方法：

      （1）remove()：删除被选元素（及其子元素）。

      （2）empty()：删除被选元素的子元素。

      1）remove代码示例

      1.     
        "div1">我是一个div
      2.     <button>删除 div 元素button>
      3.  
      4.     <script src="jquery-3.7.1.min.js">script>
      5.     <script>
      6.         $(document).ready(function() {
      7.             $("button").click(function() {
      8.                 $("#div1").remove();
      9.             });
      10.         });
      11.     script>

              执行结果：点击后div标签的内容就会消失

              html代码中的div标签这一行，也会被删除，如图：

      2）empty代码示例

              empty是删除被选元素的子元素

      1.     
        1.         <li>List item 1li>
        2.         <li>List item 2li>
        3.         <li>List item 3li>
        4.     
      2.     <button>删除列表元素button>
      3.  
      4.     <script src="jquery-3.7.1.min.js">script>
      5.     <script>
      6.         $(document).ready(function() {
      7.             $("button").click(function() {
      8.                 $("ol").empty();
      9.             });
      10.         });
      11.     script>

        12.         结果如下：

        点击按钮后：

        都看到这了，点个赞再走吧，谢谢谢谢谢

      12. 相关阅读:
        Linux 常用命令
        “计算机艺术之父”、现代计算机技术先驱查理斯·苏黎去世，享年99岁
        MySQL 基础知识（八）之用户权限管理
        云原生下一步的发展方向
        【软考篇】中级软件设计师 第四部分（三）
        分布式锁的实现方案
        软件外包公司真的去不得吗？
        JavaEE高阶---SpringBoot的创建和使用
        Answering the SDIs Step by Step
        文件包含漏洞复习总结
      13. 原文地址：https://blog.csdn.net/cool_tao6/article/details/137841772