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

JQuery初步学习

article 2026/1/29 20:00:17

文章目录

一、前言
二、概述
- 2.1 介绍
- 2.2 安装
三、语法
- 3.1 文档就绪
- 3.2 选择器
四、事件
- 4.1 概述
- 4.2 事件绑定/解绑
- 4.3 一次性事件
- 4.4 事件委托
- 4.5 自定义事件
五、效果
- 5.1 隐藏/显示
- 5.2 淡入淡出
- 5.3 滑动
- 5.4 动画
六、链
七、HTML
- 7.1 内容/属性
- 7.2 元素操作
- 7.3 类属性
- 7.4 样式属性
- 7.5 遍历dom
- 7.6 过滤元素

一、前言

官方网站：https://jquery.com/

参考资料：https://learn.jquery.com/about-jquery/、https://www.runoob.com/jquery/jquery-tutorial.html

二、概述

2.1 介绍

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它可以在多个浏览器上通过使用API来遍历HTML 文档、事件处理、动画和 Ajax 等

2.2 安装

下载链接：https://jquery.com/download/，选择适宜的版本进入页面后，右键保存为文件，然后将下载好的文件放在网页的同一目录下，就可以开始使用JQuery了

除此之外，也可以使用CDN来使用JQuery，例如使用百度的CDN：

<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

三、语法

3.1 文档就绪

在DOM加载完成后才开始对DOM进行操作，基本格式为：

$(document).ready(function(){// JQuery代码
});// 也可以这么写
$(function(){// JQuery代码
});

举个栗子：当刷新网页时，会触发警告框

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( document ).ready(function() {alert( "document loaded" );});</script></head><body><p>Hello world!</p></body>
</html>

也可以写成下面形式，效果都是一样的

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {alert( "window loaded" );});</script></head><body><p>Hello world!</p></body>
</html>

3.2 选择器

JQuery通过选取HTML元素来对其进行操作；语法：$(selector).action()

selector：选择器，结合XPath语法和CSS选择器语法
action()：对元素的操作

四、事件

4.1 概述

常见DOM事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

事件对象的关键属性和方法：

4.2 事件绑定/解绑

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰绑定事件▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

on方法用来绑定一个或多个事件处理函数，格式为on(events[,selector][,data],handler)

events：事件

selector：选择器，用于筛选触发事件的选定元素后代

data：数据，触发事件时用来传递给处理程序

handler：处理器，触发事件时要执行的函数

// 单个事件
$("button").on("click", function() {console.log("按钮被点击");
});// 多个事件（共用处理函数）
$("input").on("focus blur", function(e) {console.log(e.type); // 输出 'focus' 或 'blur'
});// 多个事件和多个处理
$( "div" ).on({mouseenter: function() {console.log( "hovered over a div" );},mouseleave: function() {console.log( "mouse left a div" );},click: function() {console.log( "clicked on a div" );}
});// 将数据传递给处理程序
$( "button" ).on( "click", {name: "Karl"
}, function greet( event ) {alert( "Hello " + event.data.name );
} );

除此之外，也可以使用快捷方法：

方法	描述
`click()`	按钮点击时触发事件
`dblclick()`	双击元素时触发事件
`mouseenter()`	鼠标穿过元素时触发事件
`mouseleave()`	鼠标离开元素时触发事件
`mousedown()`	鼠标移动到元素上方，并按下按键时触发事件
`mouseup()`	在元素上方松开鼠标按钮时触发事件
`hover()`	悬停在元素上方时触发事件
`focus()`	元素获得焦点触发事件
`blur()`	元素失去焦点触发事件

click方法：按钮点击时会触发事件

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "#btn" ).click(function() {alert( "按钮被点击了！" );})});</script></head><body><p>Hello world!</p><button class="btn" id="btn">Click me!</button></body>
</html>

dblclick方法：双击元素时，会触发事件

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "p" ).dblclick(function() {alert( "文本被双击了！" );})$( "#btn" ).click(function() {alert( "按钮被单击了！" );})});</script></head><body><p>Hello world!</p><button class="btn" id="btn">Click me!</button></body>
</html>

