jQuery属性操作和内容文本值

news2025/10/30 14:23:01

1. 属性操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery.min.js"></script>
</head>

<body>
    <a index="how" data-index="XingWei" href="http://www.baidu.com" title="Hello">百度</a>
    <input type="checkbox" name="" id="">
    <span>123</span>
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
    <!-- 
        1. 设置或获取元素固有的属性值prop(); 
            固有属性：就是元素本身自带的属性; 
        2. 获取自定义属性attr(); 
        3. data()方法可以在指定的元素上存取数据, 并不会修改DOM元素的结构; 
           一旦页面刷新, 之前存放的数据都将会被移除; 
     -->
    <script>
        $(function () {

            //1. 获取元素的固有属性：element.prop(属性名);        
            console.log($("a").prop("href"));   //获取属性值
            $("a").prop("title", "BaiDu");      //设置属性值
            $("input").change(function () {
                console.log($(this).prop('checked'));
            });

            //2. 元素的自定义属性：
            // attr("属性");
            console.log($("a").attr("index")); //how
            console.log($('a').attr('data-index')); //XingWei
            console.log($("a").prop("index"));  // undefined（通过prop()获取自定义属性index, 结果返回undefined）
            $("img").attr({ src: "test.png", alt: "this is a img;" })

            //3. 数据缓存:data() / removeData()
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            console.log($('a').data('index')); //获取a中的h5的自定义属性值, 此时不必加data-, 并且返回的是数字(如果可以被解析)
        });
    </script>
</body>

</html>

2. 内容文本值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery.min.js"></script>
</head>

<body>
    <div id="id0">
        <span>我是内容</span>
    </div>
    <div id="id1">test</div>
    <input type=" text" value="请输入内容">

    <div id="id2">测试</div>
    <div id="id3"><p>含有标签测试</p></div>

    <!-- 
        html(): 获取/设置元素内容（等价于原生js中的innerHtml）
        text(): 获取/设置元素文本内容（等价于原生js中的innerText）
        val():  获取/设置表单值
     -->
     <!-- 
         innerHtml / innerText区别：
            <div> HelloWorld </div>
                innerHtml:> HelloWorld
                innerText:> HelloWorld
            <div> <h1>Good</h1> </div>
                innerHtml:> <h1>Good</h1>
                innerText:> Good
        =>  
            innerHTML   指的是从对象的起始位置到终止位置的全部内容,```包括Html标签```; 
            innerText   指的是从起始位置到终止位置的内容, 去除标签符号<></>, 但是标签的内容是能打印出来的; 
      -->
  
    <script>
        //html
        console.log($("#id0").html()); // <span>我是内容</span>
        $("#id0").html("Hello World");   // 修改
        console.log($('div').html());   


        // text
        console.log($("#id1").text());  // test
        $("#id1").text("World");


        //
        console.log($("input").val());  // ...value
        $("input").val(123);


        // 测试innerHtml 和 innerText
        console.log('--------------'); 
        console.log($("#id2").html());  // 测试
        console.log($("#id2").text());  // 测试
        console.log("---------");
        console.log($("#id3").html());  // <p>含有标签测试</p>  (包括标签)
        console.log($("#id3").text());  // 含有标签测试         (只是标签中的文本内容被打印出来)
    </script>
</body>

</html>

在这里插入图片描述

3. parent系列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery.min.js"></script>

</head>

<body>

    <div class="one">
        <div class="two">
            <div class="three">
                <div class="four">我不容易</div>
            </div>
        </div>
    </div>
    <script>
        //寻找祖先:寻找four的祖先one
        //一般思路：层层找 (parent)
        console.log($(".four"));
        console.log($(".four").parent().parent().parent());

        //高级 (parents)
        console.log($(".four").parents());          //5个
        console.log($(".four").parents(".one"));    //5个里面指定要one
    </script>
</body>

</html>

在这里插入图片描述

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

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

相关文章

全局CSS样式1

全局CSS样式1

1. 响应式基础 1.1 init <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compati…
阅读更多...
chatgpt赋能python：Python两行三列列表：更高效的数据展示方式

chatgpt赋能python：Python两行三列列表：更高效的数据展示方式

