网硕互联帮助中心一、jQuery概述
jQuery 是一个快速、简洁的 JavaScript 库，简化了HTML文档遍历、事件处理、动画和Ajax交互，使Web开发更加便捷。
网络学习链接推荐 jQuery 教程 | 菜鸟教程
二、jQuery 安装
1、网页中添加 jQuery
可以通过多种方法在网页中添加 jQuery。
-
从 jquery.com 下载 jQuery 库
-
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
2、下载 jQuery
有两个版本的 jQuery 可供下载。
-
Production version – 用于实际的网站中，已被精简和压缩。
-
Development version – 用于测试和开发（未压缩，是可读的代码）
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
三、主要特点
DOM操作简化：通过简单的语法选择DOM元素并操作它们
事件处理：提供统一的事件处理机制，解决浏览器兼容性问题
AJAX支持：简化了异步数据请求的处理
动画效果：内置多种动画效果，如淡入淡出、滑动等
跨浏览器兼容：处理了不同浏览器间的差异
四、基本语法
$(selector).action()
其中：
-
$ 是jQuery的别名
-
selector 用于查找HTML元素
-
action() 是对元素执行的操作
五、常用方法
1、DOM操作
// 获取元素
$('#id') // ID选择器
$('.class') // 类选择器
$('p') // 标签选择器
// 修改内容
$('p').text('新文本') // 设置文本内容
$('p').html('<b>加粗文本</b>') // 设置HTML内容
// 修改属性
$('img').attr('src', 'new-image.jpg') // 修改属性
$('input').val('默认值') // 设置表单值
2、事件处理
// 点击事件
$('button').click(function(){
alert('按钮被点击了');
});
// 鼠标悬停
$('div').hover(
function(){ $(this).addClass('hover'); }, // 鼠标进入
function(){ $(this).removeClass('hover'); } // 鼠标离开
);
// 表单提交
$('form').submit(function(e){
e.preventDefault(); // 阻止默认提交
// 处理表单数据
});
3、动画效果
// 基本动画
$('div').hide(); // 隐藏
$('div').show(); // 显示
$('div').toggle(); // 切换显示/隐藏
// 渐变效果
$('div').fadeIn(); // 淡入
$('div').fadeOut(); // 淡出
$('div').fadeToggle(); // 切换淡入/淡出
// 滑动效果
$('div').slideDown(); // 向下滑动显示
$('div').slideUp(); // 向上滑动隐藏
$('div').slideToggle(); // 切换滑动
// 自定义动画
$('div').animate({
opacity: 0.5,
left: '+=50',
height: 'toggle'
}, 500);
5、链式调用
jQuery支持链式调用，可以在一个语句中执行多个操作。
$('p')
.css('color', 'red')
.slideUp(200)
.slideDown(200)
.addClass('highlight');
评论前必须登录！
注册