JQuery(二)---【使用JQuery对HTML、CSS进行操作】

零.前言

JQuery(一)---【JQuery简介、安装、初步使用、各种事件】-CSDN博客

一.使用JQuery对HTML操作

1.1获取元素内容、属性

使用JQ可以操作元素的“内容

  • text():设置或返回元素的文本内容
  • html():设置或返回元素的内容(包括HTML标记)
  • val():设置货返回表单字段的值

我们来看一个例子,用来区分“text()”和“html()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><p id="sample">这是一个<b>示例</b>文本</p><button id="b1">点我显示p的文本内容(text)</button><button id="b2">点我显示p的内容(html)</button><script>$(document).ready(function(){$("#b1").click(function(){alert("文本内容(text)是:" + $("#sample").text())});$("#b2").click(function(){alert("内容(html)是:" + $("#sample").html())});});</script>
</body>
</html>

效果图:

点击(text)按钮显示:

点击(html)按钮显示:

 结论:“text”返回的只有元素的“文本内容”(除标签以外的普通字符),而“html”会将元素的“所有内容”(不管有没有特殊字符)完整返回

再来看看“val”的使用,“val”常与<input>输入框搭配使用,“val”用来获取输入字段

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><input type="text" id="sample" value="鞠婧祎"><button id="b1">点我获取val的值</button><script>$(document).ready(function(){$("#b1").click(function(){alert("val的值是:" + $("#sample").val());})});</script>
</body>
</html>

效果:

点击后:

1.2获取元素属性

使用“attr()”方法获取属性值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><button id="b1">点我获取我的id</button><script>$(document).ready(function(){$("#b1").click(function(){alert("按钮的id属性值是:" + $("#b1").attr("id"));})});</script>
</body>
</html>

效果:

点击后:

二.使用JQuery改变元素内容

2.1无返回值的改变元素内容

我们仍然使用上面所说的:“text()”、“html()”、“val()”、“attr()”来对应的改变内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><p id="test1">这是一个文本内容</p><p id="test2">这是一个<b>标签内容</b></p><input type="text" id="test3" value="鞠婧祎"><br><br><button id="bt1">改变文本内容</button><button id="bt2">改变标签内容</button><button id="bt3">改变输入框内容</button><button id="bt4">点我改变输入框的属性为“密码”格式</button><script>$(document).ready(function(){$("#bt1").click(function(){$("#test1").text("文本内容被改变了");})$("#bt2").click(function(){$("#test2").html("标签内容被<b>改变了</b>");})$("#bt3").click(function(){$("#test3").val("输入框内容被改变了");})$("#bt4").click(function(){$("#test3").attr("type","password");})});</script>
</body>
</html>

点击前:

点击后:

2.2有返回值的改变元素内容(使用回调函数)

上面四种改变元素的方法,都有回调函数

回调函数由两个参数:

备选元素列表中当前元素的下标,以及原始值

然后以函数新值返回您希望使用的字符串

$("#btn1").click(function(){$("#test1").text(function(i,origText){return "Old text: " + origText + " New text: Hello world!(index: " + i + ")";});
});$("#btn2").click(function(){$("#test2").html(function(i,origText){return "Old html: " + origText + " New html: Hello <b>world!</b>(index: " + i + ")";});
});

其中:“i”是当前元素下标,“origText”是原始(旧)值

具体可参考:jQuery 设置内容和属性 (w3school.com.cn)

三.使用JQuery添加元素

3.1四种添加元素的JQ方法

  • append():在被选元素的结尾插入内容
  • prepend():在被选元素的开头插入内容
  • after():在被选元素之后插入内容
  • before():在备选元素之前插入内容

append()、prepend()方法可以在“<p>、<h1-h6>”等“文本标签”前后添加内容,也可以在“<ol>前后添加“<li>”标签

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){$("#btn1").click(function(){$("p").append(" <b>Appended text</b>.");});$("#btn2").click(function(){$("ol").append("<li>Appended item</li>");});
});
</script>
</head><body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>

效果:

值得注意的是:append()、prepend()方法可以一次接受无限数量的元素并添加。

使用方法:

append/prepend(element1,element2,element3,......)

after()、before()在元素的前面或者后面插入新内容(ps:这里是在整个元素的前面或者后面,与append、pretend元素内容的开头或结尾插入有本质区别,这里相当于插入了新的元素标签)

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("#btn1").click(function(){$("#123").before("<b>Before</b>");});$("#btn2").click(function(){$("#123").after("<i>After</i>");});
});
</script>
</head><body>
<p id="123">6666</p>
<br><br>
<button id="btn1">在前面添加文本</button>
<button id="btn2">在后面添加文本</button>
</body>
</html>

点击前:

点击后:

“after”与“before”同样可以一次接收多个参数来添加多个内容:

after/before(element1,element2,element3,....)

