这篇文章介绍了jQuery，一个广泛使用的JavaScript库，简化了HTML文档操作、事件处理和动画。主要内容包括jQuery的下载、引入方式，以及基础使用如核心函数（如toggle()）、选择器（并集、后代、子元素等）和属性操作。文中通过实例展示了jQuery如何简化前端交互，如内容显示隐藏和批量删除表单元素。
目录
一、什么是jQuery
jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画效果等操作。通过使用 jQuery，开发者可以更快速、简便地操作和控制网页上的元素。
jQuery 提供了一系列的 API 和方法，可以帮助开发者在网页上选择元素、修改内容、添加样式、处理事件等。通过使用 jQuery，开发者可以实现更加动态和交互性的网页效果，而不需要手动编写冗长的 JavaScript 代码。
jQuery 的代码简洁易读，语法灵活，同时也具有跨浏览器的兼容性，可以在各种主流浏览器上稳定运行。它广泛应用于网页开发、移动应用开发以及混合应用开发等领域，是前端开发中常用的工具之一。
简单来说jQuery对于我们来说就是一个已经封装好的函数库，我们可以使用里面的函数来进行我们前端页面的交互。
二、官网下载
三、html文件引入形式
html文件要引用jQuery有两种形式，一种是使用官方npm形式，另一种是引入jQuery下载到本地的地址。
<script src="./js/jquery-3.6.0.js"></script>
使用npm形式的弊端就是加载会过慢。
四、基础使用
4.1 核心函数
4.1.1 jQuery使用方式
jQuery在html中使用有两种方式：
一种可以直接写jQuery("#id/.class/标签名")，另一种简写形式为$("#id/.class/标签名")
4.2 案例引入
如果我们想要做一个点击按钮就能显示文字，再点击就能隐藏的操作，我们自己要写script的话
<!DOCTYPE html>
<html>
<head>
<title>Show/Hide Text</title>
<style>
#text {
display: none;
}
</style>
</head>
<body>
<button id="toggleButton">Toggle Text</button>
<p id="text">This is some hidden text.</p>
<script>
var toggleButton = document.getElementById("toggleButton");
var text = document.getElementById("text");
toggleButton.addEventListener('click', function() {
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
});
</script>
</body>
</html>而如果我们要使用jQuery的话就变得十分简单。
$("#btn").click(function(){
$("#d1").toggle();
})使用toggle（）函数我们就能实现点击就能获得内容，再次点击就会消失的样式。
这个案例就可以看出jQuery就是一个函数封装体，使我们减少了许多的操作。
4.3 核心函数
1、$("#id/.class/标签名").toggle() //进行内容的显示与消失
2、$("#id/.class/标签名").ready(function(){ ...//执行内容 }) //当文档加载完毕后执行
3、$("#id/.class/标签名").append("追加内容") //追加内容到末尾，需要注意的是在append的函数中如果我们要加文字或者别的等等，必须和html中写入的标签形式一样，例如("div").append("<img src='img/10001.jpg'/>")
append()和appendTo的区别
/*在 jQuery 中，`append()` 和 `appendTo()` 方法都用于将元素添加到目标元素中，但它们的调用方式略有不同。下面是它们的区别：
1. `append()` 方法：
- 语法：`$(target).append(content)`。
- 它将 `content` 添加到 `target` 的末尾。
- 也就是说，你可以通过调用父元素的 `append()` 方法来添加子元素。
2. `appendTo()` 方法：
- 语法：`$(content).appendTo(target)`。
- 它将 `content` 添加到 `target` 的末尾。
- 也就是说，你可以通过调用要添加的元素的 `appendTo()` 方法来指定目标元素。
虽然 `append()` 和 `appendTo()` 看起来在用法上有所不同，但它们实际上完成了相同的任务。你可以根据个人喜好选择使用哪种方式，它们的效果是相同的。
以下是两种方法的示例：
/*使用 `append()` 方法：*/
$("#target").append("<p>This is some content</p>");
/*使用 `appendTo()` 方法：*/
$("<p>This is some content</p>").appendTo("#target");
/*两种方法都将创建一个新的段落元素，并将它添加到具有 `id` 为 `"target"` 的元素中。
希望这样能够清楚地解释 `append()` 和 `appendTo()` 方法之间的差异。*/
4.4 选择器
html中的主体部分
<body>
<div>
<h1 id="d1">第一，我不叫喂，我叫楚雨荨</h1>
<h1 class="c1">第二，我不是拽我是愤怒</h1>
<h1 class="c1">第三,如果你们再找我玩这种无聊的游戏,我一定让你们变真的猪头</h1>
</div>
<img src="img/10001.jpg" alt="">
<img src="img/10002.jpg" alt="">
<img src="img/10003.jpg" alt=""><br />
<button id="btn">测试</button>
</body>复合选择器
//1.选择selector1和selector2的元素（并集）进行toggle
$("h1,img").toggle();
//2.选择selector1中的selector2的元素进行toggle
$("div h1").toggle();
//3.选择selector1里面的直接子元素selector2进行toggle
$("div>h1").toggle();
//4.选择selector后紧接着的第一个selector2元素进行toggle
$("div+img").toggle();
//5.选择selector后紧接着的所有selector2元素进行toggle
$("div~img").toggle();选择器筛选
//1.first/last
$(div h1:last/first).toggle();
//2.odd/even表示索引为奇偶的
$("div h1；even").toggle();
//3.eq(index)：根据下标寻找符合的元素，下标从0开始，正数从头找，负数倒着找
$("div h1:eq(2)").toggle();
//4.lt/gt 小于/大于某个索引下标 可以使用负数
$("div h1:lt(2)").toggle();
$("div h1:gt(0)").toggle();
/*5.$("selector[attrName=attrValue]"):匹配selector选择的元素集合中attrName属性值为attrValue的元素*/
$("div h1[id!='d1']").toggle();
$("div h1[class='c1']").toggle();
//6.获得所有批量删除的选中的复选框
$("input[type='checkbox']:checked");筛选函数
//1.first()/last()
$("div h1").first().toggle();
//2.each(function(){}):遍历
$("div h1").each(function(){
//text():指元素的文本内容 相当于原生js里面的innerText
//$(this):表示当前元素
var d=$(this).text();
console.log(d);
})
//3.fileter("selector"):过滤：在已有的内容中再次筛选
$("div h1").filter("#d1").toggle();
//4.is(tag):判断选择的元素是否为某个标签
console.log($("div h1").is("h1"));
//5.find(selector):在父元素中寻找selector元素
&("div").find(".c1").toggle();4.5 选择器案例之批量删除表单中的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>筛选案例</title>
<script src="./js/jquery-3.6.0.js"></script>
</head>
<body>
<div>
<table border="1" cellspacing="0" width="200px" align="center">
<tr>
<td><input type="checkbox"><input type="button" id="btn" value="批量删除"/></td>
</tr>
<tr>
<td><input type="checkbox"/>内容1</td>
</tr>
<tr>
<td><input type="checkbox"/>内容2</td>
</tr>
<tr>
<td><input type="checkbox"/>内容3</td>
</tr>
</table>
</div>
</body>
</html>
<script>
$("#btn").click(function(){
//parent():获得当前元素的父元素
//remove():移除当前元素
$("div input[type='checkbox']:checked").parent().parent().remove();
})
</script>4.6 属性函数
<script>
$("#btn").click(function(){
//1.单个属性设置 attr()
//获得img图片框
//注意:$("#m1").attr("width")直接输出
//获得:元素.attr("属性名")
console.log($("#m1").attr("alt"));
//设置:元素.attr("属性名","属性值");
//$("#m1").attr("src","img/10002.jpg");
//继续设置
//$("#m1").attr("width","400px");
//2.获得/设置值 val()
//获得value值:value值主要是定义在表单中的多个控件，比如input
//通过val()函数获得元素的value
console.log($("#t1").val());
//设置值
//$("#t1").val("fanfan");
//3.prop({}):同时设置多个属性
//$("#m1").prop({width:400,src:"img/10002.jpg"})
//4.去除某个属性 removeAttr("属性名")
//$("#m1").removeAttr("width");
//5.添加给定样式(已有的) addClass("样式名")
//$("#d1").addClass("style1");
//$("#d1").addClass("style2");
//6.移除指定样式removeClass("样式名")
//$("#d1").removeClass("style2");
//7.toggleClass("样式名"):添加/移除切换
//$("#d1").toggleClass("style2");
//8.文本操作
// text() 相当于innerText
// html() 相当于innerHTML，可以解析html和css代码
//$("#d1").text("<img src='img/10002.jpg'/>")
$("#d1").html("<img src='img/10002.jpg'/>")
})
</script><script>
$("#btn").click(function(){
//1.文档内部的追加元素,在当前元素的内部添加一个子元素(加在最后)
//$("selector").append("元素")；
//$("元素").appendTo("selector")
//$("#d1").append("<img src='img/10001.jpg' width='200px'/>");
//$("<img src='img/10001.jpg' width='200px'/>").appendTo("#d1");
//2.文档的插入操作
// after:插入在某元素的后面
$("#d1").after("<img src='img/10001.jpg' width='200px'/>");
// insertAfter:插入在某元素的后面
// before:插入在某元素的前面
// insertBefore:插入在某元素的前面
})
</script>
扫一扫
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