mouseenter方法：鼠标穿过元素时，会触发事件

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "p" ).mouseenter(function() {alert( "文本被穿过了！" );})});</script></head><body><p>Hello world!</p></body>
</html>

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰事件解绑▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

通过使用off方法来移除通过on方法绑定的事件

// 移除所有事件
$("button").off();// 移除特定类型事件
$("input").off("focus");// 移除委托事件
$("#container").off("click", ".dynamic-item");

4.3 一次性事件

one方法只执行一次后就会自动解绑：

// 单个事件
$("button").one("click", function() {alert("仅显示一次");
});// 多个事件
$("input").one("focus blur", function(e) {console.log(e.type); 
});

4.4 事件委托

事件委托利用事件冒泡，将子元素的事件处理程序绑定到父元素上，这样可以通过父元素统一管理子元素的事件处理程序。

在父元素上监听子元素事件，格式为父元素.on(事件,子选择器,处理函数)

$( "#list" ).on( "click", "a", function( event ) {event.preventDefault();console.log( $( this ).text() );
});

事件委托与直接绑定的区别：

4.5 自定义事件

trigger方法可以手动触发元素上的事件，包括自定义事件，语法为trigger(eventType[,extraParameters])或者trigger(event[,extraParameters])

eventType：事件类型

extraParameters：传递给事件处理程序的其他参数

<html lang="en">
<head><meta charset="utf-8"><style>button {margin: 10px;}div {color: blue;font-weight: bold;}span {color: red;}</style><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body><button>Button #1</button><button>Button #2</button><div><span>0</span> button #1 clicks.</div><div><span>0</span> button #2 clicks.</div><script>$( "button" ).first().on( "click", function() {update( $( "span" ).first() );} );$( "button" ).last().on( "click", function() {$( "button" ).first().trigger( "click" );update( $( "span" ).last() );} );function update( j ) {var n = parseInt( j.text(), 10 );j.text( n + 1 );}</script>
</body>
</html>

在这里插入图片描述

五、效果

5.1 隐藏/显示

通过hide(speed,callback)方法来隐藏HTML元素，show(speed,callback)方法来显示HTML元素

speed：隐藏/显示的速度，可取slow、fast或者毫秒数

callback：隐藏/显示完成后所执行的函数

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "button.hide" ).click(function() {$( "p" ).hide();});$( "button.show" ).click(function() {$( "p" ).show();});});</script></head><body><p >Hello world!</p><button class="hide">Hide</button><button class="show">Show</button></body>
</html>

在这里插入图片描述

使用speed参数来看一下效果：

speed参数	效果
`speed=1000`

`speed="fast"`

`speed="slow"`

除此之外，也可以使用toggle(speed,callback)方法来切换hide()和show()方法：

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "button.hide" ).click(function() {$( "p" ).hide(speed="slow");});$( "button.show" ).click(function() {$( "p" ).show(speed="slow");});$( "button.toggle" ).click(function() {$( "p" ).toggle(speed="slow"); })});</script></head><body><p >Hello world!</p><button class="hide">Hide</button><button class="show">Show</button><button class="toggle">Toggle</button></body>
</html>

在这里插入图片描述

5.2 淡入淡出

fadeIn(speed,callback)方法来实现淡入已隐藏的元素

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "button.hide" ).click(function() {$( "p" ).hide(speed="slow");});$( "button.FadeIn" ).click(function() {$( "p" ).fadeIn(speed="slow");});});</script></head><body><p >Hello world!</p><button class="FadeIn">FadeIn</button><button class="hide">Hide</button></body>
</html>

在这里插入图片描述

fadeOut(speed,callback)用于淡出可见元素

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "button.FadeOut" ).click(function() {$( "p" ).fadeOut(speed="slow");});});</script></head><body><p >Hello world!</p><button class="FadeOut">FadeOut</button></body>
</html>

在这里插入图片描述