四.使用JQuery删除元素

删除元素和内容,一般可以使用以下两个JQ方法:

  • remove():删除被选元素(及其子元素)
  • empty():从被选元素中删除子元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><div id="div1" style="height: 200px;width: 300px;border: 1px solid black;background-color: yellow;"><p>这是一个段落</p><p>这是另一个段落</p><p>这是最后一个段落</p></div><button id="bt1">点击删除div元素</button><button id="bt2">点击清空div元素</button><script>$(document).ready(function(){$("#bt1").click(function(){$("#div1").remove();})$("#bt2").click(function(){$("#div1").empty();})});</script>
</body>
</html>

点击前:

点击删除div元素后:

点击清空div元素后:

五.使用JQ操作CSS

5.1使用JQ操作CSS类

  • addClass():给被选元素添加一个或多个CSS类
  • removeClass():对被选元素删除一个或多个CSS类
  • toggleClass():对被选元素进行添加/删除类的切换操作

使用方法:

$(element).addClass("class1,class2,class3,....")

$(element).removeClass("class1,class2,class3,....")

element”表示元素,“class”表示类名字

下面我们创建两个CSS类(选择器):

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><style>.n{font-weight: bold;font-size: large;}.color{color: blue;}</style>
</head>
<body><p>这是一个段落</p><h1>这是一个段落</h1><h2>这是一个段落</h2><button id="bt1">点击向p,h1,h2添加"n"类</button><button id="bt2">点击向p,h1,h2添加"color"类</button><script>$(document).ready(function(){$("#bt1").click(function(){$("p,h1,h2").addClass("n");})$("#bt2").click(function(){$("p,h1,h2").addClass("color");})});</script>
</body>
</html>

点击前:

点击后:

5.2使用JQ操作CSS()

css()方法设置或返回元素的一个或多个样式属性:

返回CSS属性”:

css("propertyname");

 "设置CSS属性":

css("propertyname","value");

 “设置多个CSS属性”:

css({"propertyname":"value","propertyname":"value",...});

 例如:

$("p").css({"background-color":"yellow","font-size":"200%"});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/798319.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flask Python Flask-SQLAlchemy中数据库的数据类型、flask中数据可的列约束配置

Flask Python Flask-SQLAlchemy中数据库的数据类型、flask中数据可的列约束配置 SQLAlchemy官方文档地址实战的代码分享数据类型列约束配置自定义方法 SQLAlchemy官方文档地址 SQLAlchemy官方文档地址 实战的代码分享 Flask-SQLAlchemy框架为创建数据库的实例提供了一个基类…

Android Studio学习16——Activity跳转时的参数传递

传递数据——example 传递对象类型的数据——example 传递 接收 回传数据——example

PicGo + Gitee + VsCode - 搭建私人图床

文章目录 前言搭建图床VsCode 安装插件安装 PicGo准备 Gitee 图床测试 尾声 前言 本人是一个重度 vimer&#xff0c;并且喜欢客制化一些东西… Typora 固然好用&#xff0c;但不支持 vim…发现 vscode 中既可以使用 vim&#xff0c;也可以 md&#xff0c;用起来比较舒服.因此…

自动驾驶定位算法:基于多传感器融合的状态估计(muti-Sensors Fusion)

自动驾驶定位算法&#xff1a;基于多传感器融合的状态估计(muti-Sensors Fusion) 附赠自动驾驶学习资料和量产经验&#xff1a;链接 1、传感器(Sensor)选取 自动驾驶系统中用于状态估计(State Estimation)的常用传感器包括GPS/GNSS、IMU、激光雷达(Lidar)。 状态估计(State E…

Android JNI调试总结

1、确保NDK和CMake已经安装 新建能编译APK的工程&#xff0c;工程中添加相关ndk目录 2、添加C模块 添加完成后&#xff0c;工程目录自动更新&#xff0c;build.gradle导入了so编译器 修改build.gradle中添加相关gcc编译器如下 externalNativeBuild { cmake { abiFilters a…

python学习25:python中的元组(tuple)

python中的元组(tuple) 1.什么是元组&#xff1f; 元组也是容器数据类型的一种&#xff0c;同列表几乎是一样的&#xff0c;都是可以在里面封装多个&#xff0c;不同类型的元素在内&#xff1b;与列表最大的不同就是&#xff1a; 元组一旦被定义&#xff0c;就不能修改 2.元组…

头盔检测 | 基于Caffe-SSD目标检测算法实现的建筑工地头盔检测

项目应用场景 面向建筑工地头盔检测场景&#xff0c;使用深度学习 Caffe SSD 目标检测算法&#xff0c;基于 C 实现。 项目效果 项目细节 > 具体参见项目 README.md (1) 安装 Caffe SSD(2) 执行训练 sh examples/Hardhat/SSD300/train_SSD300.sh (3) 部署算法 项目获取 h…

