当前位置：极客笔记 > HTML > HTML 问答 > 什么是 $ 在 HTML 中

什么是 $ 在 HTML 中

什么是 $ 在 HTML 中

参考：what is $ in html

在HTML中，符号通常被称为“美元符号”，它在前端开发中有着重要的作用。符号通常和JavaScript库jQuery密切相关，它是jQuery库的一个重要特性，用于简化JavaScript代码的编写。

示例代码1: 基本用法

<!DOCTYPE html>
<html>
<head>
  <title>使用符号</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <script>(document).ready(function(){
      alert("欢迎访问how2html.com");
    });
  </script>
</body>
</html>

在上面的示例代码中，我们通过$(document).ready()事件函数在文档加载完成后弹出一个提示框。$符号在这里充当了jQuery对象的标识符，简化了对文档元素的选择和操作。

示例代码2: 选择器

<!DOCTYPE html>
<html>
<head>
  <title>使用选择器</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="example">Hello, how2html.com!</div>
  <script>
    (document).ready(function(){
      var text =(".example").text();
      alert(text);
    });
  </script>
</body>
</html>

在这个例子中，我们使用jQuery选择器$(“.example”)选取了包含特定类名的元素，并获取了该元素的文本内容进行操作。

示例代码3: 事件处理

<!DOCTYPE html>
<html>
<head>
  <title>事件处理</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="btn">点击这里</button>
  <script>
    (document).ready(function(){("#btn").click(function(){
        alert("按钮被点击了");
      });
    });
  </script>
</body>
</html>

Output:

什么是 $ 在 HTML 中

在这个例子中，我们使用了$符号来绑定了按钮元素的点击事件，当按钮被点击时，弹出一个提示框。

示例代码4: 链式操作

<!DOCTYPE html>
<html>
<head>
  <title>链式操作</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>how2html.com</p>
  <script>
    (document).ready(function(){("p").css("color", "red").slideUp(2000).slideDown(2000);
    });
  </script>
</body>
</html>

Output:

什么是 $ 在 HTML 中

在这个例子中，我们使用$符号来链式操作p元素：先改变文字颜色，然后向上滑动后再向下滑动。

示例代码5: AJAX请求

<!DOCTYPE html>
<html>
<head>
  <title>AJAX请求</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="result"></div>
  <script>
    (document).ready(function(){.ajax({
        url: "https://api.how2html.com",
        success: function(data){
          $("#result").html(data);
        }
      });
    });
  </script>
</body>
</html>

在这个例子中，我们使用$符号发起了一个AJAX请求，并在请求成功后将返回的数据填充到页面中的result元素中。

示例代码6: 动画效果

<!DOCTYPE html>
<html>
<head>
  <title>动画效果</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    (document).ready(function(){("div").click(function(){
        $(this).animate({height: '300px', width: '300px'}, 1000);
      });
    });
  </script>
</body>
</html>

Output:

什么是 $ 在 HTML 中

在这个例子中，我们使用$符号来实现了点击div元素时的动画效果，将div元素的高度和宽度从100px变为300px。

示例代码7: 表单操作

<!DOCTYPE html>
<html>
<head>
  <title>表单操作</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="input">
  <button id="btn">点击这里</button>
  <br>
  <span id="result"></span>
  <script>
    (document).ready(function(){("#btn").click(function(){
        var value = ("#input").val();("#result").text("您输入的是：" + value);
      });
    });
  </script>
</body>
</html>

Output:

什么是 $ 在 HTML 中

在这个例子中，我们使用了$符号来获取文本框中的值，并将其显示在页面中。

示例代码8: 添加和移除元素

<!DOCTYPE html>
<html>
<head>
  <title>添加和移除元素</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul id="list">
    <li>HTML</li>
    <li>CSS</li>
  </ul>
  <button id="add">添加JavaScript</button>
  <button id="remove">移除CSS</button>
  <script>
    (document).ready(function(){("#add").click(function(){
        ("#list").append("<li>JavaScript</li>");
      });("#remove").click(function(){
        $("#list li:contains('CSS')").remove();
      });
    });
  </script>
</body>
</html>

Output:

什么是 $ 在 HTML 中