fadeToggle(speed,callback)方法可以在fadeIn方法和fadeOut方法切换

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "button.FadeToggle" ).click(function() {$( "p" ).fadeToggle(speed="slow");});});</script></head><body><p >Hello world!</p><button class="FadeToggle">FadeToggle</button></body>
</html>

在这里插入图片描述

fadeTo(speed,opacity,callback)允许渐变为给定的不透明度

opacity：将淡入淡出效果设置为给定的不透明度，值介于0到1之间

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeTo("slow",0.15);$("#div2").fadeTo("slow",0.4);$("#div3").fadeTo("slow",0.7);});});</script></head><body><button>点我让颜色变淡</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body>
</html>

在这里插入图片描述

5.3 滑动

slideDown(speed,callback)用于向下滑动元素

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".SlideDown").click(function(){$("#div1").slideDown(1000);});$("#div1").hide(); // 初始隐藏div1});</script></head><body><button class ="SlideDown">点击这里，向下滑动图片</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在这里插入图片描述

slideUp(speed,callback)向上滑动元素

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".SlideUp").click(function(){$("#div1").slideUp(1000);});});</script></head><body><button class ="SlideUp">点击这里，向上滑动图片</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在这里插入图片描述

slideToggle(speed,callback)可以在slideDown方法和slideUp方法之间进行切换

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".SlideToggle").click(function(){$("#div1").slideToggle(1000);});});</script></head><body><button class ="SlideToggle">点击这里，滑动图片</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在这里插入图片描述

5.4 动画

animate({params},speed,callback)用于创建自定义动画

{params}：定义形成动画的CSS属性，属性名使用Camel标记法，例如使用paddingLeft而不是padding-left，同时颜色动画需要从官网下载。

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".animate").click(function(){$("#div1").animate({width:'100px'}, 1000);});});</script></head><body><button class ="animate">动画实现</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在这里插入图片描述

{params}也可以使用相对值（相对于元素的当前值），有+=或者-=

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".animate").click(function(){$("#div1").animate({width:'+=100px'}, 1000, function(){// 动画完成时的回调函数$("#div1").animate({width:'300px'}, 1000);});});});</script></head><body><button class ="animate">动画实现</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在这里插入图片描述

{params}也可以使用预定义的值，有show、hide、toggle

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".animate").click(function(){$("#div1").animate({height:'toggle'}, 1000);});});</script></head><body><button class ="animate">动画实现</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在这里插入图片描述

animate方法可以使用队列功能，对同一个元素可以应用多个动画，按顺序执行

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".animate").click(function(){$("#div1").animate({height:'toggle'}, 1000);$("#div1").animate({width:'toggle'}, 1000);$("#div1").animate({opacity:'0.4'}, 1000);});});</script></head><body><button class ="animate">动画实现</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在这里插入图片描述

停止动画：stop(stopAll,goToEnd)

stopAll：是否应该清除动画队列，默认为False，仅停止当前活动的动画，接着执行队列中下一个动画。

goToEnd：是否立即完成当前动画，默认为False

参数	效果
`stop(true,true)`

`stop(true,false)`

`stop(false,true)`

`stop(false,false)`

六、链

允许在一条语句里对同一个元素运行多个jQuery方法

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

七、HTML

7.1 内容/属性

text([text])方法用来设置或返回所选元素的文本内容

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".set").click(function(){$("#div1 p").text("<b>hello world</b>");});$(".show").click(function(){alert($("#div1 p").text());})});</script></head><body><div id="div1"><p>hello</p></div><div id="div2"><p>world</p></div><button class="set">set text</button><button class="show">show text</button></body>
</html>

在这里插入图片描述

html([htmlString])方法不适用于XML文档，可以设置或返回所选元素的内容，包括HTML标签

在这里插入图片描述

val([value])方法主要用于获取和设置表单元素

在这里插入图片描述

获取属性： attr()方法，相比于prop方法他可以获取自定义属性

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".show").click(function(){alert($("#link1").attr("href"));})$(".set").click(function(){$("#link1").attr("href","http://www.sina.com.cn");alert($("#link1").attr("href")); })});</script></head><body><div id="div1"><a href="http://www.baidu.com" id="link1">hello</a></div><button class="show">show href</button><button class="set">set href</button></body>
</html>

