【JQuery—前端快速入门】JQuery 操作元素

news2025/3/6 1:10:45

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


JQuery 操作元素


1. 获取/修改元素内容


三个简单的获取元素的方法:

在这里插入图片描述

这三个方法即可以获取元素的内容,又可以设置元素的内容.

有参数时,就进行元素的值设置,没有参数时,就进行元素内容的获取.

在这里插入图片描述

接下来,我们需要操作页面元素;


获取页面元素

在这里插入图片描述

我们写出如上代码,保存后,打开浏览器页面,按F12打开调试界面:

在这里插入图片描述

发现 console 什么都没有显示,这是因为没有触发 click() 方法,我们需要点击 id="id_01"的标签在页面中的内容,也就是页面中的 div 小盒子:

在这里插入图片描述

此时就能触发 click() 方法,执行 function() 中的操作,也就是在控制台打印 id = “id01” 的内容,我们也能直观地观察到 text() 和 html() 这两个获取元素的方法的区别;


如果我们获取的是表单元素的值,那么使用 text() 或者 html() 并不能获取到表单元素对应的值:

在这里插入图片描述

我们可以看到,再点击输入框后,console 并没有打印 id = “input” 标签对应的 value;

要想获取表单元素中的 value ,我们需要用 val() 方法:

在这里插入图片描述


修改页面元素

如果 text() ,html(),val() 没有传参,就是获取标签的值,如果有传参,就是修改调用该方法的元素的值:

在这里插入图片描述

保存代码,打开页面,观察效果:

在这里插入图片描述

说明:

  • 点击第一次,触发 click 方法,console 打印 div 调用 text() 和 html() 的内容,并且把 div 中的内容赋值为"我是点击后的内容";

  • 点击第二次,打印的就是 div 被赋值后的内容,同时重复赋值;


text 修改元素时,不会解析内容中的标签,而 html() 修改元素时,会先解析内容中的标签,再把内容进行修改,根据实际需求选择合适的方法即可:

在这里插入图片描述


修改表单元素的值,就需要调用 val():

在这里插入图片描述

可以看到,虽然 val() 确实修改了元素的值,但是却并没有解析赋值的标签;


2. 获取/设置元素属性


JQuery attr() 方法用于获取属性值;


示例一:使用 attr() 获取超链接标签中的网址

在这里插入图片描述

说明:代码中使用 JQuery 的标签选择器,选择 a 标签,并且通过调用 attr() 方法,来获取 a 标签的 href ;


示例二:使用 attr() 设置超链接标签中的网址

在这里插入图片描述

我们可以发现,如果对 attr() 方法传一个参数,表示获取标签中的属性的值;如果传两个参数,就是修改标签中的属性的值;


3. 获取/返回 css 属性


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


示例一:使用 css() 获取标签中的样式

在这里插入图片描述

说明:通过 JQuery 标签选择器,选择 div 标签,通过调用 css() 方法来获取 div 标签里, style 属性中的字体大小样式;


示例二:使用 css() 修改标签中的样式

在这里插入图片描述

和 attr() 方法同理,对 css() 传一个参数是获取样式,传两个参数则是修改样式;


4. 添加元素


添加 HTML 内容

  1. append():在被选元素的结尾插入内容
  2. prepend():在被选元素的开头插入内容
  3. after():在被选元素之后插入内容
  4. before():在被选元素之前插入内容

有序列表快捷键:

在这里插入图片描述


在这里插入图片描述

我们写出上面的代码,保存后打开页面:

在这里插入图片描述


5. 删除元素


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

  1. remove():删除被选元素(及其子元素)
  2. empty():删除被选元素的子元素。

在这里插入图片描述

说明:如果我们调用 remove 方法,会将选择的标签,及其里面的内容全部清除;


在这里插入图片描述

说明:调用 empty() 方法,会清空选中标签中的所有内容,但是会保留该标签;


在这里插入图片描述

在这里插入图片描述

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

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

相关文章

标签的ref属性 vue中为什么不用id标记标签

标签的ref属性 vue中为什么不用id标记标签 假设有一对父子组件,如果父组件和子组件中存在id相同的标签,会产生冲突。通过id获取标签会获取到先加载那个标签。 标签的ref属性的用法 在父组件App中,引入了子组件Person。 并使用ref标记了Pe…

7.1.1 计算机网络的组成

文章目录 物理组成功能组成工作方式完整导图 物理组成 计算机网络是将分布在不同地域的计算机组织成系统,便于相互之间资源共享、传递信息。 计算机网络的物理组成包括硬件和软件。硬件中包含主机、前端处理器、连接设备、通信线路。软件中包含协议和应用软件。 功…

IDEA 接入 Deepseek

在本篇文章中,我们将详细介绍如何在 JetBrains IDEA 中使用 Continue 插件接入 DeepSeek,让你的 AI 编程助手更智能,提高开发效率。 一、前置准备 在开始之前,请确保你已经具备以下条件: 安装了 JetBrains IDEA&…

mapbox基础,使用点类型geojson加载symbol符号图层,用于标注文字

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️symbol符号图层样式二、🍀使用点类型…

STM32---FreeRTOS中断管理试验

一、实验 实验目的:学会使用FreeRTOS的中断管理 创建两个定时器,一个优先级为4,另一个优先级为6;注意:系统所管理的优先级范围 :5~15 现象:两个定时器每1s,打印一段字符串&#x…

HTTP 状态代码 501 502 问题

