jQuery教程核心语法详解：DOM操作与AJAX请求分步教学

不少刚学 jQuery 的朋友跟兔子哥说，看了基础选择器和事件处理后，一到实际开发就卡壳 —— 想动态改个网页内容写半天没效果，想从服务器拿数据更是不知道从哪下手。其实啊，jQuery 的核心本事就俩：一个是 DOM 操作，能让网页元素 “听话”；另一个是 AJAX 请求，能让网页和服务器 “聊天”。今天咱们就掰开了揉碎了讲这两块，保证零基础的朋友也能看明白、学得会。

DOM 操作：让网页元素 “动起来” 的核心技巧

DOM 操作说白了就是对网页上的标签、文字、图片这些元素进行增删改查。用原生 JavaScript 做这些操作代码又长又麻烦，而 jQuery 把这些操作简化成了几个简单的方法，简直是新手福音。
先说说创建和添加元素。比如咱们想在网页里动态加个新按钮，用 jQuery 一行代码就能搞定：
javascript

// 创建一个按钮元素var newBtn = $("新按钮");// 把按钮加到页面的body里$("body").append(newBtn);

这里的append()方法就是 “追加” 的意思，把新元素放到父元素的最后面。除了 append，还有prepend()（加到最前面）、after()（加到元素后面）、before()（加到元素前面），这几个方法灵活得很，想把元素放哪就放哪。我之前帮朋友改网页，他想在每个文章标题前加个小图标，用before()方法批量操作，两分钟就搞定了，要是用原生 JavaScript 得写十几行代码呢。
再讲讲修改元素内容和样式。改文字内容用html()或text()，html()能识别 HTML 标签，text()只显示纯文本。比如把 id 为 “title” 的元素内容改成 “jQuery 教程”：
javascript

$("#title").html("jQuery教程"); // 文字会加粗// 或者$("#title").text("jQuery教程"); // 纯文本显示

改样式用css()方法，想改背景色就写$(".box").css("background", "blue")，想改字体大小就写$(".box").css("font-size", "16px")。要是一次性改多个样式，可以传对象：
javascript

$(".box").css({"background": "yellow","padding": "10px","border": "1px solid #000"});

有朋友问，为什么改了样式没效果？十有八九是选择器没选对元素，或者样式属性名写错了，比如把 “background” 写成 “backgroud”，这种小错误新手常犯，得多检查拼写。
最后是删除元素，用remove()或empty()。remove()是把元素本身和里面的内容全删掉，empty()只清空内容保留元素本身。比如清空 class 为 “list” 的列表：
javascript

$(".list").empty(); // 列表还在，里面的内容没了// 或者$(".list").remove(); // 连列表带内容全删掉

AJAX 请求：让网页和服务器 “聊天” 的实用技能

AJAX 这东西听起来挺唬人，其实就是让网页在不刷新的情况下从服务器拿数据或发数据。比如网页上的实时排行榜、加载更多内容，背后都是 AJAX 在干活。jQuery 的$.ajax()方法把原生 AJAX 的复杂操作简化了，新手很容易上手。
先看最常用的GET 请求，用来从服务器拿数据。比如从 “data.json” 文件里拿数据并显示：
javascript

$.get("data.json", function(data) {// data就是从服务器拿到的数据console.log("拿到的数据：", data);// 把数据显示到页面上$("#content").html("用户名：" + data.username);}).fail(function() {// 请求失败时执行alert("数据加载失败");});

$.get()后面可以跟成功回调和失败回调，成功了就处理数据，失败了就提示用户，这样体验更好。
再看POST 请求，用来给服务器发数据，比如表单提交。语法和 GET 类似，但要传数据参数：
javascript

$.post("submit.php", {username: "张三",age: 20}, function(response) {// 服务器返回的响应if (response.success) {alert("提交成功");} else {alert("提交失败：" + response.msg);}});

这里的{username: "张三", age: 20}就是要发给服务器的数据，服务器处理后会返回response，咱们根据返回结果给用户反馈。
要是想更灵活地配置请求，就用$.ajax()方法，它能设置请求类型、超时时间、请求头这些：
javascript

$.ajax({url: "data.php", // 请求地址type: "GET", // 请求类型：GET或POSTdata: {page: 1}, // 发送的数据timeout: 5000, // 超时时间5秒success: function(data) {// 成功处理},error: function() {// 失败处理}});

有朋友肯定遇到过 “跨域请求失败” 的问题，这是因为浏览器有安全限制，不让不同域名的网页随便通信。解决办法要么让服务器设置允许跨域的响应头，要么用 JSONP（不过现在用得少了），新手可以先在本地测试，用同一域名下的文件做实验，避开跨域问题。

实战小技巧：让代码更顺溜的经验分享

兔子哥总结了几个实用小技巧，能让你少走弯路：

• 操作 DOM 后记得 “刷新”：有时候动态添加的元素，之前绑定的事件没效果，这时候要用on()方法委托事件，比如给动态添加的按钮绑定点击：$("body").on("click", ".newBtn", function(){...})。
• AJAX 请求加加载提示：请求过程中加个 “加载中...” 的提示，成功或失败后再隐藏，用户体验更好，比如用$("#loading").show()和$("#loading").hide()。
• 多用 console.log 调试：拿不准数据对不对，就用console.log()打印出来看看，浏览器按 F12 打开控制台就能看到。

其实 DOM 操作和 AJAX 请求是 jQuery 的 “两大法宝”，学会了这俩，大部分网页交互效果都能实现。刚开始练的时候别贪多，先做几个小例子：比如用 DOM 操作做个待办清单，能添加删除事项；用 AJAX 请求加载本地 JSON 数据显示在页面上。练熟了再慢慢加功能，比如加个加载动画、处理错误情况。
兔子哥觉得，学 jQuery 核心语法最忌讳只看不动手，你看十遍教程不如自己敲一遍代码。遇到报错别慌，大部分问题都是拼写错误或逻辑顺序错了，仔细看看控制台的错误提示，网上搜一下，基本都能解决。刚开始慢没关系，练得多了自然就熟了，你会发现用 jQuery 写网页交互真的比原生 JavaScript 简单太多。希望这篇教程能帮到正在学的朋友，有问题随时留言，咱们一起交流进步～

标签： background 选择器