Python 两行三列列表&#xff1a;更高效的数据展示方式 在Python编程中&#xff0c;经常会需要对数据进行展示。而最常见的方式则是使用列表。然而&#xff0c;当数据量较大时&#xff0c;传统的列表显示方式显得过于冗长。Python两行三列列表的使用&#xff0c;不仅可以增加代…
阅读更多...
chatgpt赋能python：Python不挂科，学会这些技能就足够

chatgpt赋能python：Python不挂科，学会这些技能就足够

Python不挂科&#xff0c;学会这些技能就足够 Python已成为现代编程语言中最受欢迎的一种&#xff0c;它擅长处理数据、人工智能等复杂的软件开发任务。互联网时代的到来也让Python的使用场景更加广泛&#xff0c;从前后端开发到数据分析。无论是学习Python的初学者还是有一定…
阅读更多...
MQTT（3）：MQTT协议原理

MQTT（3）：MQTT协议原理

官方文档中对于MQTT协议包的结构有着具体的说明&#xff1a;http://mqtt.org/documentation 在MQTT协议中&#xff0c;一个MQTT数据包由&#xff1a;固定头&#xff08;Fixed header&#xff09;、可变头&#xff08;Variable header&#xff09;、消息体&#xff08;payload&…
阅读更多...
chatgpt赋能python：介绍Python在SEO中的重要性

chatgpt赋能python：介绍Python在SEO中的重要性

介绍Python在SEO中的重要性 随着互联网的不断发展&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;变得越来越重要。SEO一直是网络营销的重要组成部分&#xff0c;可以增加网站的可见性和流量。Python作为一种强大的编程语言&#xff0c;可以帮助网站优化人员更好地管理和…
阅读更多...
LIMA和QLoRA论文解读

LIMA和QLoRA论文解读

《LIMA: Less Is More for Alignment》 paper: https://arxiv.org/abs/2305.11206 Meta在2023年5月发布了论文《LIMA: Less Is More for Alignment》&#xff0c;基于LLaMa-65B微调了大模型LIMA&#xff0c;号称只用了1000个精心策划的问题和答复进行微调&#xff0c;就达到了…
阅读更多...
HashMap 1.8全流程分析，详解put、resize、遍历等相关函数。以及其内部的二进制原理

HashMap 1.8全流程分析，详解put、resize、遍历等相关函数。以及其内部的二进制原理

简介 从常用属性->构造方法->添加->扩容->查询->删除->遍历的顺序进行HashMap源码阅读&#xff0c;涉及到一些二进制的用法以及意义也会进行说明。 HashMap源码解析 简介 HashMap采用了hash 表的数据结构进行实现&#xff0c;在key未存在hash冲突的情况下&…
阅读更多...
Games104现代游戏引擎学习笔记09

Games104现代游戏引擎学习笔记09

Animation Blending 两个动画衔接 Math of blending&#xff1a;LERP&#xff1a;线性插值 在两个动画之间取关键帧插值 weight1weight2等于1 两个动画必须都是循环的&#xff0c;归一化之后能一致 Blend Space 在采用空间里的所有动画&#xff08;clips&#xff09;&#xf…
阅读更多...
FastThreadLocal 原理解析

FastThreadLocal 原理解析

FastThreadLocal 每个 FastThread 包含一个 FastThreadLocalMap&#xff0c;每个 FastThreadLocalThread 中的多个 FastThreadLocal 占用不同的索引。每个 InternalThreadLocalMap 的第一个元素保存了所有的 ThreadLocal 对象。之后的元素保存了每个 ThreadLocal 对应的 value …
阅读更多...
微服务架构之RPC调用

微服务架构之RPC调用

在单体应用时&#xff0c;一次服务调用发生在同一台机器上的同一个进程内部&#xff0c;也就是说调用发生在本机内部&#xff0c;因此也被叫作本地方法调用。在进行服务化拆分之后&#xff0c;服务提供者和服务消费者运行在两台不同物理机上的不同进程内&#xff0c;它们之间的…
阅读更多...
Segment Anything——论文笔记

Segment Anything——论文笔记

home page&#xff1a;segment-anything.com code&#xff1a;segment-anything 1. 概述 介绍&#xff1a;SAM是最近提出的一种通用分割大模型&#xff0c;其表现出了强大的零样本泛化能力&#xff0c;视觉感知模型的通用化又前进了一步。为了达到文章标题字面意义“segment a…
阅读更多...
chatgpt赋能python：Python下载PyQt5教程