在这里插入图片描述

7.2 元素操作

方法一览	描述
`append(content[,content])`	在被选元素的结尾插入内容
`prepend(content[,content])`	在被选元素的开头插入内容
`after(content[,content])`	在被选元素之后插入内容
`before(content[,content])`	在被选元素之前插入内容
`remove([selector])`	删除被选元素及其子元素
`selector`	可以过滤被删除的元素
`empty`	从被选元素中删除子元素

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰增加元素▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

append、prepend、before、after方法的用法都相似，只不过插入的位置不同

以append方法举例，append方法将指定内容作为每个元素的最后一个子元素插入

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".set").click(function(){$(".inner").append("<p>world</p>");})});</script></head><body><h2>Greetings</h2><div class="container"><div class="inner">Hello</div><div class="inner">Goodbye</div></div><button class="set">set</button></body>
</html>

在这里插入图片描述

除此之外append方法也会将HTML属性附加到段落上：

<html><head><meta charset="utf-8"><style>.inner{background-color: yellow;}</style></style><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".set").click(function(){$(".inner").append("<p>world</p>");})});</script></head><body><h2>Greetings</h2><div class="container"><div class="inner">Hello world</div></div><button class="set">set</button></body>
</html>

在这里插入图片描述

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰删除元素▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

empty方法和remove方法的区别：

remove方法将删除与元素关联的所有绑定事件和jQuery数据

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").remove();});});</script></head><body><div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">这是 div 中的一些文本。<p>这是在 div 中的一个段落。</p><p>这是在 div 中的另外一个段落。</p></div><br><button>清空div元素</button></body>
</html>

在这里插入图片描述

可以将选择器作为可选参数包含在内，效果都是一样的：

<script>$(document).ready(function(){$("button").click(function(){$("div").remove("div#div1");});});
</script>

而empty方法会移除目标元素所有子节点，但不会删除目标元素本身和它绑定的数据或事件

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").empty();});});</script></head><body><div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">这是 div 中的一些文本。<p>这是在 div 中的一个段落。</p><p>这是在 div 中的另外一个段落。</p></div><br><button>清空div元素</button></body>
</html>

在这里插入图片描述

7.3 类属性

方法一览	描述
`addClass(className)`	向被选元素添加一个或多个类
`removeClass(className)`	从被选元素删除一个或多个类
`toggleClass(className)`	对被选元素进行添加/删除类的切换操作

介绍一下addClass、removeClass、toggleClass的使用：

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$(".add").click(function(){$("h1,h2,p").addClass("b");$("div").addClass("a");});$(".remove").click(function(){$("h1,h2,p").removeClass("b");$("div").removeClass("a");});$(".toggle").click(function(){$("h1,h2,p").toggleClass("b");$("div").toggleClass("a");})});</script><style type="text/css">.a{font-weight:bold;font-size:xx-large;}.b{color:palevioletred;}</style></head><body><h1>标题 1</h1><h2>标题 2</h2><p>这是一个段落。</p><p>这是另外一个段落。</p><div>这是一些重要的文本!</div><br><button class="add">添加 class</button><button class="remove">移除 class</button><button class="toggle">切换 class</button></body>
</html>

在这里插入图片描述

7.4 样式属性

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰css样式▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

css方法可以返回或者设置元素的一个或多个样式

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$(".set").click(function(){$("div").css("color","yellow");});$(".show").click(function(){alert($("div").css("color"));})});</script><style type="text/css">.a{font-weight:bold;font-size:xx-large;color: blueviolet;}.b{color:palevioletred;}</style></head><body><h1 class="b">标题 1</h1><div class="a">这是一些重要的文本!</div><br><button class="set">设置颜色</button><button class="show">展示颜色</button></body>
</html>

在这里插入图片描述

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰尺寸▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

jQuery尺寸大致布局：

