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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


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.mzph.cn/bicheng/72509.shtml

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

相关文章

2025年4月1日-2日AutoCable 中国汽车线束线缆及连接技术创新峰会即将开幕

正如人体的心脏与四肢之间需要靠神经和血管连接,汽车的各个部件,也要靠各种电线、管道连接。线束,就是汽车的神经和血管,车主向汽车下达的每一个功能指令,都通过线束来传递,看似不起眼的线束,却…

编程题 - 汽水瓶【JavaScript/Node.js解法】

目录 题目描述 解题思路 代码实现 复杂度分析 代码解释 输入输出处理 题目描述 有这样一道经典的编程题:某商店规定:三个空汽水瓶可以换一瓶汽水。小张手上有 n 个空汽水瓶,他最多可以换多少瓶汽水喝? 解题思路 这是一个…

深度学习神经网络分类原理

每一个神经元做的是一个类似回归的操作 最后一层是softmax函数,每一个输出就会变成一个0到1之间的数,也就是概率,然后他们之间的和加起来等于1,到底是哪一个分类就是看哪个神经元的这个值最大。 那么如何算损失呢: 加…

硬核技术组合!用 DeepSeek R1、Ollama、Docker、RAGFlow 打造专属本地知识库

文章目录 一、引言二、安装Ollama部署DeepSeekR1三、安装Docker四、安装使用RAGFlow4.1 系统架构4.2 部署流程4.3 使用RAGFlow4.4 在RAGFlow中新增模型4.5 创建知识库4.6 创建私人助理使用RGA 一、引言 本地部署DeepSeek R1 Ollama RAGFlow构建个人知识库,通过将…

前端实现OSS上传图片(Vue3+vant)

首先,下面这些信息从阿里云服务器OSS管理中获取 aliyun:oss:file:endpoint: "oss-cn-beijing.aliyuncs.com"keyid: "xxxxxxxxx"keysecret: "xxxxxxxxxxxx"bucketname: "xxxx"一、安装OSS npm install ali-oss 二、以下步…

huggingface NLP主要知识点以及超级详解使用

1.安装huggingface依赖库 pip install transformers pip install datasets pip install pytorch pip install tokenizers pip install diffusers pip install accelerate pip install evaluate pip install optimum pip install pillow pip install requests pip install gr…

Spark核心之02:常用算子详解

1、RDD操作详解 # 启动spark-shell spark-shell --master local[2] 1.1 基本转换 1) map map是对RDD中的每个元素都执行一个指定的函数来产生一个新的RDD。 任何原RDD中的元素在新RDD中都有且只有一个元素与之对应。 举例: scala> val a sc.parallelize(1 …

MySQL 8.X 报错处理

1.重新加载配置 reload the configuration mysql> ALTER INSTANCE RELOAD KEYRING; ERROR 1227 (42000): Access denied; you need (at least one of) the ENCRYPTION_KEY_ADMIN privilege(s) for this operation 提示需要ENCRYPTION_KEY_ADMIN权限 重新授权 GRANT ENCR…

SQL注入练习场:PHPStudy+SQLI-LABS靶场搭建教程(零基础友好版)

注意:文中涉及演示均为模拟测试,切勿用于真实环境,任何未授权测试都是违法行为! 一、环境准备 下载PHPStudy 官网下载地址:https://www.xp.cn/php-study(选择Windows版) 安装时建议选择自定…

现今大语言模型性能(准确率)比较

现今大语言模型性能(准确率)比较 表头信息:表的标题为“大语言模型性能比较结果”(英文:Table 1: Large Language Model Performance Comparison Results),表明该表是用于对比不同大语言模型的性能。列信息: 模型:列出参与比较的不同大语言模型名称,包括LLAMA3(70B)…

Docker创建自定义网桥并指定网段

前言 docker0是Docker默认网络的核心组件, 通过虚拟网桥和NAT技术, 实现了容器间的通信以及容器与外部网络的交互。然而, docker0网段是固定的(通常是172.17.0.0/16), 为了更灵活地管理容器网络,Docker支持创建自定义网桥,允许用户指定网段。 例如, 在…

【向量数据库Weaviate】 和Elasticsearch的区别

Weaviate 和 Elasticsearch 是两种不同类型的数据库,设计目标和应用场景有显著差异。以下是它们的核心区别和适用场景的详细对比: 1. 设计目标与核心能力 维度WeaviateElasticsearch核心能力向量数据库 图数据库(语义搜索优先)全…

蓝桥杯每日一题:第一周周四哞叫时间

蓝桥杯每日一题:第一周周四哞叫时间 疑惑:如何把复杂度控制在Q(n),怎么枚举a和b,longlong的形式又该怎么输入(考虑用string) 思路:枚举倒数第二个b前面有多少个a 这是一…

在 macOS 使用 .pem 私钥免密登录腾讯云服务器

前言 在腾讯云上创建服务器时,如果选择了「密钥对」的登录方式,就会得到一个 .pem 文件作为私钥。很多小伙伴在使用 macOS 系统时,可能不清楚如何使用这个私钥文件来 SSH 免密登录远程服务器。本文将详细介绍如何在本地配置 .pem 私钥文件并…

AI学习笔记:LM studio大模型加载参数说明

LM Studio加载大模型时参数设置页面的常见参数及设置方法如下: 上下文长度(Context Length) 意义:表示模型可以处理的最大上下文长度,即模型一次能够考虑的输入文本的最大token数量。较大的上下文长度能让模型更好地…

Spring项目中常用操作记录

List 基础操作 创建 // 使用 ArrayList&#xff08;基于动态数组&#xff0c;适合随机访问&#xff09; List<String> arrayList new ArrayList<>();// 使用 LinkedList&#xff08;基于链表&#xff0c;适合频繁插入/删除&#xff09; List<Integer> li…

腾讯 TDF 即将开源 Kuikly 跨端框架,Kotlin 支持全平台

今天&#xff0c;在腾讯的 Shiply 平台看 Flutter 动态化自研框架 Conch 时&#xff0c;在侧边栏看到了有「跨端开发框架」的介绍&#xff0c;点开发现有两个产品&#xff1a; Hippy&#xff1a;面向前端技术栈的跨端开发框架&#xff0c;Web原生开发体验&#xff0c;支持 Rea…

SQL AND OR 操作符详解

SQL AND & OR 操作符详解 在SQL(结构化查询语言)中,AND 和 OR 是两种非常重要的逻辑操作符,它们用于在查询条件中组合多个条件。理解并正确使用这些操作符对于编写有效的SQL查询至关重要。 引言 在处理数据库查询时,我们常常需要根据多个条件来筛选数据。AND 和 OR…

nginx accesslog 打印自定义header

比如我在请求的header中添加了一个path-match-type&#xff0c;那我现在nginx的accesslog 中打印出来&#xff0c;应该如何配置呢&#xff1f; rootnginx-59f5d66df6-jw5k8:/# cat /etc/nginx/nginx.conf user nginx; worker_processes auto;error_log /var/log/nginx/erro…

响应式布局的设计规范

响应式设计&#xff08;Responsive Design&#xff09; 是一种 web 设计技术&#xff0c;旨在使网页在不同的设备和屏幕尺寸上都有良好的显示效果。响应式设计的核心思想是网页的布局能够根据设备的屏幕宽度、分辨率以及其他特性自动调整&#xff0c;使其适应桌面、平板和手机等…