jQuery 网页属性操作

 jQuery提供了一些方法,例如 attr() 、 html() 、 text() 和 val() ,它们充当了HTML文档中内容的获取器和设置器。

jQuery – 获取内容

jQuery提供了 html() 和 text() 方法来提取匹配的HTML元素的内容。以下是这两种方法的语法:

$(selector).html();
$(selector).text();

text() 方法返回内容的纯文本值,而 html() 方法返回带有HTML标签的内容。您需要使用jQuery选择器来选择目标元素。

示例

以下示例演示了如何使用jQuery的text()html()方法获取内容:

<!doctype html>
<html>
<head>
<title>jQuery示例</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>(document).ready(function() {("#text").click(function(){alert(("p").text());});("#html").click(function(){alert($("p").html());});});
</script>
</head>
<body><p>The quick <b>brown fox</b> jumps over the <b>lazy dog</b></p><button id="text">获取文本</button><button id="html">获取HTML</button>
</body>
</html>

jQuery的 val() 方法用于从任何表单字段中获取值。以下是该方法的简单语法。

$(selector).val();

示例

以下是另一个示例,展示如何使用jQuery方法 val() 获取输入字段的值。

<!doctype html>
<html>
<head>
<title>jQuery示例</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>(document).ready(function() {("#b1").click(function(){alert(("#name").val());});("#b2").click(function(){alert($("#class").val());});});
</script>
</head>
<body><p>姓名:<input type="text" id="name" value="Zara Ali"/></p><p>班级:<input type="text" id="class" value="Class 12th"/></p><button id="b1">获取姓名</button><button id="b2">获取班级</button>
</body>
</html>

jQuery – 设置内容

jQuery html() 和 text() 方法可用于设置匹配的HTML元素的内容。在使用这两个方法设置值时,以下是它们的语法:

$(selector).html(值, [函数]);
$(selector).text(值, [函数]);

这里的  是要为元素设置的HTML或文本内容。我们可以为这些方法提供可选的回调函数,当元素的值被设置时调用该函数。

jQuery text() 方法设置纯文本内容的值,而 html() 方法设置带有HTML标签的内容。

示例

以下示例演示如何使用jQuery的 text()

和 html() 方法:

<!doctype html>
<html>
<head>
<title>jQuery示例</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>(document).ready(function() {("#text").click(function(){("p").text("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");});("#html").click(function(){$("p").html("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");});});
</script>
</head>
<body><p>点击任意两个按钮即可查看结果</p><button id="text">设置文本</button><button id="html">设置HTML</button>
</body>
</html>

设置表单字段

jQuery val() 方法还可用于设置任何表单字段的值。以下是当使用该方法设置值时的简单语法。

$(selector).val(val);

这里的 val 是要为输入字段设置的值。我们可以提供一个可选的回调函数,当字段的值被设置时将被调用。

示例

下面是另一个示例,展示如何使用 jQuery 方法 val() 设置字段的值:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>(document).ready(function() {("#b1").click(function(){("#name").val("Zara Ali");});("#b2").click(function(){$("#class").val("Class 12th");});});
</script>
</head>
<body><p>Name: <input type="text" id="name" value=""/></p><p>Class: <input type="text" id="class" value=""/></p><button id="b1">设置姓名</button><button id="b2">设置班级</button>
</body>
</html>

jQuery – 替换元素

jQuery的 replaceWith() 方法可用于将一个完整的DOM元素替换为另一个HTML或DOM元素。方法的语法如下:

$(selector).replaceWith(值);

这里的  是你想要用来替换原始元素的内容。可以是HTML或纯文本。

示例

下面是一个示例,我们将用<h1>元素替换<p>元素,然后进一步用<h2>元素替换<h1>元素。

<!doctype html>
<html>
<head>
<title>jQuery示例</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>(document).ready(function() {("#b1").click(function(){("p").replaceWith("<h1>这是新标题</h1>");});("#b2").click(function(){$("h1").replaceWith("<h2>这是另一个标题</h2>");});});
</script>
</head>
<body><p>点击下面的按钮来替换我</p><button id="b1">替换段落</button><button id="b2">替换标题</button>
</body>
</html>

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

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

