[jQuery-3] 获取和设置标签元素

你的名字 2022-11-26 06:52 195阅读 0赞

## 六、获取和设置元素内容 ##

### 1. html方法的使用 ###

jquery中的html方法可以获取和设置标签的html内容

**示例代码:**

<script>
        $(function(){ 
    
            var $div = $("#div1");
            // 获取标签的html内容
            var result = $div.html();
            alert(result);
            // 设置标签的html内容，之前的内容会清除
            $div.html("<span style='color:red'>你好</span>");
            // 追加html内容
            $div.append("<span style='color:red'>你好</span>");
    
        });
    </script>
    
    <div id="div1">
        <p>hello</p>
    </div>

**说明:**

给指定标签追加html内容使用**append方法**

## 七、获取和设置元素属性 ##

### 1. prop方法的使用 ###

之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。

**示例代码:**

<style>
        .a01{ 
            color:red;
        }
    </style>
    
    <script>
        $(function(){ 
            var $a = $("#link01");
            var $input = $('#input01')
    
            // 获取元素属性
            var sId = $a.prop("id");
            alert(sId);
    
            // 设置元素属性
            $a.prop({ "href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});
    
            // 获取value属性
            // var sValue = $input.prop("value");
            // alert(sValue);
    
            // 获取value属性使用val()方法的简写方式
            var sValue = $input.val();
            alert(sValue);
            // 设置value值
            $input.val("222222");
        })
    </script>
    
    <a id="link01">这是一个链接</a>
    <input type="text" id="input01" value="111111">

**说明:** 获取value属性和设置value属性还可以通过**val方法**来完成。

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery 学习-样式篇（六）：jQuery 获取和设置表单元素的值

> 推荐阅读 > > Helm3（K8S 资源对象管理工具）视频教程：[https://edu.csdn.net/course/detail/32506][https_

妖狐艹你老母/ 2023年01月01日 01:45/ 0 赞/ 160 阅读

相关 jQuery获取同级元素

next()相邻下一个同级元素 prev()相邻上一个同级元素 siblings()所有同级元素 $("id").next(); $("id").prev

矫情吗；*/ 2022年12月31日 01:28/ 0 赞/ 230 阅读

相关 jQuery-获取元素尺寸

width():获取内容区的宽度；height():获取内容区的高度； innerWidth():获取内容区的宽度+padding；innerHeight():获取内容区的

怼烎@/ 2022年12月02日 10:49/ 0 赞/ 237 阅读

相关 [jQuery-3] 获取和设置标签元素

六、获取和设置元素内容 1. html方法的使用 jquery中的html方法可以获取和设置标签的html内容示例代码: <script>

你的名字/ 2022年11月26日 06:52/ 0 赞/ 196 阅读

相关 JS_js设置与获取标签属性，js设置元素样式

JavaScript获取标签属性先介绍两个常用方法: attr() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值，则返回第一个匹配元素的值。

超、凢脫俗/ 2022年11月21日 01:10/ 0 赞/ 319 阅读

相关 jQuery获取元素

1、获取本身：　a.只需要一种jQuery选择器 ![20210203164123613.png][] b.多种jQuery选择器组合　　b1.jQuery选择器

缺乏、安全感/ 2022年10月27日 05:21/ 0 赞/ 278 阅读

相关 JQuery 获取和编辑页面元素

修改页面元素 <div> 和 <font> 源码如下： <html> <head> <meta http-equiv="Content-Type" conten

比眉伴天荒/ 2022年07月14日 02:10/ 0 赞/ 213 阅读

相关 jquery设置元素的readonly和disabled

转自：[http://www.cnblogs.com/RascallySnake/archive/2010/08/03/1791365.html][http_www.cnbl

系统管理员/ 2022年05月11日 11:44/ 0 赞/ 236 阅读

相关 jQuery设置元素隐藏

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1

朴灿烈づ我的快乐病毒、/ 2022年02月03日 06:49/ 0 赞/ 237 阅读

相关 jQuery添加标签元素/内容

通过 `jQuery`，可以很容易地添加新元素/内容。我们将学习用于添加新内容的四个 jQuery 方法： `append()` \- 在被选元素的结尾插入内容

r囧r小猫/ 2021年06月26日 16:06/ 0 赞/ 601 阅读