在完成jQuery安装后，入门开发的核心是掌握“如何用简洁的语法替代复杂的原生JS代码”。jQuery的核心优势是“链式调用”和“简化操作”，本文将从基础语法入手，带你掌握选择器、DOM操作、事件处理、简单动画四大核心能力，最终通过一个实战案例整合所学知识，让你快速具备jQuery开发的基础能力。
一、jQuery核心基础：理解$()与DOM就绪事件
在写任何jQuery代码前，必须先掌握两个核心基础：$()函数（jQuery的“入口”）和DOM就绪事件（确保代码在页面加载完成后执行）。
1. 核心函数$()：jQuery的“万能入口”
$()是jQuery的核心函数，也可写作jQuery()，主要作用有3个：
选择DOM元素：如$('#box')选择ID为box的元素（替代原生document.getElementById('box')）；
创建DOM元素：如$('<div>新元素</div>')创建一个div元素；
绑定DOM就绪事件：如$(function(){...})，确保代码在页面DOM加载完成后执行。
注意：$是jQuery的简写，两者完全等价，实际开发中更常用$（更简洁）。
2. DOM就绪事件：避免“元素未加载就操作”
原生JS中，若想在DOM加载完成后执行代码，需监听DOMContentLoaded事件；jQuery简化了这一过程，提供两种常用写法：
写法类型语法示例说明
完整写法$(document).ready(function() { // 代码 })清晰表达“监听document的就绪事件”
简写写法（推荐）$(function() { // 代码 })功能相同，代码更简洁，实际开发首选
为什么必须用就绪事件？
若不等待DOM就绪，直接操作元素，可能因元素未加载导致代码失效。例如：
<!-- 错误示例：代码在元素之前，元素未加载，操作失效 -->
<script>
// 此时#test元素还未加载，$('#test').text()无法生效
$('#test').text('修改文本');
</script>
<div id="test"></div>
<!-- 正确示例：用就绪事件，等待元素加载完成 -->
<script>
$(function() {
// DOM已加载，操作生效
$('#test').text('修改文本成功');
});
</script>
<div id="test"></div>
二、jQuery核心选择器：快速定位DOM元素
选择器是jQuery的“基石”——它简化了原生JS的元素查找逻辑，支持几乎所有CSS选择器，且语法更简洁。以下是入门必学的6类选择器：
1. 基础选择器（最常用）
对应CSS基础选择器，是日常开发中使用频率最高的选择器，对比原生JS写法更直观：
选择器类型jQuery语法作用原生JS等效写法示例代码
ID选择器$('#id')选择指定ID的元素（唯一）document.getElementById('id')$('#box')选择ID为box的元素
类选择器$('.class')选择指定类名的所有元素document.getElementsByClassName('class')$('.item')选择所有类为item的元素
标签选择器$('tag')选择指定标签的所有元素document.getElementsByTagName('tag')$('p')选择所有p标签
通配符选择器$('*')选择页面所有元素（慎用）document.getElementsByTagName('*')$('*').css('margin', 0)清除所有元素margin
多元素选择器$('selector1, selector2')同时选择多个选择器匹配的元素需多次调用原生方法再合并数组$('#box, .item')选择ID为box和类为item的元素
示例：基础选择器实战
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery基础选择器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
< href="zhiq.zhaopin.com/moment/82035808 ">
< href="zq.zhaopin.com/moment/82035807 ">
< href="zq-mobile.zhaopin.com/moment/82035807 ">
< href="zhiq.zhaopin.com/moment/82035807 ">
< href="zq.zhaopin.com/moment/82035805 ">
< href="zq-mobile.zhaopin.com/moment/82035805 ">
< href="zhiq.zhaopin.com/moment/82035805 ">
< href="zq.zhaopin.com/moment/82035789 ">
< href="zq-mobile.zhaopin.com/moment/82035789 ">
< href="zhiq.zhaopin.com/moment/82035789 ">
</head>
<body>
<div id="box">ID选择器目标</div>
<p class="item">类选择器目标1</p>
<p class="item">类选择器目标2</p>
<span>标签选择器目标</span>
<script>
$(function() {
// 1. ID选择器：修改#box的样式
$('#box').css({
'color': 'red',
'font-size': '18px'
});
// 2. 类选择器：给所有.item添加下划线
$('.item').css('text-decoration', 'underline');
// 3. 标签选择器：给span添加背景色
$('span').css('background-color', '#f0f7ff');
// 4. 多元素选择器：同时修改#box和span的margin
$('#box, span').css('margin', '10px 0');
});
</script>
</body>
</html>
2. 层级选择器（按DOM关系选择）
根据元素在DOM中的层级关系（父子、后代、兄弟）选择元素，比基础选择器更精准：
选择器类型jQuery语法作用示例代码
后代选择器$('parent descendant')选择parent下所有后代元素（包括子、孙等）$('#box p')选择#box下所有p标签
子选择器$('parent > child')选择parent下直接子元素（仅一级）$('#box > p')选择#box下直接子p标签
相邻兄弟选择器$('prev + next')选择prev元素后面紧邻的第一个兄弟元素$('.item + p')选择.item后面紧邻的p标签
通用兄弟选择器$('prev ~ siblings')选择prev元素后面所有兄弟元素$('.item ~ p')选择.item后面所有p标签
示例：层级选择器实战
<div id="parent">
<p class="child">直接子元素p</p>
<div class="sub">
<p class="grandchild">孙子元素p</p>
< href="zq.zhaopin.com/moment/82035785 ">
< href="zq-mobile.zhaopin.com/moment/82035785 ">
< href="zhiq.zhaopin.com/moment/82035785 ">
< href="zq.zhaopin.com/moment/82035782 ">
< href="zq-mobile.zhaopin.com/moment/82035782 ">
< href="zhiq.zhaopin.com/moment/82035782 ">
< href="zq.zhaopin.com/moment/82035779 ">
< href="zq-mobile.zhaopin.com/moment/82035779 ">
< href="zhiq.zhaopin.com/moment/82035779 ">
< href="zq.zhaopin.com/moment/82035773 ">
</div>
<span>兄弟元素span</span>
<p>兄弟元素p</p>
</div>
<script>
$(function() {
// 1. 后代选择器：#parent下所有p（包括child和grandchild）
$('#parent p').css('color', 'blue');
// 2. 子选择器：#parent下直接子元素p（仅.child）
$('#parent > p').css('font-weight', 'bold');
// 3. 相邻兄弟选择器：.sub后面紧邻的span
$('.sub + span').css('background', '#ffeeba');
// 4. 通用兄弟选择器：.sub后面所有兄弟元素（span和p）
$('.sub ~ *').css('margin-left', '20px');
});
</script>
3. 过滤选择器（筛选匹配元素）
在已选择的元素集合中，按条件筛选出部分元素（如“第一个”“最后一个”“索引为n的元素”）：
选择器类型jQuery语法作用示例代码
:first$('selector:first')选择匹配元素中的第一个$('li:first')选择第一个li标签
:last$('selector:last')选择匹配元素中的最后一个$('li:last')选择最后一个li标签
:eq(n)$('selector:eq(n)')选择匹配元素中索引为n的元素（n从0开始）$('li:eq(2)')选择第三个li标签（索引2）
:odd$('selector:odd')选择匹配元素中索引为奇数的元素$('li:odd')选择索引1、3、5...的li
:even$('selector:even')选择匹配元素中索引为偶数的元素$('li:even')选择索引0、2、4...的li
示例：过滤选择器实战（列表隔行变色）
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<script>
$(function() {
// 1. 隔行变色：偶数索引（0、2、4）的li添加灰色背景
$('#list li:even').css('background-color', '#f8f9fa');
// 2. 第一个li添加红色文本
$('#list li:first').css('color', 'red');
// 3. 索引为2的li（第三个）添加加粗
$('#list li:eq(2)').css('font-weight', 'bold');
// 4. 最后一个li添加下划线
$('#list li:last').css('text-decoration', 'underline');
});
</script>
三、jQuery DOM操作：轻松修改元素内容、属性与样式
jQuery简化了原生JS的DOM操作，将“获取→修改”的多步操作封装为单步方法，以下是入门必学的三类DOM操作：
1. 内容操作：修改元素文本与HTML
通过text()和html()方法，可快速获取或修改元素的文本内容与HTML内容，对比原生JS更简洁：
方法作用语法示例原生JS等效写法
text()获取/设置元素的纯文本内容（不解析HTML）$('selector').text()（获取）
$('selector').text('新文本')（设置）获取：elem.innerText
设置：elem.innerText = '新文本'
html()获取/设置元素的HTML内容（解析HTML标签）$('selector').html()（获取）
$('selector').html('<b>新HTML</b>')（设置）获取：elem.innerHTML
设置：elem.innerHTML = '<b>新HTML</b>'
示例：内容操作实战
<div id="content">
初始文本 <span>内嵌span</span>
</div>
<script>
$(function() {
// 1. 获取文本内容（text()：忽略HTML标签，只取文本）
const text = $('#content').text();
console.log('文本内容：', text); // 输出："初始文本 内嵌span"
// 2. 获取HTML内容（html()：包含HTML标签）
const html = $('#content').html();
console.log('HTML内容：', html); // 输出："初始文本 <span>内嵌span</span>"
// 3. 设置纯文本（不会解析<b>标签）
$('#content').text('新文本 <b>加粗</b>');
// 结果：<div id="content">新文本 <b>加粗</b></div>（<b>被当作文本）
// 4. 设置HTML（会解析<b>标签，显示加粗效果）
$('#content').html('新HTML <b>加粗</b>');
// 结果：<div id="content">新HTML <b>加粗</b></div>（<b>生效）
});
</script>
2. 属性操作：修改元素属性与状态
通过attr()和prop()方法操作元素属性，两者分工不同：attr()用于“普通属性”（如src、alt、class），prop()用于“布尔属性”（如checked、disabled、selected）。
方法适用场景语法示例说明
attr()普通属性（src、alt、class等）$('img').attr('src', 'new.jpg')（设置）
$('img').attr('src')（获取）可设置自定义属性，如data-id
prop()布尔属性（checked、disabled等）$('input:checkbox').prop('checked', true)（设置）
$('input:checkbox').prop('checked')（获取）布尔属性值为true/false，用attr()可能返回"checked"字符串，不便于判断
示例：属性操作实战（图片切换+复选框控制）
<!-- 图片切换 -->
<img id="pic" src="https://picsum.photos/200/100?1" alt="初始图片">
<button id="changePic">切换图片</button>
<!-- 复选框控制 -->
<input type="checkbox" id="agree"> 同意协议
<button id="submitBtn" disabled>提交</button>
<script>
$(function() {
// 1. 图片切换：修改src属性
$('#changePic').click(function() {
// 获取当前图片src，切换为新图片
const currentSrc = $('#pic').attr('src');
const newSrc = currentSrc.includes('?1') ? 'https://picsum.photos/200/100?2' : 'https://picsum.photos/200/100?1';
$('#pic').attr('src', newSrc);
// 同时修改alt属性
$('#pic').attr('alt', currentSrc.includes('?1') ? '切换后图片' : '初始图片');
});
// 2. 复选框控制按钮禁用状态：修改checked布尔属性
$('#agree').click(function() {
// 获取复选框是否选中（用prop()获取布尔值）
const isChecked = $(this).prop('checked');
// 设置提交按钮的disabled状态（布尔属性）
$('#submitBtn').prop('disabled', !isChecked);
});
});
</script>
3. 样式操作：修改元素样式与类
jQuery提供两种样式操作方式：css()直接修改行内样式，addClass()/removeClass()/toggleClass()通过类名控制样式（推荐后者，更符合“样式与逻辑分离”原则）。
方法作用语法示例说明
css()直接设置/获取行内样式$('div').css('color', 'red')（单个样式）
$('div').css({ 'color': 'red', 'font-size': '16px' })（多个样式）适合临时修改少量样式
addClass(className)给元素添加类名$('div').addClass('active')类名在CSS中定义，可复用
removeClass(className)给元素移除类名$('div').removeClass('active')移除指定类名
toggleClass(className)切换类名（有则移除，无则添加）$('div').toggleClass('active')适合“点击切换状态”场景
示例：样式操作实战（按钮点击切换状态）
<style>
.btn {
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
.btn.active {
background-color: #0d6efd;
color: white;
border-color: #0d6efd;
}
</style>
<button class="btn" id="toggleBtn">点击切换状态</button>
<script>
$(function() {
// 点击按钮切换active类（实现样式切换）
$('#toggleBtn').click(function() {
// 方式1：用toggleClass()切换类（推荐）
$(this).toggleClass('active');
// 方式2：用css()直接修改样式（不推荐，样式与逻辑耦合）
// const isActive = $(this).hasClass('active'); // 判断是否有active类
// $(this).css({
// 'background-color': isActive ? '#fff' : '#0d6efd',
// 'color': isActive ? '#333' : '#fff',
// 'border-color': isActive ? '#ddd' : '#0d6efd'
// });
});
});
</script>
四、jQuery事件处理：简化交互逻辑
jQuery将原生JS的事件绑定（如addEventListener）封装为简洁的方法，支持“简写绑定”和“通用绑定”，同时解决了浏览器兼容性问题。
1. 常用事件的简写绑定（入门首选）
jQuery为常用事件（如点击、鼠标悬停、输入）提供了简写方法，直接调用即可绑定事件，语法：$('selector').事件名(事件处理函数)。
事件类型jQuery简写方法作用示例代码
点击事件click()元素被点击时触发$('button').click(function() { ... })
鼠标悬停hover(over, out)鼠标进入（over）和离开（out）时触发$('div').hover(function() { ... }, function() { ... })
输入事件input()输入框内容变化时触发$('input').input(function() { ... })
页面加载ready()DOM加载完成时触发（即前面的$(function(){})）$(document).ready(function() { ... })
示例：简写事件实战（输入实时显示+鼠标悬停效果）
<!-- 输入实时显示 -->
<input type="text" id="inputText" placeholder="请输入内容...">
<div id="showText">输入的内容将显示在这里</div>
<!-- 鼠标悬停效果 -->
<div id="hoverBox" style="width: 200px; height: 100px; background: #f0f7ff; margin-top: 20px;"></div>
<script>
$(function() {
// 1. 输入事件：实时显示输入内容
$('#inputText').input(function() {
// 获取输入框内容，显示到#showText
const inputVal = $(this).val(); // val()是输入框专用方法，获取输入值
$('#showText').text(inputVal || '输入的内容将显示在这里');
});
// 2. 鼠标悬停事件：进入时修改背景，离开时恢复
$('#hoverBox').hover(
// 鼠标进入时执行
function() {
$(this).css('background-color', '#0d6efd');
},
// 鼠标离开时执行
function() {
$(this).css('background-color', '#f0f7ff');
}
);
// 3. 点击事件：点击hoverBox恢复默认背景
$('#hoverBox').click(function() {
$(this).css('background-color', '#f0f7ff');
});
});
</script>
2. 通用事件绑定：on()方法（灵活扩展）
当需要绑定“自定义事件”或“动态元素事件”时，需用on()方法（更通用、灵活），语法：$('selector').on('事件名', 事件处理函数)。
核心优势：支持动态元素事件绑定
初级开发中，若元素是动态创建的（如点击按钮添加的li），简写方法（如click()）无法绑定事件，此时必须用on()方法绑定到“静态父元素”上，示例：
<ul id="dynamicList">
<!-- 动态添加的li将在这里 -->
</ul>
<button id="addLi">添加列表项</button>
<script>
$(function() {
// 1. 点击按钮添加动态li
$('#addLi').click(function() {
const li = $('<li>动态列表项（点击删除）</li>');
$('#dynamicList').append(li); // append()：在元素末尾添加子元素
});
// 2. 用on()绑定动态li的点击事件（绑定到静态父元素#dynamicList）
$('#dynamicList').on('click', 'li', function() {
// 点击动态li时删除自己
$(this).remove(); // remove()：删除元素
});
// 注意：若用简写方法，动态li无法绑定事件（错误示例）
// $('#dynamicList li').click(function() { ... }); // 仅绑定初始li，动态添加的无效
});
</script>
五、jQuery简单动画：实现基础交互效果
jQuery内置了常用动画方法，无需写CSS关键帧，直接调用即可实现“显示/隐藏”“滑动”“淡入淡出”等效果，语法简洁且支持自定义时长。
1. 基础显示隐藏动画
方法作用语法示例说明
show([时长])显示隐藏的元素$('div').show(500)时长单位：毫秒（ms），500即0.5秒；不填则无动画
hide([时长])隐藏显示的元素$('div').hide('slow')支持关键词：'slow'（600ms）、'fast'（200ms）
toggle([时长])切换元素显示/隐藏状态$('div').toggle(300)显示则隐藏，隐藏则显示
示例：显示隐藏动画实战
<div id="animateBox" style="width: 200px; height: 200px; background: #0d6efd; display: none;"></div>
<button id="toggleBtn">显示/隐藏</button>
<script>
$(function() {
$('#toggleBtn').click(function() {
// 切换#animateBox的显示/隐藏，动画时长300ms
$('#animateBox').toggle(300);
// 同时修改按钮文本
const isVisible = $('#animateBox').is(':visible'); // is(':visible')判断元素是否显示
$(this).text(isVisible ? '隐藏' : '显示');
});
});
</script>
2. 滑动动画（适合折叠面板）
方法作用语法示例适用场景
slideDown([时长])向下滑动显示元素$('div').slideDown(500)折叠面板“展开”
slideUp([时长])向上滑动隐藏元素$('div').slideUp('slow')折叠面板“收起”
slideToggle([时长])切换滑动显示/隐藏$('div').slideToggle(300)折叠面板“切换”
示例：滑动动画实战（简单折叠面板）
<style>
.panel-header {
padding: 12px;
background: #f8f9fa;
border: 1px solid #ddd;
cursor: pointer;
font-weight: 500;
}
.panel-content {
padding: 12px;
border: 1px solid #ddd;
border-top: none;
display: none;
}
</style>
<div class="panel">
<div class="panel-header" id="panelHeader">点击展开面板</div>
<div class="panel-content" id="panelContent">
这是折叠面板的内容，用jQuery滑动动画实现展开/收起效果，适合展示冗余信息。
</div>
</div>
<script>
$(function() {
$('#panelHeader').click(function() {
// 滑动切换面板内容
$('#panelContent').slideToggle(300);
// 修改面板标题文本
const isVisible = $('#panelContent').is(':visible');
$(this).text(isVisible ? '点击收起面板' : '点击展开面板');
});
});
</script>
六、实战案例：整合所学知识实现待办事项列表
通过一个简单的待办事项列表，整合“选择器、DOM操作、事件处理、动画”四大核心知识点，实现“添加待办、标记完成、删除待办”功能：
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery实战：待办事项列表</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.todo-container {
max-width: 500px;
margin: 30px auto;
padding: 0 20px;
}
.todo-input {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
#todoText {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
#addTodo {
padding: 10px 20px;
background: #0d6efd;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.todo-list {
list-style: none;
padding: 0;
}
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
margin-bottom: 8px;
background: #f8f9fa;
border-radius: 4px;
transition: background 0.2s;
}
.todo-item.completed .todo-text {
text-decoration: line-through;
color: #6c757d;
}
.todo-check {
width: 18px;
height: 18px;
cursor: pointer;
}
.todo-delete {
padding: 4px 8px;
background: #dc3545;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
</style>
</head>
<body>
<div class="todo-container">
<!-- 待办输入区 -->
<div class="todo-input">
<input type="text" id="todoText" placeholder="请输入待办事项...">
<button id="addTodo">添加</button>
</div>
<!-- 待办列表 -->
<ul class="todo-list" id="todoList"></ul>
</div>
<script>
$(function() {
// 1. 添加待办事项
$('#addTodo').click(addTodo);
// 按Enter键也能添加
$('#todoText').keydown(function(e) {
if (e.key === 'Enter') addTodo();
});
// 2. 绑定动态待办项的事件（点击复选框标记完成、点击删除按钮删除）
$('#todoList').on('click', '.todo-check', function() {
// 点击复选框，切换待办项的completed类
$(this).parent('.todo-item').toggleClass('completed');
});
$('#todoList').on('click', '.todo-delete', function() {
// 点击删除按钮，用动画删除待办项
$(this).parent('.todo-item').hide(300, function() {
// 动画结束后彻底删除元素
$(this).remove();
});
});
// 3. 添加待办事项的函数
function addTodo() {
const todoText = $('#todoText').val().trim();
if (!todoText) {
alert('请输入待办事项内容！');
return;
}
// 创建待办项li元素
const todoItem = $(`
<li class="todo-item">
<input type="checkbox" class="todo-check">
<span class="todo-text">${todoText}</span>
<button class="todo-delete">删除</button>
</li>
`);
// 添加到列表（带显示动画）
todoItem.hide(); // 先隐藏，再用show动画显示
$('#todoList').append(todoItem);
todoItem.show(300);
// 清空输入框
$('#todoText').val('').focus();
}
});
</script>
</body>
</html>
案例核心知识点整合
选择器：用#todoText、.todo-check等选择器定位元素；
DOM操作：append()添加待办项、val()获取输入值、toggleClass()标记完成；
事件处理：用click()绑定添加按钮事件，on()绑定动态待办项的复选框和删除按钮事件；
动画：show(300)和hide(300)实现待办项的显示/删除动画。
七、入门常见问题与注意事项
$符号冲突怎么办？若其他库（如Prototype.js）也使用$，会导致冲突，解决方案：
// 1. 释放$的控制权，后续用jQuery代替$
jQuery.noConflict();
jQuery(function() {
jQuery('#box').text('用jQuery代替$');
});
// 2. 自定义别名（如$j）
const $j = jQuery.noConflict();
$j(function() {
$j('#box').text('用$j代替$');
});
动态元素事件绑定无效？必须用on()方法将事件绑定到“静态父元素”，而非动态元素本身（如前面的待办列表案例）。
val()、text()、html()的区别？
val()：仅用于输入框（input、textarea等），获取/设置输入值；
text()：用于所有元素，获取/设置纯文本（不解析HTML）；
html()：用于所有元素，获取/设置HTML内容（解析HTML标签）。
动画效果不生效？确保元素初始状态不是position: fixed或display: none（部分动画需要初始布局），或检查是否有CSS样式覆盖了jQuery动画（如transition）。
通过本文的学习，你已掌握jQuery入门开发的核心能力——选择器定位元素、DOM操作修改内容/属性/样式、事件处理实现交互、简单动画提升体验。后续可通过更多实战案例（如表单验证、轮播图）巩固所学，逐步提升jQuery开发能力。