相关文章

18 Linux 阻塞和非阻塞 IO

一、阻塞和非阻塞 IO 1. 阻塞和非阻塞简介 这里的 IO 指 Input/Output&#xff08;输入/输出&#xff09;&#xff0c;是应用程序对驱动设备的输入/输出操作。当应用程序对设备驱动进行操作的时候&#xff0c;如果不能获取到设备资源&#xff0c;那么阻塞式 IO 就会将对应应用…

Zynq-Linux移植学习笔记之65- 国产ZYNQ在linux下usleep时间精度不准问题解决

1、背景介绍 采用复旦微的ZYNQ&#xff0c;跑linux操作系统&#xff0c;在应用程序中使用usleep进行延时时&#xff0c;发现存在10ms以下采用usleep试验都为10ms的情况 2、解决办法 使能设备树中的PS TTC设备&#xff0c;默认不是打开的 timere0024000 {compatible "s…

一题三解(暴力、二分查找算法、单指针):鸡蛋掉落

涉及知识点 暴力、二分查找算法、单指针 题目 给你 k 枚相同的鸡蛋&#xff0c;并可以使用一栋从第 1 层到第 n 层共有 n 层楼的建筑。 已知存在楼层 f &#xff0c;满足 0 < f < n &#xff0c;任何从 高于 f 的楼层落下的鸡蛋都会碎&#xff0c;从 f 楼层或比它低的…

GEE ——errors & debuggings (2023GEE峰会总结)

简介&#xff1a; 在gee中有三种错误&#xff0c;一种就是系统错误&#xff0c;也就是我们看到的会在JavaScript code editor中出现的错误&#xff0c;也就是在程序还没有启动之前就会提示的错误&#xff0c;而客户端错误则主要是会提示一些在代码过程中的错误&#xff0c;比如…

远程电脑未连接显示器时分辨率太小的问题处理

背景&#xff1a;单位电脑显示器坏了&#xff0c;使用笔记本通过向日葵远程连接&#xff0c;发现分辨率只有800*600并且不能修改&#xff0c;网上找了好久找到了处理方法这里记录一下&#xff0c;主要用到的是一个虚拟显示器软件usbmmidd_v2 1)下载usbmmidd_v2 2&#xff09;…

asp.net core mvc之模型绑定、特性约束模型绑定、模型验证(服务器/客户端/远程)

