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

jQuery知识点二

news 2025/12/17 16:35:42

一、 jQuery 属性操作
1. 元素固有属性值 prop()
获取属性：prop("属性")
设置属性：prop（"属性"，"属性值"）
​所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。
注意： prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。
2 .元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
获取属性：attr("属性") 类似原生getAttribute()
设置属性：attr（"属性"，"属性值"）类似原生setAttribute()
​注意： attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）
3 .数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
附加数据语法：data("name","value") //向被选元素附加数据
获取数据语法：data("name") //向被选元素获取数据
注意： 同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

<body><a href="http://www.itcast.cn" title="会越来越好的">会越来越好的</a><input type="checkbox" name="" id="" checked><div index="1" data-index="2">我是div</div><span>123</span><script>$(function() {//1. element.prop("属性名") 获取元素固有的属性值console.log($("a").prop("href"));$("a").prop("title", "我会越来越好的");$("input").change(function() {console.log($(this).prop("checked"));});// console.log($("div").prop("index"));// 2. 元素的自定义属性 我们通过 attr()console.log($("div").attr("index"));$("div").attr("index", 3);console.log($("div").attr("data-index"));// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面$("span").data("uname", "andy");console.log($("span").data("uname"));// 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型 3console.log($("div").data("index"));})</script>
</body>

二、jQuery 文本属性值
常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。
1.普通元素内容html()（相当于原生innerHTML）
html() //获取元素的内容
html("内容") //设置元素的内容
2.普通元素文本内容text()（相当与原生innerText）
text() //获取元素的文本内容
text("文本内容") //设置元素的文本内容
3.表单的值val() （相当于原生value）
val() //获取表单的值
val("内容") //设置表单的值
​注意： html() 可识别标签，text() 不识别标签。

<body><div><span>我是内容</span></div><input type="text" value="请输入内容"><script>// 1. 获取设置元素内容 html()console.log($("div").html());// $("div").html("123");// 2. 获取设置元素文本内容 text()console.log($("div").text());$("div").text("123");// 3. 获取设置表单值 val()console.log($("input").val());$("input").val("123");</script>
</body>

三、 jQuery 元素操作
​jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。
1. 遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。$("div").each(function(index,domEle) {xxx;})
参数：
①each()方法遍历匹配的每一个元素，主要用DOM处理。each每一个
②里面的回调函数有2个参数：index是每一个元素的索引号；domEle是每个DOM元素对象，不是jquery对象
③所以要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)
​注意： 此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。
$.each(object,function(index,element) {xxx;})
①$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
②里面的函数有2个参数：index是每个元素的索引号；element遍历内容
​注意： 此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

<body><div>1</div><div>2</div><div>3</div><script>$(function() {// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）var sum = 0;var arr = ["red", "green", "blue"];// 1. each() 方法遍历元素 $("div").each(function(i, domEle) {// 回调函数第一个参数一定是索引号  可以自己指定索引号号名称// console.log(i);// 回调函数第二个参数一定是 dom 元素对象，也是自己命名// console.log(domEle);  // 使用jQuery方法需要转换 $(domEle)$(domEle).css("color", arr[i]);sum += parseInt($(domEle).text());})console.log(sum);// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据// $.each($("div"), function(i, ele) {//     console.log(i);//     console.log(ele);// });// $.each(arr, function(i, ele) {//     console.log(i);//     console.log(ele);// })$.each({name: "andy",age: 18}, function(i, ele) {console.log(i); // 输出的是 name age 属性名console.log(ele); // 输出的是 andy  18 属性值})})</script>
</body>

2. 创建、添加、删除
jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：
（1）创建：$("<li></li>"); //动态的创建了一个<li>
（2）内部添加：element.append(“内容”) //把内容放入匹配元素内部最后面，类似于原生appendChild
element.prepend(“内容”) //把内容放入匹配元素内部最前面
（3）外部添加：element.after(“内容”) //把内容放入目标元素后面
element.before(“内容”) //把内容放入目标元素前面
注意：内部添加元素，生成之后，它们是父子关系
外部添加元素，生成之后，它们是兄弟关系
（4）删除元素：element.remove()//删除匹配的元素（本身）
element.empty()//删除匹配的元素集合中所有的子节点
element.html("")//清空匹配的元素内容
remove删除元素本身，empty()和html(“”)都可以删除元素里面的内容，只不过html还可以设置内容。
​注意：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。

<body><ul><li>原先的li</li></ul><div class="test">我是原先的div</div><script>$(function() {// 1. 创建元素var li = $("<li>我是后来创建的li</li>");// 2. 添加元素// 	2.1 内部添加// $("ul").append(li);  内部添加并且放到内容的最后面 $("ul").prepend(li); // 内部添加并且放到内容的最前面//  2.2 外部添加var div = $("<div>我是后妈生的</div>");// $(".test").after(div);$(".test").before(div);// 3. 删除元素// $("ul").remove(); 可以删除匹配的元素 自杀// $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子})</script>
</body>

3.jQuery 尺寸、位置操作： jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。
（1） jQuery 尺寸操作：jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。

语法用法
width() / height()取得匹配元素宽度和高度值 只算width / height
innerWidth() / innerHeight()取得匹配元素宽度和高度值 包含padding
outerWidth() / outerHeight()取得匹配元素宽度和高度值 包含padding、border
outerWidth(true) / outerHeight(true)取得匹配元素宽度和高度值 包含padding、border、margin
以上参数为空，则是获取相应值，返回的是数字型，如果参数为数字，则是修改相应值。参数可以不必写单位。
<body><div></div><script>$(function() {// 1. width() / height() 获取设置元素 width和height大小 console.log($("div").width());// $("div").width(300);// 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 console.log($("div").innerWidth());// 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 console.log($("div").outerWidth());// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + marginconsole.log($("div").outerWidth(true));})</script>
</body>

注意： 有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

（2） jQuery 位置操作： offset()、position()、scrollTop()/scrollLeft() ， 具体介绍如下：
offset()设置或获取元素偏移： offset()方法设置或返回被选元素相对文档的偏移坐标，跟父级没有关系。该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。可以设置元素的偏移：offset({top:10,left:30});
position()获取元素偏移： position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。该方法有2个属性left、top。 position().top用于获取距离定位父级顶部的距离， position().left用于获取距离定位父级左侧的距离。该方法只能获取。
scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧： scrollTop()方法设置或返回被选元素被卷去的头部。不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

<body><div class="father"><div class="son"></div></div><div class="back">返回顶部</div><div class="container"></div><script>$(function() {// 1. 获取设置距离文档的位置（偏移） offsetconsole.log($(".son").offset());console.log($(".son").offset().top);// $(".son").offset({//     top: 200,//     left: 200// });// 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准// 这个方法只能获取不能设置偏移console.log($(".son").position());// $(".son").position({//     top: 200,//     left: 200// });// 3. 被卷去的头部$(document).scrollTop(100);// 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()// 页面滚动事件var boxTop = $(".container").offset().top;$(window).scroll(function() {// console.log(11);console.log($(document).scrollTop());if ($(document).scrollTop() >= boxTop) {$(".back").fadeIn();} else {$(".back").fadeOut();}});// 返回顶部$(".back").click(function() {// $(document).scrollTop(0);$("body, html").stop().animate({scrollTop: 0});// $(document).stop().animate({//     scrollTop: 0// }); 不能是文档而是 html和body元素做动画})})</script>
</body>

相关文章：

jQuery知识点二

一、 jQuery 属性操作 1. 元素固有属性值 prop() 获取属性&#xff1a;prop("属性") 设置属性&#xff1a;prop&#xff08;"属性"&#xff0c;"属性值"&#xff09; ​所谓元素固有属性就是元素本身自带的属性&#xff0c;比如 <a> 元素里…...

编程日记 2023/5/1 17:31:35

4 月份 火火火火 的开源项目

盘点 4 月份 GitHub 上 Star 攀升最多的开源项目&#xff0c;整个 4 月份最火项目 90% 都是 AI 项目&#xff08;准确的说&#xff0c;最近半年的热榜都是 AI 项目&#xff09; 本期推荐开源项目目录&#xff1a; 1. AI 生成逼真语音 2. 复旦大模型 MOSS&#xff01; 3. 让画中…...

编程日记 2023/5/1 17:26:33

PAT A1011 World Cup Betting

1011 World Cup Betting 分数 20 作者 CHEN, Yue 单位 浙江大学 With the 2010 FIFA World Cup running, football fans the world over were becoming increasingly excited as the best players from the best teams doing battles for the World Cup trophy in South Af…...

编程日记 2023/5/1 17:21:33

Android 拍照以及相册中选择(适配高版本)————上传头像并裁剪(一)

前言 在项目研发中&#xff0c;相信大家都遇到过给用户增加头像照片的需求。 随着手机版本的不断更新&#xff0c;android 8、android 9、android 10、android 12、android 13、鸿蒙系统等等&#xff1b;遇到这个功能需求&#xff0c;大家肯定会想&#xff0c;“这还不好写&…...

编程日记 2023/5/1 17:16:32

带你了解现在的LED显示屏技术

随着LED显示屏技术的空前繁荣&#xff0c;LED显示屏产品备受关注&#xff0c;广泛应用于商业广告、实况播映、交通诱导、舞台演绎等领域&#xff0c;发展至今。你了解十大中国LED显示屏制造商吗&#xff1f; LED显示屏技术已经得到了长足的发展&#xff0c;现在的LED显示屏技术…...

编程日记 2023/5/1 17:11:31

AI模型推理（１）——入门篇

前言 本文主要介绍AI模型推理的相关基础概念&#xff0c;为后续云原生模型推理服务的学习做准备。 初识模型部署 对于深度学习模型来说&#xff0c;模型部署指让训练好的模型在特定环境中运行的过程。相比于常规的软件部署&#xff0c;模型部署会面临更多的难题&#xff1a; …...

编程日记 2023/5/1 17:06:29

MySQL--表的基本查询--0410--15

目录 1. Create 1.1 insert 1.1.2 插入否则更新 1.2 replace 2.Retrieve 2.1 select 2.1.1 全列查询 2.1.2 指定列查询 2.1.3 查询字段为表达式 2.1.4 为查询结果指定名称 2.1.5 去重 2.2 where 2.2.1 > and > and < and < and 2.2.2 in between…...

编程日记 2023/5/1 17:01:27

Scala语言入门以及基本语法

文章目录 前言1.环境搭建1) IDEA中插件下载2) SDK下载配置 2.基本使用1&#xff09;var与val的区别2) .基本数据类型3).字符串的基本用法4) 控制结构1) if else2) for 循环3) while循环 5)类6) 函数 前言 scala在一种简洁的高级语言中结合了面向对象和函数式编程。Scala的静态…...

编程日记 2023/5/1 16:56:25

Linux shell编程 循环语句for continue break

for循环是编程语言中一种循环语句 示例1&#xff1a;循环读取user.txt中的用户名&#xff0c;创建用户。设置密码。 for i in $(cat /opt/user.txt) douseradd $iecho 123456 | passwd --stdin $i done 示例2&#xff1a;循环读取ipaddr文本文件中地址&#xff0c;执行ping命令…...

编程日记 2023/5/1 16:51:23

leetcode 643. 子数组最大平均数 I

题目描述解题思路执行结果 leetcode 643. 子数组最大平均数 I 题目描述 子数组最大平均数 I 给你一个由 n 个元素组成的整数数组 nums 和一个整数 k 。 请你找出平均数最大且 长度为 k 的连续子数组&#xff0c;并输出该最大平均数。 任何误差小于 10-5 的答案都将被视为正确答…...

编程日记 2023/5/1 16:46:21

TDA4VM/VH 芯片硬件 mailbox

请从官网下载 TD4VM 技术参考手册&#xff0c;地址如下&#xff1a; TDA4VM 技术参考手册地址 概述 (Mailbox 的介绍在 TRM 的第7.1章节) Mailbox 使用邮箱中断机制实现了 VM 芯片的核间通信。 Mailbox 是集成在 NAVSS0 域下的一个外设&#xff08;NAVSS0 的说明可以查看&a…...

编程日记 2023/5/1 16:41:20

如何利用Trimble RealWorks三维激光扫描仪进行外业测量和内业处理？

文章目录 0.引言1.Trimble RealWorks介绍2.外业测量3.内业处理 0.引言 笔者所在资源与环境工程学院实验室采购有一台Trimble RealWorks三维激光扫描仪&#xff08;仪器名&#xff1a;Trimble TX8&#xff09;&#xff0c;因项目需要&#xff0c;在学校实验场地进行实地测量训练…...

编程日记 2023/5/1 16:36:19

mysql数据备份

数据备份分类 数据库的备份类型 完全备份&#xff1a;对整个数据库的数据进行备份部分备份&#xff1a;对部分数据进行备份&#xff08;可以是一张表也可以是多张表&#xff09; 增量备份&#xff1a;是以上一次备份为基础来备份变更数据的&#xff0c;节约空间差异备份&#x…...

编程日记 2023/5/1 16:31:18

排队接水--贪心

排队接水 题目描述 有 n n n 个人在一个水龙头前排队接水&#xff0c;假如每个人接水的时间为 T i T_i Ti​&#xff0c;请编程找出这 n n n 个人排队的一种顺序&#xff0c;使得 n n n 个人的平均等待时间最小。 输入格式 第一行为一个整数 n n n。 第二行 n n n 个…...

编程日记 2023/5/1 16:26:16

数字温度传感器-DS18B20

文章目录 一、DS18B20器件图二、DS18B20特点三、DS18B20内部结构内部构成 四、工作时序1.初始化时序2.ReadOneChar2.WriteOneChar 一、DS18B20器件图 DS18B20的管脚排列&#xff1a; GND为电源地&#xff1b;DQ为数字信号输入&#xff0f;输出端&#xff1b;VDD为外接供电电源…...

编程日记 2023/6/1 3:12:02

【算法】【算法杂谈】从M个数中等概率的选出n个数，保证每一个数的选中概率都是n/m（蓄水池算法）

目录 前言问题介绍解决方案代码编写java语言版本c语言版本c语言版本 思考感悟写在最后 前言 当前所有算法都使用测试用例运行过&#xff0c;但是不保证100%的测试用例&#xff0c;如果存在问题务必联系批评指正~ 在此感谢左大神让我对算法有了新的感悟认识&#xff01; 问题介…...

编程日记 2023/5/1 16:16:13

vue3+ts+vite自适应项目——路由、layout布局

系列文章目录 第一章&#xff1a;搭建项目 目录 系列文章目录 前言 一、vue-router 1.安装vue-router 2.引入 2.1 新建页面 2.2 公共样式引入 2.3 layout 布局 2.4路由配置 总结 前言 上一章我们搭建了项目&#xff0c;这一张主要讲路由和layout布局&#xff0c;和…...

编程日记 2023/5/1 16:11:12

数据库之约束、索引和事务

一、约束 约束,顾名思义就是数据库对数据库中的数据所给出的一组检验规则.负责判断元素是否符合数据库要求.其目的就是为了提高效率以及准确性. 1.not null - > 数据元素非空 表示如果插入数据,则当前数据不能为空. //创建一张学生表,其班级id和年级id不为空 create …...

编程日记 2023/5/1 16:06:11

centos --libreoffice使用

您可以按照以下步骤在CentOS上安装LibreOffice&#xff1a; 打开终端并使用root用户登录。 运行以下命令更新系统软件包&#xff1a; yum update安装LibreOffice依赖项&#xff1a; yum install -y libreoffice-headless libreoffice-writer libreoffice-calc libreoffice-…...

编程日记 2023/5/1 16:01:10

Steam-V Rising 私人服务器架设教程

一、安装前的准备 一台服务器 拥有公网IP并且做好了端口映射 二、使用SteamCMD安装服务器 1.下载SteamCMD SteamCMD是Steam专用的命令行式客户端程序&#xff0c;所有的安装方式可以参照&#xff1a;https://developer.valvesoftware.com/wiki/SteamCMD 或者在其他站点自行…...

编程日记 2023/5/1 15:56:08

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2025/12/16 11:08:34

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/12/17 14:07:41

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/12/15 14:15:30

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/12/15 19:17:34

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/12/15 18:01:37

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2025/12/16 0:10:23

消防一体化安全管控平台：构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

编程新知 2025/12/13 14:38:18

Vue 3 + WebSocket 实战：公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

编程新知 2025/12/1 3:22:57

前端工具库lodash与lodash-es区别详解

lodash 和 lodash-es 是同一工具库的两个不同版本&#xff0c;核心功能完全一致&#xff0c;主要区别在于模块化格式和优化方式&#xff0c;适合不同的开发环境。以下是详细对比&#xff1a; 1. 模块化格式 lodash 使用 CommonJS 模块格式&#xff08;require/module.exports&a…...

编程新知 2025/12/16 16:11:02