当前位置： 首页 > ai >正文

JavaScript学习教程，从入门到精通，jQuery快速入门指南（30）

ai 2025/5/2 8:27:27

jQuery快速入门指南

什么是jQuery

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。jQuery的设计宗旨是"Write Less, Do More"（写得更少，做得更多）。

jQuery的主要特点：

  • 轻量级
  • 强大的选择器
  • 出色的DOM操作
  • 可靠的事件处理
  • 完善的Ajax支持
  • 丰富的插件生态
  • 良好的浏览器兼容性

下载和引入jQuery

下载jQuery

可以从jQuery官网下载最新版本：https://jquery.com/

引入jQuery

有两种方式引入jQuery：

  1. 从本地引入：
<script src="jquery-3.6.0.min.js"></script>
  1. 使用CDN引入（推荐）：
<!-- 使用Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><!-- 或使用Microsoft CDN -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

jQuery的简单使用

基本语法

jQuery的基本语法是：$(selector).action()

  • $ 符号定义jQuery
  • selector 用于"查询"和"查找"HTML元素
  • action() 执行对元素的操作

文档就绪事件

为了防止文档在完全加载之前运行jQuery代码，所有jQuery代码都应该放在文档就绪事件中：

$(document).ready(function(){// jQuery代码写在这里
});// 简写形式
$(function(){// jQuery代码写在这里
});

jQuery对象

当使用jQuery选择器选择元素时，返回的是一个jQuery对象，而不是DOM元素。jQuery对象是一个包含零个或多个DOM元素的集合，并提供了许多方法来操作这些元素。

jQuery对象与DOM对象的转换

// DOM对象转jQuery对象
var domObj = document.getElementById("id");
var $jQueryObj = $(domObj);// jQuery对象转DOM对象
var domObj1 = $jQueryObj[0];  // 方式一
var domObj2 = $jQueryObj.get(0);  // 方式二

语法知识点及案例代码

1. 选择器

jQuery使用CSS样式选择器来选取HTML元素。

// 元素选择器
$("p")  // 选择所有<p>元素// id选择器
$("#test")  // 选择id="test"的元素// class选择器
$(".test")  // 选择class="test"的元素// 更多选择器示例
$("*")          // 选择所有元素
$("p.intro")    // 选择class="intro"的<p>元素
$("p:first")    // 选择第一个<p>元素
$("ul li:first") // 选择第一个<ul>元素的第一个<li>元素
$("ul li:first-child") // 选择每个<ul>元素的第一个<li>元素
$("[href]")     // 选择带有href属性的元素
$("a[target='_blank']") // 选择target="_blank"的<a>元素
$("a[target!='_blank']") // 选择target不是"_blank"的<a>元素
$(":button")    // 选择所有type="button"的<input>元素和<button>元素
$("tr:even")   // 选择偶数位置的<tr>元素
$("tr:odd")    // 选择奇数位置的<tr>元素

2. 事件处理

// 点击事件
$("#btn").click(function(){alert("按钮被点击了!");
});// 鼠标悬停事件
$("p").hover(function(){$(this).css("background-color", "yellow");},function(){$(this).css("background-color", "white");}
);// 表单事件
$("input").focus(function(){$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){$(this).css("background-color", "#ffffff");
});// 文档加载完成事件
$(document).ready(function(){console.log("文档加载完成");
});// 简写形式
$(function(){console.log("文档加载完成(简写形式)");
});

3. DOM操作

// 获取内容
var text = $("#test").text();  // 获取文本内容
var html = $("#test").html();  // 获取HTML内容
var val = $("#input").val();   // 获取表单字段的值// 设置内容
$("#test").text("Hello world!");  // 设置文本内容
$("#test").html("<b>Hello world!</b>");  // 设置HTML内容
$("#input").val("John Doe");  // 设置表单字段的值// 获取属性
var href = $("a").attr("href");// 设置属性
$("a").attr("href", "https://www.newwebsite.com");// 添加元素
$("p").append("追加文本");  // 在元素内部末尾追加内容
$("p").prepend("前置文本"); // 在元素内部开头插入内容
$("p").after("<div>之后插入</div>");  // 在元素之后插入内容
$("p").before("<div>之前插入</div>"); // 在元素之前插入内容// 删除元素
$("#div1").remove();  // 删除元素及其子元素
$("#div1").empty();   // 删除元素的子元素// 操作CSS
$("p").addClass("important");  // 添加类
$("p").removeClass("important");  // 删除类
$("p").toggleClass("important");  // 切换类
$("p").css("color", "red");  // 设置CSS属性
$("p").css({"color":"red","background-color":"yellow"});  // 设置多个CSS属性