一、不用模型绑定 数据类型都是string 1、UserController.cs public class UserController : Controller {public IActionResult Register(){return View();}[HttpPost]public IActionResult DoRegister(){//不用模型绑定 以前的方法取表单数据或Url的参数//数据类型都是s…

openssl+SM2开发实例一(含源码)

一、SM2算法介绍 SM2&#xff08;国密算法2&#xff09; 是中国国家密码管理局&#xff08;CNCA&#xff09;颁布的椭圆曲线密码算法标准&#xff0c;属于非对称加密算法。它基于椭圆曲线离散对数问题&#xff0c;提供了安全可靠的数字签名、密钥交换和公钥加密等功能。SM2被设…

软件测试项目实战经验附视频以及源码【商城项目,app项目,电商项目,银行项目,医药项目,金融项目】(web+app+h5+小程序)

前言&#xff1a; ​​大家好&#xff0c;我是阿里测试君。 最近很多小伙伴都在面试&#xff0c;但是对于自己的项目经验比较缺少。阿里测试君再度出马&#xff0c;给大家找了一个非常适合练手的软件测试项目&#xff0c;此项目涵盖web端、app端、h5端、小程序端&#xff0c;…

Anaconda Powershell Prompt和Anaconda Prompt的区别

先说结论&#xff1a;主要功能应该一样。区别在于powershell支持的命令更多。比如查询路径的命令pwd和列表命令ls。 Anaconda PowerShell Prompt和Anaconda Prompt是Anaconda发行版中两个不同的命令提示符工具。 Anaconda Prompt是Anaconda发布的默认命令提示符工具&#xff0…

FFMPEG库实现mp4/flv文件(H264+AAC)的封装与分离

ffmepeg 4.4&#xff08;亲测可用&#xff09; 一、使用FFMPEG库封装264视频和acc音频数据到 mp4/flv 文件中 封装流程 1.使用avformat_open_input分别打开视频和音频文件&#xff0c;初始化其AVFormatContext&#xff0c;使用avformat_find_stream_info获取编码器基本信息 2.使…

【链接装载与库】 Linux共享库的组织

Linux共享库的组织 由于动态链接的诸多优点&#xff0c;大量的程序开始使用动态链接机制&#xff0c;导致系统里面存在数量 极为庞大的共享对象。如果没有很好的方法将这些共享对象组织起来&#xff0c;整个系统中的共享对象文件则会散落在各个目录下&#xff0c;给长期的维护…

react之Component存在的2个问题

问题 只要执行setState()&#xff0c;即使不改变状态数据&#xff0c;组件也会重新render()只当前组件重新render()&#xff0c;就会自动重新render子组件 原因 Component中的shouldComponentUpdate()总是返回true 思路 只有当组件的state或props数据发生改变时才重新rend…

听GPT 讲Rust源代码--library/core/src

题图来自 The first unofficial game jam for Rust lang![1] File: rust/library/core/src/hint.rs rust/library/core/src/hint.rs文件的作用是提供了一些用于提示编译器进行优化的函数。 在Rust中&#xff0c;编译器通常会根据代码的语义进行自动的优化&#xff0c;以提高程序…

React【axios、全局处理、 antd UI库、更改主题、使用css module的情况下修改第三方库的样式、支持sass less】(十三)

文件目录 Proxying in Development http-proxy-middleware fetch_get fetch 是否成功 axios 全局处理 antd UI库 更改主题 使用css module的情况下修改第三方库的样式 支持sass & less Proxying in Development 在开发模式下&#xff0c;如果客户端所在服务器跟后…

手写链表C++

目录 一、链表基本概念以及注意事项 1.1 构造函数与析构函数 1.2 插入元素 1.3 重载运算符 二、小结 一、链表基本概念以及注意事项 在工作中&#xff0c;链表是一种常见的数据结构&#xff0c;可以用于解决很多实际问题。在学习中&#xff0c;掌握链表可以提高编程能力和…

Flutter IOS 前后台切换主题自动变化的问题

BUG 触发条件 设备 IOS 15 模拟器GetX 实现换肤GetMaterialApp 里面配置好 theme和darkTheme使用GetView和GetController进行开发 此时如果把App前后台切换&#xff0c;使用Obx包括起来的内容会跟谁异常主题变换&#xff0c;未使用Obx的颜色不会变化。 解决路径 首先在获取 …

华为交换机端口 access、trunk和hybrid收发数据规则

文章目录 1. 三个端口类型处理数据帧的汇总表2. access 端口3. trunk端口4. Hybrid 端口&#xff08;交换机的默认端口类型&#xff09;5.常用命令 1. 三个端口类型处理数据帧的汇总表 端口类型收到不带VLAN标签的帧的处理规则收到带VLAN标签的帧的处理规则发送帧时的处理规则…

大语言模型的关键技术

大语言模型的关键技术&#xff1a; 经过漫长的发展&#xff0c;LLM 进化到了当前的状态——通用且有能力的学习者。在这个过程中&#xff0c;人们提出了许多重要的技术&#xff0c;大大提升了 LLM 的能力。在此&#xff0c;我们简要列举了几种重要的技术&#xff0c;这些技术&a…

平面运动机器人的传感器外参标定

简述 对任意两个传感器进行外参标定可以采用手眼标定算法来完成&#xff0c;但是&#xff0c;传统手眼标定算法对于运动具有一定的要求&#xff0c;可以证明&#xff0c;至少需要两个以上轴角方向不同的旋转运动才可以正确估计出外参旋转&#xff0c;因此&#xff0c;如果使用…

54基于matlab的包络谱分析

基于matlab的包络谱分析&#xff0c;目标信号→希尔伯特变换→得到解析信号→求解析信号的模→得到包络信号→傅里叶变换→得到Hilbert包络谱&#xff0c;包络谱分析能够有效地将这种低频冲击信号进行解调提取。程序已调通&#xff0c;可直接运行。 54matlab包络谱分析信号解调…