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

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

news 来源：原创 2025/4/30 6:11:07

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的强大之处在于它的简洁性和跨浏览器兼容性，使得开发者能够更专注于功能实现而不是浏览器差异。

相关文章：

  • 【HCIA】VRRP
  • HarmonyOS ArkUI交互事件与手势处理全解析：从基础到高级实践
  • Oracle OCP证书有效期是三年？
  • Windows 系统搭建Redis原生集群详细图文指南
  • 安卓基础（无障碍点击）
  • 3 celery任务与队列
  • linux FTP服务器搭建
  • 【Python零基础入门系列】第1篇：Python 是什么？怎么装环境？推荐哪些 IDE？
  • 系统的环境变量
  • flink cdc 配置
  • 客户案例分享｜运营商数智化经典案例 — XX运营商
  • Apache Flink的架构设计与运行流程说明
  • 电子电器架构 --- 人工智能、固态电池和先进自动驾驶功能等新兴技术的影响
  • IntelliJ IDEA 2024.3.1 for Mac 中文 Java开发工具
  • 织梦dedecms发布文章时取消自动生成关键字
  • 数据挖掘专栏介绍：用 Python + 大语言模型 (LLM) 重塑电商数据价值
  • 【Hive入门】Hive高级特性：视图与物化视图
  • C++——调用OpenCV和NVIDIA Video Codec SDK库实现使用GPU硬解码MP4视频文件
  • Go 1.25为什么要废除核心类型
  • 后验概率最大化（MAP）估计算法原理以及相具体的应用实例附C++代码示例
  • 央行召开落实金融“五篇大文章”总体统计制度动员部署会议
  • 打造全域消费场景，上海大世界百个演艺娱乐新物种待孵化
  • 一季度全国城镇新增就业308万人
  • 一个失败的赛季咎由自取，皇马只能把希望留到夏天
  • 人民日报：光荣属于每一个挺膺担当的奋斗者
  • 第二十届华表奖提名名单公布，张译、王一博、马丽、郭帆等入围