4. 效果和动画

// 显示和隐藏
$("#hide").click(function(){$("p").hide();  // 隐藏元素
});
$("#show").click(function(){$("p").show();  // 显示元素
});
$("#toggle").click(function(){$("p").toggle();  // 切换显示/隐藏状态
});// 淡入淡出
$("#fadeIn").click(function(){$("div").fadeIn();
});
$("#fadeOut").click(function(){$("div").fadeOut();
});
$("#fadeToggle").click(function(){$("div").fadeToggle();
});
$("#fadeTo").click(function(){$("div").fadeTo("slow", 0.5);  // 淡出到指定透明度
});// 滑动
$("#slideDown").click(function(){$("div").slideDown();
});
$("#slideUp").click(function(){$("div").slideUp();
});
$("#slideToggle").click(function(){$("div").slideToggle();
});// 自定义动画
$("#animate").click(function(){$("div").animate({left: '250px',opacity: '0.5',height: '+=150px',width: '+=150px'}, "slow");
});// 停止动画
$("#stop").click(function(){$("div").stop();
});

5. AJAX

// 加载内容
$("#load").click(function(){$("#div1").load("demo_test.txt");  // 从服务器加载数据并放入元素中
});// GET请求
$("#get").click(function(){$.get("demo_test.asp", function(data, status){alert("数据: " + data + "\n状态: " + status);});
});// POST请求
$("#post").click(function(){$.post("demo_test_post.asp",{name: "Donald Duck",city: "Duckburg"},function(data, status){alert("数据: " + data + "\n状态: " + status);});
});// AJAX完整方法
$("#ajax").click(function(){$.ajax({url: "demo_test.txt",type: "GET",dataType: "text",success: function(result){$("#div1").html(result);},error: function(xhr, status, error){alert("错误: " + error);}});
});

6. 遍历

// 祖先
$("span").parent();  // 返回直接父元素
$("span").parents();  // 返回所有祖先元素
$("span").parentsUntil("div");  // 返回介于两个给定元素之间的所有祖先元素// 后代
$("div").children();  // 返回所有直接子元素
$("div").find("span");  // 返回被选元素的后代元素，一路向下直到最后一个后代// 同胞
$("h2").siblings();  // 返回所有同胞元素
$("h2").next();  // 返回下一个同胞元素
$("h2").nextAll();  // 返回所有跟随的同胞元素
$("h2").nextUntil("h6");  // 返回介于两个给定参数之间的所有跟随的同胞元素
$("h2").prev();  // 返回上一个同胞元素
$("h2").prevAll();  // 返回所有前面的同胞元素
$("h2").prevUntil("h6");  // 返回介于两个给定参数之间的所有前面的同胞元素// 过滤
$("div").first();  // 返回被选元素的第一个元素
$("div").last();  // 返回被选元素的最后一个元素
$("p").eq(1);  // 返回被选元素中带有指定索引号的元素
$("p").filter(".intro");  // 返回匹配标准的所有元素
$("p").not(".intro");  // 返回不匹配标准的所有元素

综合案例

案例1：简单的jQuery应用

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){// 隐藏所有段落$("#hide").click(function(){$("p").hide();});// 显示所有段落$("#show").click(function(){$("p").show();});// 改变段落样式$("#style").click(function(){$("p").css({"color": "red", "font-size": "20px"});});// 添加新段落$("#add").click(function(){$("body").append("<p>这是新添加的段落</p>");});
});
</script>
</head>
<body><p>这是一个段落。</p>
<p>这是另一个段落。</p><button id="hide">隐藏段落</button>
<button id="show">显示段落</button>
<button id="style">改变样式</button>
<button id="add">添加段落</button></body>
</html>

案例2：AJAX加载内容

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){// 加载外部内容$("#loadContent").click(function(){$("#content").load("demo_ajax_load.txt", function(responseTxt, statusTxt, xhr){if(statusTxt == "success")alert("外部内容加载成功!");if(statusTxt == "error")alert("错误: " + xhr.status + ": " + xhr.statusText);});});// 获取JSON数据$("#getJSON").click(function(){$.getJSON("demo_ajax_json.js", function(result){$.each(result, function(i, field){$("#content").append(field + " ");});});});
});
</script>
</head>
<body><div id="content" style="height:100px;width:300px;border:1px solid black;padding:10px;"></div><button id="loadContent">加载内容</button>
<button id="getJSON">获取JSON数据</button></body>
</html>

