JQuery 基础与综合案例实践

3.4 JQuery

W3C 标准给我们提供了一系列的函数，让我们可以操作:

网页内容
网页结构
网页样式

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

jQuery 是一个快速、简洁且功能丰富的 JavaScript 框架，于 2006 年发布。它封装 JavaScript 常用的功能代码，提供了简洁而强大的选择器和 DOM 操作方法。使用 JQuery 可以轻松地选择和操作 HTML 元素，从而减少了开发人员编写的代码量，提高了开发效率，它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。JQuery 对于事件的处理也进行了简化，提供了一个简单的 API 来绑定、触发和处理事件，使开发人员能够更方便地处理各种交互行为。

3.4.1 引入依赖

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

复制代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

参考地址:https://releases.jquery.com/

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

如果需要使用其他版本的 JQuery, 可以在官网进行下载

Jquery 官方共提供了 4 种类型的 JQuery 库

uncompressed：非压缩版本 (易读，但是文件较大，传输速度慢)
minified：压缩版 (不易读，文件小，性能高，开发中推荐)
slim：精简瘦身版，没有 Ajax 和一些特效
slim minified：slim 的压缩版

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

通过浏览器访问上述连接
右键 -> 另存为.... 保存到本地，放在项目中即可.

注意：最好还是下载一个放起来，然后创建项目使用的时候，复制一份到这个项目里，当然也可以在下载

也可以从其他 CDN 上下载引用 JQuery比如:

复制代码

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>

3.4.2 JQuery 语法

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

基础语法

复制代码

$(selector).action()

$() 是一个函数，它是 jQuery 提供的一个全局函数，用于选择和操作 HTML 元素。
Selector 选择器，用来 "查询" 和 "查找" HTML 元素
action 操作，执行对元素的操作

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

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

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

html 复制代码

 $(document).ready(function(){

  // jQuery functions go here
 
});

示例:

html 复制代码

 <button type="button">点我消失</button>
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <script>
   $(document).ready(function(){
       $('button').click(function(){
           $(this).hide();
       });
   });
 </script>

给按钮添加了 click 事件，点击后元素消失.

简洁写法:

html 复制代码

 $(function(){
 
  // jQuery functions go here
 
 });

3.4.3 JQuery 选择器

我们通过 JQuery 选择器来选择一些 HTML 元素，然后对元素进行操作.

JQuery 选择器基于已经存在的 CSS 选择器，除此之外，还有一些自定义的选择器.

jQuery 中所有选择器都以 $开头：$ ()

3.4.4 JQuery 事件

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

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

事件由三部分组成:

事件源：哪个元素触发的
事件类型：是点击，选中，还是修改？
事件处理程序：进一步如何处理。往往是一个回调函数.

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

html 复制代码

 $("p").click(function(){
   //动作发生后执行的代码
 });

常见的事件有:

3.4.5 操作元素

3.4.5.1 获取 / 设置元素内容

三个简单的获取元素内容的 JQuery 方法

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

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

代码示例:

获取元素内容:

html 复制代码

 <div id="test"><span>你好</span></div>
<input type="text" value="hello">
 
 <script>
   $(document).ready(function () {
 
       var html = $("#test").html();
       console.log("html内容:"+html);
 
      var text = $("#test").text();
      console.log("文本内容:"+text);
 
      var inputVal = $("input").val();
      console.log(inputVal);
  });
 </script>

设置元素内容

html 复制代码

<div id="test"></div>
<div id="test2"></div>
<input type="text" value="">

<script>
  $(document).ready(function () {
      $("#test").html('<h1>设置html</h1>');
      $("#test2").text('<h1>设置text</h1>');
      $("input").val("设置内容");
  });
</script>

3.4.5.2 获取 / 设置元素属性

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

代码示例

获取元素属性

html 复制代码

<p><a href="https://www.bitejiuyeke.com/index" id="bite">比特就业课</a></p>

<script>
  $(function(){
      var href = $("p a").attr("href")
      console.log(href);
  });
</script>

设置元素属性

html 复制代码

<p><a href="https://www.bitejiuyeke.com/index" id="bite">比特就业课</a></p>

<script>
  $(function(){
      $("p a").attr("href","baidu.com")
      console.log($("p a").attr("href"));
  });
</script>

3.4.5.3 获取 / 返回 css 属性

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

代码示例

获取元素属性

html 复制代码

<div style="font-size: 36px;">我是一个文本</div>

