当前位置:首页 > jquery

jquery 使用

2026-04-07 19:37:43jquery

jQuery 基本用法

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是其核心用法:

引入 jQuery 在 HTML 文件中通过 <script> 标签引入 jQuery 库:

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

选择元素 使用 $()jQuery() 函数选择 DOM 元素:

$('#id')        // 通过 ID 选择
$('.class')     // 通过类名选择
$('div')        // 通过标签名选择

DOM 操作

修改内容

$('#element').text('新文本');    // 设置文本内容
$('#element').html('<b>加粗</b>'); // 设置 HTML 内容

修改属性

$('#img').attr('src', 'new-image.jpg'); // 修改属性
$('#input').val('默认值');              // 修改表单值

添加/删除元素

$('#parent').append('<div>子元素</div>'); // 在末尾添加
$('#target').remove();                   // 删除元素

事件处理

绑定事件

jquery 使用

$('#button').click(function() {
  alert('按钮被点击');
});

常用事件

.hover()    // 鼠标悬停
.keypress() // 键盘按下
.submit()   // 表单提交

Ajax 请求

GET 请求

$.get('api/data', function(response) {
  console.log(response);
});

POST 请求

$.post('api/save', { name: 'John' }, function(response) {
  console.log('保存成功');
});

动画效果

显示/隐藏

jquery 使用

$('#box').hide(500);    // 500ms 隐藏
$('#box').show('slow'); // 慢速显示

自定义动画

$('#box').animate({
  opacity: 0.5,
  left: '+=50'
}, 1000);

链式调用

jQuery 支持链式调用,允许多个操作串联:

$('#element')
  .css('color', 'red')
  .slideUp(200)
  .slideDown(200);

实用工具方法

遍历元素

$('li').each(function(index) {
  console.log(index + ': ' + $(this).text());
});

扩展功能

$.fn.highlight = function() {
  this.css('background', 'yellow');
  return this;
};
$('p').highlight();

以上是 jQuery 的核心功能概览,适用于快速开发交互式网页。注意现代浏览器已原生支持许多 jQuery 功能,但在旧项目或简化开发时仍具价值。

标签: jquery
分享给朋友:

相关文章

jquery 图表

jquery 图表

jQuery 图表库推荐 jQuery 本身不直接提供图表功能,但可以通过插件或集成其他库实现图表绘制。以下是几种常用的 jQuery 图表解决方案: Chart.js 集成 Chart.j…

jquery 方法

jquery 方法

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是一些常用的 jQuery 方法及其用途: 选择器方法 $("selec…

jquery隐藏

jquery隐藏

jQuery 隐藏元素的方法 使用 jQuery 隐藏元素可以通过多种方式实现,以下是几种常见的方法: hide() 方法hide() 是最简单的隐藏元素方法,它会将元素的 display 属性设置…

jquery 字符串

jquery 字符串

jQuery 字符串操作 jQuery 提供了多种方法来处理字符串,尽管原生 JavaScript 已经具备强大的字符串处理能力,但结合 jQuery 可以更方便地操作 DOM 元素中的字符串内容。…

jquery 动画

jquery 动画

jQuery 动画基础 jQuery 提供了一系列动画方法,用于实现元素的动态效果,如淡入淡出、滑动、自定义动画等。 常用动画方法 fadeIn() / fadeOut(): 元素的淡入和…

jquery视频

jquery视频

以下是关于 jQuery 视频学习资源的整理,涵盖免费教程、实战项目和进阶内容: 免费在线教程 W3School jQuery 教程 提供基础语法、选择器、事件处理等内容的交互式练习,适合快速入门。…