案例3：表单验证

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){// 表单提交验证$("form").submit(function(event){var name = $("#name").val();var email = $("#email").val();var isValid = true;// 验证姓名if(name == ""){$("#nameError").text("姓名不能为空");isValid = false;}else{$("#nameError").text("");}// 验证邮箱if(email == ""){$("#emailError").text("邮箱不能为空");isValid = false;}else if(!isValidEmail(email)){$("#emailError").text("请输入有效的邮箱地址");isValid = false;}else{$("#emailError").text("");}if(!isValid){event.preventDefault(); // 阻止表单提交}});// 邮箱验证函数function isValidEmail(email) {var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;return pattern.test(email);}
});
</script>
<style>
.error { color: red; font-size: 12px; }
</style>
</head>
<body><form action="/submit" method="post"><div><label for="name">姓名:</label><input type="text" id="name" name="name"><span id="nameError" class="error"></span></div><div><label for="email">邮箱:</label><input type="text" id="email" name="email"><span id="emailError" class="error"></span></div><button type="submit">提交</button>
</form></body>
</html>

案例4：图片轮播

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){var currentIndex = 0;var images = $("#slider img");var totalImages = images.length;// 隐藏所有图片，只显示第一张images.hide();$(images[currentIndex]).show();// 下一张按钮$("#next").click(function(){$(images[currentIndex]).fadeOut(500);currentIndex = (currentIndex + 1) % totalImages;$(images[currentIndex]).fadeIn(500);});// 上一张按钮$("#prev").click(function(){$(images[currentIndex]).fadeOut(500);currentIndex = (currentIndex - 1 + totalImages) % totalImages;$(images[currentIndex]).fadeIn(500);});// 自动轮播var interval = setInterval(function(){$("#next").click();}, 3000);// 鼠标悬停时暂停轮播$("#slider").hover(function(){clearInterval(interval);},function(){interval = setInterval(function(){$("#next").click();}, 3000);});
});
</script>
<style>
#slider {width: 500px;height: 300px;margin: 0 auto;position: relative;overflow: hidden;border: 1px solid #ccc;
}
#slider img {position: absolute;width: 100%;height: 100%;object-fit: cover;
}
#controls {text-align: center;margin-top: 10px;
}
button {padding: 5px 15px;margin: 0 5px;
}
</style>
</head>
<body><div id="slider"><img src="image1.jpg" alt="Image 1"><img src="image2.jpg" alt="Image 2"><img src="image3.jpg" alt="Image 3">
</div><div id="controls"><button id="prev">上一张</button><button id="next">下一张</button>
</div></body>
</html>

通过这些基础知识和案例，你应该能够开始使用jQuery来简化你的JavaScript编程了。jQuery的强大之处在于它的简洁性和跨浏览器兼容性，使得开发者能够更专注于功能实现而不是浏览器差异。

http://www.xdnf.cn/news/2943.html

相关文章：

  • 建立对人工智能（AI）的信任
  • Oracle11g——空表无法导出的问题
  • 软件分析师-第三遍-章节导图-13/14
  • 基础排序方法
  • 【C++11】新的类功能、lambda
  • SICAR 标准功能块 FB3352 （MODE）工作模式功能块
  • 是否想要一个桌面哆啦A梦的宠物
  • 特征工程四-2：使用GridSearchCV 进行超参数网格搜索（Hyperparameter Tuning）的用途
  • 基于开闭原则优化数据库查询语句拼接方法
  • KenticoCMS 文件上传导致xss漏洞复现（CVE-2025-2748）
  • RN 获取视频封面，获取视频第一帧
  • 【免费下载】1985-2023年全国土地利用数据
  • 《算法笔记》10.5小节——图算法专题-＞最小生成树 问题 B: Freckles
  • 当前HPLC载波无法满足全量数据分钟级采集需求的主要原因
  • STM32 SPI通信协议
  • 从整体上把握操作系统的作用，以及理解进程状态是什么
  • EtherCAT转Profinet网关，包装产线的“语言翻译器”
  • python:练习：2
  • 查看Mysql版本
  • c/c++之信号处理＜signal.h＞
  • 【vue3】黑马程序员前端Vue3小兔鲜电商项目【五】
  • 问题排查：calss extends 后页面加载不出来（忘记加super），打包后不报错；遇到问题可以适当出去走一下，让脑子休息一下
  • AimRT 从零到一：官方示例精讲 —— 五、Parameter示例.md
  • WPF（Windows Presentation Foundation）的内容模型
  • 可视化图解算法： 判断是不是二叉搜索树（验证二叉搜索树）
  • SEO优化指南与实战技巧
  • centos安装部署配置kafka
  • Vue常用的修饰符有哪些有什么应用场景（含deep seek讲解）
  • 通用事件库IO多路复用技术选型与设计
  • 常见位运算总结