<script>
  $(function(){
      var fontSize = $("div").css("font-size");
      console.log(fontSize);
  });
</script>

设置元素属性

html 复制代码

<div style="font-size: 36px;">我是一个文本</div>

<script>
  $(function(){
      $("div").css("font-size","24px");
  });
</script>

3.4.5.4 添加元素

添加 HTML 内容

append ()：在被选元素的结尾插入内容
prepend ()：在被选元素的开头插入内容
after ()：在被选元素之后插入内容
before ()：在被选元素之前插入内容

代码示例:

html 复制代码

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<img src="pic/rose.jpg">
<script>
  $(function () {
      $("ol").append("<li>append</li>");
      $("ol").prepend("<li>prepend</li>");

      $("img").before("图片前插入");
      $("img").after("图片后插入");
  });
</script>

3.4.5.5 删除元素

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

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

代码示例:

html 复制代码

<div id="div1">我是一个div</div>
<button>删除 div 元素</button>
<script>
  $(function () {
      $('button').click(function(){
          $('#div1').remove();
      });
  });
</script>

删除被选元素的子元素

html 复制代码

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<button>删除列表元素</button>
<script>
  $(function () {
      $('button').click(function(){
          $('ol').empty();
      });
  });
</script>

3.5综合案例

3.5.1猜数字

代码实现

html 复制代码

<button type="button" id="reset">重新开始一局游戏</button>
<br>

请输入要猜的数字: <input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数: <span id="count">0</span>
<br>
结果: <span id="result"></span>
<script>
$(function () {
    // 随机生成一个 1-100 的数字
    var guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数
    var count = 0;
    // click 动作
    // 事件驱动（Event-Drive）: 只要真正发生了点击事件时，才执行该函数
    $("#button").click(function () {
        count++;
        $("#count").text(count);

        var userGuess = parseInt($("#number").val());

        if (userGuess == guessNumber) {
            $("#result").text("猜对了");
            $("#result").css("color", "gray");
        } else if (userGuess < guessNumber) {
            $("#result").text("猜小了");
            $("#result").css("color", "blue");
        } else {
            $("#result").text("猜大了");
            $("#result").css("color", "red");
        }
    });
    $("#reset").click(function () {
        guessNumber = Math.floor(Math.random() * 100) + 1
        count = 0;
        $("#count").text(count);
        $("#result").text("");
        $("#number").val("");
    });

});
</script>
<br>

3.5.2表白墙

预期效果

代码实现

1. 提前准备如下 HTML 和 CSS 代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 400px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            padding: 20px 0;
        }

        p {
            color: #666;
            text-align: center;
            font-size: 14px;
            padding: 10px 0;
        }

        .row {
            height: 40px;
            display: Flex;
            justify-content: center;
            align-items: center;
        }

        span {
            width: 100px;
            line-height: 40px;
        }

        .edit {
            width: 200px;
            height: 30px;
        }

        .submit {
            width: 304px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交，会将信息显示在表格中</p>
        <div class="row">
            <span>谁：</span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <span>说什么：</span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <input type="button" value="提交" class="submit">
        </div>
    </div>
</body>
</html>

2. 实现提交

html 复制代码

$(function () {
    // 给点击按钮注册点击事件
    $(".submit").click(function () {
        // 1. 获取到编辑框内容
        var from = $('.edit:eq(0)').val();
        var to = $('.edit:eq(1)').val();
        var message = $('.edit:eq(2)').val();

        console.log(from + "," + to + "," + message);
        if (from == '' || to == '' || message == '') {
            return;
        }
        // 2. 构造 html 元素
        var html = '<div class="row">' + from + '对' + to + '说：' + message + '</div>';
        // 3. 把构造好的元素添加进去
        $('.container').append(html);
        // 4. 同时清理之前输入框的内容
        $(":text").val("");
    });
});

4. 总结

HTML 是一种超文本标记语言，主要用于页面内容的显示和排版，如果需要更漂亮的样式展示和页面效果，需要搭配 CSS 和 JavaScript 来使用
学习 HTML 主要是学习标签，HTML 的标签特别多，了解基本语法即可
CSS 重点是学习 CSS 的选择器使用
JavaScript 是一个脚本语言，和 Java 没有关系.JQuery 是一个 JavaScript 框架，使用 JQuery 可以轻松地选择和操作 HTML 元素，提高我们的开发效率.
前端开发对于后端开发人员而言不是很重要，不必花费过多时间在这个上面。达到借助网络能阅读代码的水平即可.