方法一览	描述
`width(width)`	设置或返回元素的宽度，不包括内边距、边框或外边距
`height(height)`	设置或返回元素的高度，不包括内边距、边框或外边距
`innerWidth`	返回元素上的宽度，包括内边距
`innerHeight`	返回元素上的高度，包括内边距
`outerWidth`	返回元素上的宽度，包括内边距和边框
`outerHeight`	返回元素上的高度，包括内边距和边框

width和height的参数值可以设置为数字、父元素宽度的比例、回调函数。

$("#element").width(200);        // 设置为 200px
$("#element").width("50%");       // 设置为父元素宽度的 50%
$("#element").width(function(index, currentWidth) {return currentWidth + 10;       // 动态调整宽度
});

除此之外，还可以获取窗口与文档的尺寸

窗口尺寸：$(window).width()、$(window).height()
文档尺寸：$(document).width()、$(document).height()

总结一下：

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰坐标▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

offset和position方法的区别：

offset获取第一个匹配元素的当前坐标或者设置匹配元素相对于文档的坐标

获取元素位置时，他会返回包含top和left属性的对象

const position = $("#myElement").offset();
console.log("Top:", position.top, "Left:", position.left);
// 输出结果：Top: 200, Left: 300

设置元素位置时，格式为offset({top:value,left:value})

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$(".set").click(function(){$("div").offset({top: 20,left: 50})
});});</script><style type="text/css">.a{font-weight:bold;font-size:xx-large;color: blueviolet;}</style></head><body><div class="a">这是一些重要的文本!</div><br><button class="set">设置位置</button></body>
</html>

在这里插入图片描述

7.5 遍历dom

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰遍历祖先▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$(".show-parent").click(function(){$(".child").parent().css("background-color","rgb(255, 0, 0)");});$(".show-parents").click(function(){$(".child").parents().css("background-color","rgb(3, 255, 0)");}); $(".show-parentuntil").click(function(){$(".child").parentsUntil(".a").css("background-color","#67cdf8");});});  </script><style>.a{width: 500px;height: 500px;background-color: rgb(163, 221, 246);}.parent{width: 200px;height: 200px;background-color: rgb(242, 133, 133);}.parents{width: 300px;height: 300px;background-color: rgb(140, 218, 140); }.child{width: 100px;height: 100px;background-color: rgb(156, 156, 241);}</style></head><body><div class="a"><div class ="parents"><div class="parent"><span class="child">haha</span><p></p></div></div></div><button class="show-parent">展示parent</button><button class="show-parents">展示parents</button><button class="show-parentuntil">展示parentuntil</button></body>
</html>