在这个例子中，我们使用了$符号来添加和移除列表中的元素。

示例代码9: 文档操作

<!DOCTYPE html>
<html>
<head>
  <title>文档操作</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
  </ul>
  <script>
    (document).ready(function(){("ul").before("<p>编程语言列表：</p>");
      $("ul").after("<p>以上是编程语言列表。</p>");
    });
  </script>
</body>
</html>

Output:

什么是 $ 在 HTML 中

在这个例子中，我们使用了$符号来在ul元素前后插入文本段落。

示例代码10: 事件代理

<!DOCTYPE html>
<html>
<head>
  <title>事件代理</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul id="list">
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
  </ul>
  <script>
    (document).ready(function(){("#list").on("click", "li", function(){
        alert($(this).text() + "被点击了");
      });
    });
  </script>
</body>
</html>

Output:

什么是 $ 在 HTML 中

在这个例子中，我们使用$符号实现事件代理，当ul元素下的li子元素被点击时弹出一个提示框。

示例代码11: 元素隐藏和显示

<!DOCTYPE html>
<html>
<head>
  <title>元素隐藏和显示</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="hide">隐藏元素</button>
  <button id="show">显示元素</button>
  <p>how2html.com</p>
  <script>
    (document).ready(function(){("#hide").click(function(){
        ("p").hide();
      });("#show").click(function(){
        $("p").show();
      });
    });
  </script>
</body>
</html>

Output:

什么是 $ 在 HTML 中

在这个例子中，我们使用了$符号来隐藏和显示段落元素。

示例代码12: 属性操作

<!DOCTYPE html>
<html>
<head>
  <title>属性操作</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <img id="image" src="https://how2html.com/image.jpg" alt="how2html">
  <button id="change">改变图片</button>
  <script>
    (document).ready(function(){("#change").click(function(){
        ("#image").attr("src", "https://how2html.com/another_image.jpg");("#image").attr("alt", "another_how2html");
      });
    });
  </script>
</body>
</html>

Output:

什么是 $ 在 HTML 中

在这个例子中，我们使用了$符号来改变图片元素的src和alt属性。

示例代码13: 淡入淡出效果

<!DOCTYPE html>
<html>
<head>
  <title>淡入淡出效果</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="fadeIn">淡入</button>
  <button id="fadeOut">淡出</button>
  <p style="display: none;">how2html.com</p>
  <script>
    (document).ready(function(){("#fadeIn").click(function(){
        ("p").fadeIn();
      });("#fadeOut").click(function(){
        $("p").fadeOut();
      });
    });
  </script>
</body>
</html>

Output:

什么是 $ 在 HTML 中

在这个例子中，我们使用了$符号来实现段落元素的淡入和淡出效果。

示例代码14: 获取元素属性值

<!DOCTYPE html>
<html>
<head>
  <title>获取元素属性值</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <a href="https://how2html.com" id="link">how2html</a>
  <button id="get">获取链接地址</button>
  <script>
    (document).ready(function(){("#get").click(function(){
        var href = $("#link").attr("href");
        alert("链接地址是：" + href);
      });
    });
  </script>
</body>
</html>

Output:

什么是 $ 在 HTML 中

在这个例子中，我们使用了$符号来获取链接元素的href属性值，并弹出一个提示框显示该值。

示例代码15: 混合使用原生JS和jQuery

<!DOCTYPE html>
<html>
<head>
  <title>混合使用原生JS和jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p id="text">how2html.com</p>
  <button id="change">改变文本</button>
  <script>
    (document).ready(function(){("#change").click(function(){
        document.getElementById("text").innerHTML = "欢迎学习how2html.com";
      });
    });
  </script>
</body>
</html>

Output:

什么是 $ 在 HTML 中

在这个例子中，我们展示了如何混合使用原生JavaScript和jQuery来操作页面元素。

综上所述，符号在HTML中是一个非常实用的工具，它可以帮助开发者简化JavaScript代码的书写，提高开发效率。通过符号，我们可以轻松实现元素选择、事件处理、动画效果等功能，使网页交互效果更加丰富。希望以上示例能帮助你更好地理解$符号在HTML中的应用。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程