chatgpt赋能python：Python下载PyQt5教程

Python下载PyQt5教程 简介 PyQt5是一款Python编程语言的GUI框架&#xff0c;它基于QT库&#xff0c;专门用于开发图形界面应用程序。PyQt5可以实现跨平台开发&#xff0c;可在Windows&#xff0c;MacOS和Linux操作系统上运行。本文将介绍如何下载PyQt5&#xff0c;并在Python…
阅读更多...
14、JavaEE--Mybatis注解与Ajax技术

14、JavaEE--Mybatis注解与Ajax技术

目录 单表注解 Param注解 基于注解的一对一关联查询&#xff08;one&#xff09; 一对多查询&#xff08;many&#xff09; Ajax的概念 Ajax 开发 Ajax的核心代码: Ajax五步使用法 步骤1 创建 XMLHttpRequest 对象 步骤2 指定异步提交的目标和提交方式 步骤3 指定 X…
阅读更多...
IT知识百科：什么是分布式云？

IT知识百科：什么是分布式云？

在当今信息技术高速发展的时代&#xff0c;云计算已经成为了企业和个人的重要组成部分。而在云计算领域中&#xff0c;分布式云是一种重要的架构模式&#xff0c;它允许资源的分散部署和管理&#xff0c;以实现高可用性、可伸缩性和弹性的服务提供。 本文将详细介绍什么是分布…
阅读更多...
IT公司的吉祥“树” 二叉树-（堆）C语言创建

IT公司的吉祥“树” 二叉树-（堆）C语言创建

目录 &#x1f36a;前言 一、树概念及结构 ✅基本概念 ✅树的专有名词 ✅ 树的表示 &#x1f6a9;孩子兄弟表示法 二、二叉树概念及结构 ✅概念 &#x1f60d;&#x1f60d;现实中的二叉树&#xff08;又称IT公司的吉祥物&#xff09;&#x1f60d;&#x1f60d; ✅…
阅读更多...
Nginx常用操作说明

Nginx常用操作说明

Nginx常用操作说明 介绍Nginx概念深入浅出Nginx环境搭建Nginx反向代理-负载均衡Nginx动静分离Nginx动静分离先在部署Nginx的机器&#xff0c;Nginx目录下创建一个目录static_resources将项目中所有的静态资源全部拷贝到该目录下&#xff0c;而后将项目中的静态资源移除重新打包…
阅读更多...
Hexo 个人博客主题美化

Hexo 个人博客主题美化

anzhiyu主题文档&#xff1a;https://anzhiy.cn/posts/220c.html anzhiyu主题插件地址&#xff1a;https://github.com/anzhiyu-c/hexo-theme-anzhiyu anzhiyu 主题安装 在博客根目录里执行命令&#xff0c;安装 anzhiyu 主题&#xff1a; git clone -b main https://github.co…
阅读更多...
sql partition by和rank的统计用法

sql partition by和rank的统计用法

问题背景 最近公司有个项目需要用到某种特殊的统计用法&#xff0c; 例如从所有的数据中找出每个账号最新的一条余额信息&#xff08;根据某个关键信息进行排序并获取排序值最高的记录&#xff09;。 当时用的是非常普通的语句&#xff0c;也就是多个子查询嵌套select出每个账…
阅读更多...
chatgpt赋能python：Python下载jieba：优化中文分词的必备工具

chatgpt赋能python：Python下载jieba：优化中文分词的必备工具

Python下载jieba&#xff1a;优化中文分词的必备工具 在中文自然语言处理的领域中&#xff0c;分词是一项基础且重要的任务。jieba是一个优秀的中文分词组件&#xff0c;它支持三种分词模式&#xff0c;并且具有高效、准确、易用等优点。本文将介绍如何通过Python来下载jieba&…
阅读更多...
chatgpt赋能python：Python中8//3**2*10的解析与运算

chatgpt赋能python：Python中8//3**2*10的解析与运算

Python中8//3**2*10的解析与运算 Python是一种高效&#xff0c;多范式&#xff0c;解释性编程语言&#xff0c;广泛用于Web开发&#xff0c;数据科学&#xff0c;人工智能等领域。在Python的运算中&#xff0c;有一个8//3**2*10的表达式&#xff0c;本篇文章将对其进行解析与运…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023