在这里插入图片描述

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰遍历后代▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰遍历同胞▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$(".menu-header").click(function(){$(this).next(".menu-content").slideToggle();$(this).toggleClass("active");});  });</script><style>.menu {width: 250px;font-family: Arial, sans-serif;}.menu-title {padding: 10px;background-color: #2c3e50;color: white;font-weight: bold;margin-top: 5px;}.menu-header {padding: 8px 10px;background-color: #3498db;color: white;cursor: pointer;position: relative;}.menu-header:after {content: "+";position: absolute;right: 10px;}.menu-header.active:after {content: "-";}.menu-content {display: none;padding: 5px 0;background-color: #f9f9f9;}.sub-item {padding: 6px 15px;color: #333;}.sub-item:hover {background-color: #e0e0e0;}</style></head><body><div class="menu"><div class="menu-title">主菜单</div><div class="menu-item"><div class="menu-header">菜单项1</div><div class="menu-content"><div class="sub-item">子项1-1</div><div class="sub-item">子项1-2</div></div></div><div class="menu-item"><div class="menu-header">菜单项2</div><div class="menu-content"><div class="sub-item">子项2-1</div><div class="sub-item">子项2-2</div><div class="sub-item">子项2-3</div></div></div><div class="menu-title">其他菜单</div><div class="menu-item"><div class="menu-header">菜单项3</div><div class="menu-content"><div class="sub-item">子项3-1</div></div></div></div></body>
</html>

在这里插入图片描述

7.6 过滤元素

JQuery初步学习

文章目录一、前言二、概述2.1 介绍2.2 安装三、语法3.1 文档就绪3.2 选择器四、事件4.1 概述4.2 事件绑定/解绑4.3 一次性事件4.4 事件委托4.5 自定义事件五、效果5.1 隐藏/显示5.2 淡入淡出5.3 滑动5.4 动画六、链七、HTML7.1 内容/属性7.2 元素操作7.3 类属性7.4 样式属…...

编程日记 2026/1/16 5:41:01

repo仓库文件清理

1. repo 仓库内文件清理 # 清理所有Git仓库中的项目 repo forall -c git clean -dfx # 重置所有Git 仓库中的项目 repo forall -c git reset --hard 解释： repo forall -c git clean -dfx： repo forall 是一个用于在所有项目中执行命令的工具。-c 后…...

编程日记 2025/10/25 21:10:15

使用Docker部署Java项目的完整指南

前言 Docker是一个轻量级的容器化平台，可将应用及其依赖打包成标准化单元，实现快速部署和环境隔离。本文以Spring Boot项目为例，演示如何通过Dockerfile部署Java应用。准备工作本地环境安装Docker Desktop（官网下载&#xff0…...

编程日记 2025/9/13 7:34:59

基于 Spring Boot 瑞吉外卖系统开发（三）

基于 Spring Boot 瑞吉外卖系统开发（三） 分类列表静态页面实现功能所需要的接口定义Mapper接口 Mapper public interface CategoryMapper extends BaseMapper<Category> {}定义Service接口 public interface CategoryService extends ISe…...

编程日记 2026/1/16 5:50:36

TCP,UDP协议和域名地址

1.TCP（传输控制协议）是面向连接，UDP（用户数据报协议）是无连接的 2.应用层：FTP,HTTP,SMTP,TELNET,DNS,TFTP 传输层;TCP,UDP 网际层：IP,ICMP,ARP,RARP 3.TCP21:20端口数据传输；21端…...

编程日记 2025/9/1 15:20:17

winserver2022备份

安装备份，然后等待安装完成即可然后可以在这里看到安装好的win server2022备份一直下一步然后到这里不要用本地文件夹备份备份到远程服务器，远程服务器路径然后确定备份即可如何恢复呢？ 点击右侧的恢复就可以了打开任务计划程序这…...

编程日记 2026/1/15 23:53:47

GAT-GRAPH ATTENTION NETWORKS（论文笔记）

CCF等级：A 发布时间：2018年代码位置 25年4月21日交目录一、简介二、原理 1.注意力系数 2.归一化 3.特征组合与非线性变换 4.多头注意力 4.1特征拼接操作 4.2平均池化操作三、实验性能四、结论和未来工作一、简介图注意力网络&…...

编程日记 2026/1/16 5:37:31

SpringBoot和微服务学习记录Day1

分布式架构为了解决大量的用户请求，需要多台服务器，为处理某些请求将一些服务器划分为一个集群，通过一种技术来处理集群的请求典型应用： nginx：Tomcat集群 Redis：哨兵模式 MySQL：mycat 微…...

编程日记 2025/11/6 2:53:49

PDFBox/Itext5渲染生成pdf文档

目录 PDFBox最终效果实现代码 Itext5最终效果实现代码 PDFBox 使用PDFBox可以渲染生成pdf文档，并且自定义程度高，只是比较麻烦，pdf的内容位置都需要手动设置x（横向）和y（纵向）绝对位置&#xff…...

编程日记 2026/1/19 21:09:41

前端获取不到后端新加的字段解决方案 sql 返回的是 FileInfo 对象 private String lastUpdateTimeStr;// 自定义 setLastUpdateTime 方法，确保在设置 lastUpdateTime 时自动格式化为字符串public void setLastUpdateTime(LocalDateTime lastUpdateTime) {this.las…...

编程日记 2025/11/15 13:00:12

【Java学习】AI时代下如何学习Java语言开发

学习 Java 语言开发时，合理借助 AI 工具可以提升效率、深化理解，以下是具体的学习策略和方法： 一、利用 AI 辅助基础学习 1. 智能文档解读与语法解析工具：ChatGPT、Bing Chat、Google Bard用法： 直接提问基础语法问…...

编程日记 2025/11/18 20:22:42

联想拯救者Y9000K重装Ubuntu系统

USB刻录Ubuntu，并插入电脑。进入官网https://rufus.ie/downloads/，安装4.0p版本，对应Ubuntu 22.04版本进入官网https://www.releases.ubuntu.com/22.04/，下载Ubuntu 22.04的iso文件插入一个空USB。运行rufus.exe，选择…...

编程日记 2026/1/10 5:33:46

罗技K860键盘

罗技蓝牙键盘的顶部功能键F1-F12的原本功能单击罗技键盘的功能键时，默认响应的是键盘上面显示的快进、调节音量等功能。改变回F1~F12原本功能，同时按下 fn和esc组合键...

编程日记 2026/1/29 9:25:42

PyTorch Tensor维度变换实战：view/squeeze/expand/repeat全解析

本文从图像数据处理、模型输入适配等实际场景出发，系统讲解PyTorch中view、squeeze、expand和repeat四大维度变换方法。通过代码演示对比不同方法的适用性，助您掌握数据维度调整的核心技巧。一、基础维度操作方法 1. view：内存连续的形状重…...

编程日记 2026/1/15 23:59:35

【NLP 面经 9、逐层分解Transformer】

目录一、Transformer 整体结构 1.Tranformer的整体结构 2.Transformer的工作流程二、Transformer的输入 1.单词 Embedding 2.位置 Embedding 计算公式： 三、Self-Attention 自注意力机制 1.Self-Attention 结构编辑 2.Q、K、V的计算代码实现 3.Self-Attenti…...

编程日记 2026/1/16 0:04:16

【线程有哪些状态？这些状态如何相互转换？阻塞和等待的状态有什么区别？】

线程状态及其转换与区别线程的生命周期包含多个状态，不同状态之间的转换由线程调度和同步机制决定。以下是线程状态的详细说明、转换关系及阻塞与等待的区别： 一、线程的六种基本状态（以Java为例） 状态描述NEW（新建…...

编程日记 2025/9/1 13:49:54

netty中的ChannelPipeline详解

Netty中的ChannelPipeline是事件处理链的核心组件，负责将多个ChannelHandler组织成有序的责任链，实现网络事件（如数据读写、连接状态变化）的动态编排和传播。以下从核心机制、执行逻辑到应用场景进行详细解析： 1. 核心结构与组成双向链表结构组成单元：ChannelPipeline…...

编程日记 2025/9/1 9:47:59

Ubuntu 24.04 中文输入法安装

搜狗输入法，在Ubuntu 24.04上使用失败，安装教程如下 https://shurufa.sogou.com/linux/guide 出现问题的情况，是这个帖子里描述的： https://forum.ubuntu.org.cn/viewtopic.php?t493893 后面通过google拼音输入法解决了&#x…...

编程日记 2025/8/31 18:46:03

踩雷，前端一直卡在获取token中

问题：一直卡在var token SecureStorage.Default.GetAsync("auth_token").Result; public VideoService(){_httpClient new HttpClient();var token SecureStorage.Default.GetAsync("auth_token");} 这是一个典型的同步等待异步操作导致的死…...

编程日记 2025/8/31 15:03:44

这是一个文章标题

# Markdown 全语法示例手册本文档将全面演示 Markdown 的语法元素，包含 **标题**、**列表**、**代码块**、**表格**、**数学公式** 等 18 种核心功能。所有示例均附带实际应用场景说明。---## 一、基础文本格式### 1.1 标题层级 markdown # H1 (使用 #) ## H2 (使用…...

编程日记 2026/1/15 23:44:53

xtrabackup备份

安装： https://downloads.percona.com/downloads/Percona-XtraBackup-8.0/Percona-XtraBackup-8.0.35-30/binary/tarball/percona-xtrabackup-8.0.35-30-Linux-x86_64.glibc2.17.tar.gz?_gl1*1ud2oby*_gcl_au*MTMyODM4NTk1NS4xNzM3MjUwNjQ2https://downloads.perc…...

编程日记 2026/1/22 9:22:49

（51单片机）串口通讯（串口通讯教程）（串口接收发送教程）

前言： 今天有两个项目，分别为： 串口接收: 串口发送： 如上图将文件放在Keli5 中即可，然后烧录在单片机中就行了烧录软件用的是STC-ISP，不知道怎么安装的可以去看江科大的视频： 【51单片机入门…...

编程日记 2026/1/19 5:23:25

redis 延迟双删

Redis延迟双删是一种用于解决缓存与数据库数据一致性问题的策略，通常在高并发场景下使用。以下是其核心内容： 1. 问题背景当更新数据库时，如果未及时删除或更新缓存，可能导致后续读请求仍从缓存中读取旧数据，造成数…...

编程日记 2026/1/19 7:26:56

大语言模型中的幻觉现象深度解析

一、幻觉的定义及出现的原因 1. 基本定义幻觉(Hallucination) 指大语言模型在自然语言处理过程中产生的与客观事实或既定输入相悖的响应，主要表现为信息失准与逻辑矛盾。 2. 幻觉类型与机制 2.1 事实性幻觉定义：生成内容与可验证…...

编程日记 2026/1/19 7:20:07

App的欢迎页，以及启动黑屏的问题

1、在styles.xml文件中配置：<style name"WelcomePageStyle" parent"style/Theme.AppCompat.Light.NoActionBar"><item name"android:windowBackground">mipmap/icon_welcome_bg</item><item name"android:…...

编程日记 2025/9/1 1:18:08

各种颜色空间的相互转换方法（RGB，HSV，CMYK，灰度）

各个颜色空间原始值的取值范围： RGB：[0,255] H：[0,360]，S：[0,1]，V：[0,1] CMYK：[0,1] 灰度：[0,255] 以下给出各个颜色空间转换的伪代码。 RGB转HSV rR/255 gG/255 b…...

编程日记 2026/1/2 8:14:10

详解如何从零用 Python复现类似 GPT-4o 的多模态模型

🧠 向所有学习者致敬！ “学习不是装满一桶水，而是点燃一把火。” —— 叶芝我的博客主页： https://lizheng.blog.csdn.net 🌐 欢迎点击加入AI人工智能社区！ 🚀 让我们一起努力，共创…...

编程日记 2026/1/19 4:39:51

大模型训练关键两步

大模型的核心原理是基于深度学习，通过多层神经网络进行数据建模和特征提取。目前大部分的大模型采用的是Transformer架构，它采用了自注意力机制，能够处理长距离依赖关系，从而更好地捕捉文本的语义和上下文信息。大模型还结合了预训…...

编程日记 2026/1/19 6:18:48

当算力遇上脑科学：破解意识上传的算力密码

目录一、人脑复刻面临的三座大山二、自然科学之外的三大麻烦三、未来发展的三种可能结局没有人的文明还是文明吗？最近，全球首例"数字永生"官司闹得沸沸扬扬——美国富豪家属指控科技公司造假，而马斯克却宣布脑机接口芯片升级到第9代。科学家们算了一…...

编程日记 2026/1/23 1:27:09

前端面试宝典---创建对象的配置

Object.create 对整个对象的多个属性值进行配置创建对象不可更改属性值 // 创建对象不可更改属性值 let obj Object.create({}, {name: {value: lisi,writable: false,},age: {value: 20,writable: true,} })console.log(初始化obj, obj) obj.name wangwu console.log(…...

编程日记 2026/1/20 7:54:58

文章目录

一、前言

二、概述

2.1 介绍

2.2 安装

三、语法

3.1 文档就绪

3.2 选择器

四、事件

4.1 概述

4.2 事件绑定/解绑

4.3 一次性事件

4.4 事件委托

4.5 自定义事件

五、效果

5.1 隐藏/显示

5.2 淡入淡出

5.3 滑动

5.4 动画

六、链

七、HTML

7.1 内容/属性

7.2 元素操作

7.3 类属性

7.4 样式属性

7.5 遍历dom

7.6 过滤元素

相关文章：