Jquery 基础学习笔记

首先，我们需要了解什么是jQuery。jQuery是一款快速、小巧并且功能强大的JavaScript库，其主要特点是操作简单易学、兼容性较好、支持链式操作等。下面将介绍jQuery的基础知识，以帮助初学者更好地理解和使用jQuery。

一、jQuery库的引入

在使用jQuery之前，我们需要先引入jQuery库。一般情况下，我们可以在HTML页面的标签中放入如下代码：

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

这段代码会从CDN(内容分发网络)地址加载最新版本的jQuery库。

二、选择器

在jQuery中，使用CSS选择器的方式选择HTML元素。例如，我们想选择所有的

标签，可以使用如下代码：

$("p")

这表示我们使用jQuery选择器选择了所有的

标签。

三、事件

jQuery可以轻松地绑定事件。例如，我们想在页面上点击一个按钮，就会弹出一个提示框。可以使用如下代码：

$("button").click(function(){
  alert("Hello World!");
});

这段代码表示当页面上的按钮被点击时，就会触发一个弹出窗口，显示文本"Hello World!"。

示例一：改变文本

下面是一个示例，我们可以使用jQuery改变HTML元素的文本内容。

HTML代码：

<p>这是一个段落。</p>
<button id="myBtn">点击我</button>

JavaScript代码：

$(document).ready(function(){
  $("#myBtn").click(function(){
    $("p").text("这是修改后的文本。");
  });
});

这段代码表示当页面上的按钮被点击时，就会将所有的

标签的文本内容修改为"这是修改后的文本。"。

示例二：隐藏和显示

下面是另一个示例，我们可以使用jQuery隐藏或显示HTML元素。

HTML代码：

<p>这是一个段落。</p>
<button id="myBtn">点击我</button>

JavaScript代码：

$(document).ready(function(){
  $("#myBtn").click(function(){
    $("p").toggle();
  });
});

这段代码表示当页面上的按钮被点击时，就会隐藏或显示所有的

标签。如果

标签是可见的，则会隐藏它；如果是隐藏的，则会显示它。

以上就是jQuery的基础知识介绍和示例代码。更多详细内容可以查看jQuery官方文档。