npm 包 jquery.1 使用教程

什么是 npm？

npm 是一种 JavaScript 包管理器，用于共享和发布代码包。它是 Node.js 的默认包管理器，用于下载和安装 Node.js 模块。在前端开发中，也可以使用 npm 来管理和安装 JavaScript 库或框架。

什么是 jquery？

jquery 是一款著名的 JavaScript 库，于 2006 年由 John Resig 发布，旨在简化 JavaScript 应用程序开发。jquery 提供了一种优雅的方法来处理 DOM、事件、动画、AJAX 等多个方面。

安装 jquery

要使用 jquery，首先需要在本地环境中安装它。在终端中输入以下命令：

npm install jquery@1.12.4

这将在当前目录的 node_modules 文件夹中安装 jquery。

引入 jquery

安装完成后，就可以在网页中引入 jquery 了。在 html 文件中添加以下代码：

<script src="./node_modules/jquery/dist/jquery.min.js"></script>

使用 jquery

接下来，看看 jquery 是如何使用的。以下是一些常用的 jquery 方法：

选择器

元素选择器

$('p') // 选择所有 <p> 元素

ID 选择器

$('#myId') // 选择 ID 为 myI 的元素

类选择器

$('.myClass') // 选择所有 class 为 myClass 的元素

属性选择器

$('input[name="name"]') // 选择所有 name 属性等于 name 的 <input> 元素

操作元素

获取和设置属性

$('img').attr('src') // 获取 <img> 的 src 属性值
$('img').attr('src', 'newSrc') // 设置 <img> 的 src 属性值为 newSrc

获取和设置文本内容

$('p').text() // 获取 <p> 元素的文本内容
$('p').text('newText') // 设置 <p> 元素的文本内容为 newText

获取和设置 HTML 内容

$('p').html() // 获取 <p> 元素的 HTML 内容
$('p').html('newHTML') // 设置 <p> 元素的 HTML 内容为 newHTML

事件

以下是一个简单的点击按钮事件：

$('button').click(function() {
  alert('Button clicked');
});

动画

以下是一个简单的淡入淡出动画：

$('button').click(function() {
  $('p').fadeToggle();
});

总结

jquery 是一个非常流行的 JavaScript 库，它提供了一种优雅的方法来处理 DOM、事件、动画、AJAX 等多个方面。使用 npm 来安装和管理 jquery，可以更加方便地使用它。掌握 jquery 基本用法，可以为前端开发提供很多便利和效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbff5b5cbfe1ea0611c5e