vitepress系列-05-其他优化设置

其他优化设置 设置底部上一页和下一页 设置&#xff1a; import { defineConfig } from vitepress// https://vitepress.dev/reference/site-config export default defineConfig({lang: en-US,title: "东东爱编码的技术博客",description: "记录日常学习点点…

IO流

一、IO概述 1&#xff0e;什么是IO流? 存储和读取数据的解决方案l: inputo: output流∶像水流一样传输数据 2.IO流的作用? 用于读写数据&#xff08;本地文件&#xff0c;网络) 3.IO流按照流向可以分类哪两种流? 输出流:程序 - > 文件 输入流:文件 - > 程…

布隆过滤器详解及java实现

什么是布隆过滤器&#xff1f; 布隆过滤器&#xff08;Bloom Filter&#xff09;是一种数据结构&#xff0c;用于判断一个元素是否属于一个集合。它的特点是高效地判断一个元素是否可能存在于集合中&#xff0c;但是存在一定的误判率。 布隆过滤器的基本原理是使用一个位数组…

测试工程师求职是选自研公司还是选外包公司呢?

大家好&#xff0c; 今天我们一起来聊一聊测试工程师求职是选自研公司&还是选外包公司呢&#xff1f; 今天来谈谈我的个人看法&#xff0c;作为一个在测试岗位上多年的我来说&#xff0c;自研公司比较好&#xff0c;外包公司其实也不会差。各自都有特点特色&#xff0c;根据…

MIT6.828 Lab1 Xv6 and Unix utilities

2023MIT6.828 lab-1 官方地址 一、sleep 实验内容 调用sleep&#xff08;系统调用&#xff09;编写用户级别程序能暂停特定时常的系统滴答程序保存在user/sleep.c 实验过程 xv6的参数传递 查看官方文档提示的文件中&#xff0c;多采用如下定义&#xff1a; int main(in…

Idea打包jar包的多种方式(解决MANIFEST.MF被覆盖的问题)

目录 生成jar文件 方式一&#xff1a;打包成一个总的jar文件 方式二&#xff1a;打包的jar文件和第三方jar文件分开 生成jar文件 打开“文件->项目结构-构建” 点击“”选择“jar->from modules ....” 弹出“从模块创建 jar” 方式一&#xff1a;打包成一个总的jar…

海纳斯删除广告位

找到文件 vim /var/www/html/home.php 删除代码段 <div class"adleft" id"adleftContainer"><button onclick"closeAd()">关闭</button><a href"https://www.ecoo.top/ad.html" target"_blank">&l…

JAVA—抽象—定义抽象类Converter及其子类WeightConverter

同样&#xff0c;我们由这道题引出抽象类&#xff0c;抽象方法这个概念。 按下面要求定义类Converter及其子类WeightConverter 定义抽象类&#xff1a;Converter&#xff1a; 定义一个抽象类Converter&#xff0c;表示换算器&#xff0c;其定义的如下&#xff1a; 一个私有…

海外仓的出入库流程有什么痛点?位像素海外仓系统怎么提高出入库效率?

随着跨境电商的蓬勃发展&#xff0c;海外仓是其中不可或缺的一个关键环节。而货物的出库与入库则是海外仓管理中的一个核心业务流程&#xff0c;它的运作效率直接影响到整个跨境物流的效率和客户体验。今天&#xff0c;让我们具体来看一看关于海外仓出入库的流程&#xff0c;其…

JVM内存性能调优思路之:通过GC log、Thread Dump 、Heap Dump分析内存使用说明

文章目录 一. 各日志概述1. Garbage Collection Log - 找到GC规律2. 线程转储(Thread dump) - 分析&#xff08;快照&#xff09;线程状态3. 堆转储(Heap dump) - APP某刻内存使用全貌 二. 命令1. 程序的gc日志2. 线程转储3. 堆转储 概述 在 Java 虚拟机中&#xff0c;(GC) Gar…

C++ 类和对象(初篇)

类的引入 C语言中&#xff0c;结构体中只能定义变量&#xff0c;在C中&#xff0c;结构体内不仅可以定义变量&#xff0c;也可以定义函数。 而为了区分C和C我们将结构体重新命名成class去定义 类的定义 标准格式&#xff1a; class className {// 类体&#xff1a;由成员函…

【计算机毕业设计】计算机考试系统设计——后附源码

&#x1f389;**欢迎来到我的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 一名来自世界500强的资深程序媛&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于…

华为openEuler-22.03-LTS-SP3配置yum源

先有华为后有天&#xff0c;遥遥领先&#xff01; 1 确定使用的OS版本 # cat /etc/os-release NAME"openEuler" VERSION"22.03 (LTS-SP3)" ID"openEuler" VERSION_ID"22.03" PRETTY_NAME"openEuler 22.03 (LTS-SP3)" ANSI…