jQuery的引入和使用

归懿

于 2025-04-19 14:03:57 发布

阅读量423

点赞数 5

分类专栏： JQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_73559209/article/details/147350076

版权

JQuery 专栏收录该内容

3 篇文章

订阅专栏

jQuery的引入和使用

jQuery是一个快速、简洁的JavaScript库，可以大大简化JavaScript编程的过程。在使用jQuery之前，需要先引入jQuery库文件。

引入jQuery库文件

通过以下方式引入jQuery库文件：

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

也可以下载jQuery库文件，并将其放置项目目录中。

jQuery的基本语法

jQuery的基本语法是`$(selector).action()`。其中，`$`是`jQuery`的别名，`selector`是用于定位HTML元素的表达式，`action`表示对选中的元素要执行的动作。

选择器

通过使用选择器，选择指定的HTML元素。

以下是一些常用的选择器示例：
- $("p")：选中所有<p>元素
- $(".myclass")：选中所有带有myclass类的元素
- $("#myid")：选中具有myid id的元素

动作

jQuery提供了丰富的动作，可以对选中的HTML元素进行操作，例如设置元素的属性、修改元素的内容等。

以下是一些常用的动作示例：

$(selector).html(content) ：设置选中元素的HTML内容
- $(selector).text(content) ：设置选中元素的文本内容
- $(selector).attr(attribute, value) ：设置选中元素的属性值
- $(selector).addClass(class) ：向选中元素添加一个或多个类
- $(selector).removeClass(class) ：从选中元素移除一个或多个类

下面是一个使用jQuery的示例代码：

<!DOCTYPE html>

<html>

<head>

  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  
</head>

<body>

  <h1>使用jQuery示例</h1>
  
  <p>这是一个段落。</p>
  
  <button id="myButton">点击我</button>

  <script>
  
    // 使用选择器和方法来操作HTML元素
    
    $(document).click(function(){
    
    
      // 设置段落的文本内容
      
      $("p").text("这是修改后的段落内容。");

      // 设置按钮的点击事件
      
      $("#myButton").click(function(){
      
        // 添加一个类到按钮
        
        $(this).addClass("clicked");

        // 设置段落的属性
        
        $("p").attr("data-info", "新属性值");
        
      });
      
    });
    
  </script>
  
</body>

</html>