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

jQuery知识点二

news 2025/7/7 13:39:24

一、 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

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/6/15 12:05:47

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/6/18 0:49:30

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/7/7 6:42:33

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/6/21 0:42:19

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

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

编程新知 2025/7/6 8:24:27

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/7/7 6:52:27

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/7/5 14:11:59

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/6/17 3:05:21

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/6/19 5:57:06

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/6/17 4:17:05