问题 单个客户端有时会出现 报错 501 或 502 如下: System.Net.Http.HttpRequestException: Response status code does not indicate success: 501 (Not Implemented) 分析 可以排除 服务器无法处理的问题(测试发现 一个客户端报错,不会影响…

visual studio 2022 手工写一个简单的MFC程序

书籍:《Visual C 2017从入门到精通》的2.1.2 MFC方式中2.手工写一个简单的MFC程序 环境:visual studio 2022 内容:手工写一个简单的MFC程序 1.文件->新建->项目 2.根据以下步骤选择Windows桌面向导 3.输入项目名,选择保…

测试用例总结

一、通用测试用例八要素   1、用例编号;    2、测试项目;   3、测试标题; 4、重要级别;    5、预置条件;    6、测试输入;    7、操作步骤;    8、预期输出 二、具体分析通…

vulnhub靶场之【digitalworld.local系列】的development靶机

前言 靶机:digitalworld.local-devt-improved,IP地址为192.168.10.10 攻击:kali,IP地址为192.168.10.6 kali采用VMware虚拟机,靶机选择使用VMware打开文件,都选择桥接网络 这里官方给的有两种方式&…

Select 下拉菜单选项分组

使用<select>元素创建下拉菜单&#xff0c;并使用 <optgroup> 元素对选项进行分组。<optgroup> 元素允许你将相关的 <option> 元素分组在一起&#xff0c;并为每个分组添加一个标签。 <form action"#" method"post"><la…

文件上传漏洞详细利用流程

一、了解基本术语 1、后门 像房子一样&#xff0c;前门后门都可以进出房子&#xff0c;而较之前门&#xff0c;后门更具有隐蔽性。电脑技术中的后门是抽象概念&#xff0c;意指隐蔽性高或不常用的&#xff0c;区别于常规操作所使用的一种出入口。现金网络后门形形色色&#x…

蓝桥与力扣刷题(蓝桥 旋转)

题目&#xff1a;图片旋转是对图片最简单的处理方式之一&#xff0c;在本题中&#xff0c;你需要对图片顺时针旋转 90 度。 我们用一个 nm的二维数组来表示一个图片&#xff0c;例如下面给出一个 34 的 图片的例子&#xff1a; 1 3 5 7 9 8 7 6 3 5 9 7 这个图片顺时针旋转…

transformer架构解析{掩码,(自)注意力机制,多头(自)注意力机制}(含代码)-3

目录 前言 掩码张量 什么是掩码张量 掩码张量的作用 生成掩码张量实现 注意力机制 学习目标 注意力计算规则 注意力和自注意力 注意力机制 注意力机制计算规则的代码实现 多头注意力机制 学习目标 什么是多头注意力机制 多头注意力计算机制的作用 多头注意力机…

使用DiskGenius工具来实现物理机多硬盘虚拟化迁移

使用DiskGenius工具来实现物理机多硬盘虚拟化迁移 概述准备工作注意事项实操过程记录1、Win7虚拟机&#xff0c;安装有两个硬盘&#xff08;硬盘0和硬盘1&#xff09;&#xff0c;各分了一个区&#xff0c;磁盘2是一块未使用的磁盘2、运行DiskGenius程序&#xff0c;记录现有各…

React封装通用Table组件,支持搜索(多条件)、筛选、自动序号、数据量统计等功能。未采用二次封装调整灵活,包含使用文档

封装通用组件 一、封装思想二、react代码三、css代码四、实现效果五、使用文档 BasicTableModal 表格模态框组件1.组件简介2.功能特点3.使用方法基础用法宽度控制示例带筛选功能搜索功能示例自定义单元格渲染 4.API 说明PropsColumn 配置项Filter 配置项 5.注意事项 一、封装思…

【JavaEE】-- 多线程(初阶)4

文章目录 8.多线程案例8.1 单例模式8.1.1 饿汉模式8.1.2 懒汉模式 8.2 阻塞队列8.2.1 什么是阻塞队列8.2.2 生产者消费者模型8.2.3 标准库中的阻塞队列8.2.4 阻塞队列的应用场景8.2.4.1 消息队列 8.2.5 异步操作8.2.5 自定义实现阻塞队列8.2.6 阻塞队列--生产者消费者模型 8.3 …

WP 高级摘要插件:助力 WordPress 文章摘要精准自定义显示

wordpress插件介绍 “WP高级摘要插件”功能丰富&#xff0c;它允许用户在WordPress后台自定义文章摘要。 可设置摘要长度&#xff0c;灵活调整展示字数&#xff1b;设定摘要最后的显示字符&#xff0c; 如常用的省略号等以提示内容未完整展示&#xff1b;指定允许在摘要中显示…

论文阅读 EEG-Inception

EEG-Inception: A Novel Deep Convolutional Neural Network for Assistive ERP-Based Brain-Computer Interfaces EEG-Inception是第一个集成Inception模块进行ERP检测的模型&#xff0c;它有效地结合了轻型架构中的其他结构&#xff0c;提高了我们方法的性能。 本研究的主要目…

FFmpeg入门:最简单的音频播放器

FFmpeg入门&#xff1a;最简单的音频播放器 欢迎大家来到FFmpeg入门的第二章&#xff0c;今天只做一个最简单的FFmpeg音频播放器&#xff1b;同样&#xff0c;话不多说&#xff0c;先上流程图 流程图 以上流程和视频播放器的解码过程基本上是一致的&#xff1b; 不同点在于 S…

基于Linux系统的物联网智能终端

背景 产品研发和项目研发有什么区别&#xff1f;一个令人发指的问题&#xff0c;刚开始工作时项目开发居多&#xff0c;认为项目开发和产品开发区别不大&#xff0c;待后来随着自身能力的提升&#xff0c;逐步感到要开发一个好产品还是比较难的&#xff0c;我认为项目开发的目的…