JQuery学习之路Part5：DOM元素内容和属性值的获取和设置

逃离我推掉我的手 2023-07-12 09:27 18阅读 0赞

# 一、获取/设置内容 #

### 1、text() ###

**获取**所选元素的文本内容  
**获取**双标签文本内容  
不往方法里传入参数 即为获取

例：

$("#btn1").click(function(){
        
    	alert("Text: " + $("#test1").text());
    });

**设置**所选元素的文本内容  
**设置**双标签文本内容  
往方法里传入要设置的文本内容

例：

$("#btn1").click(function(){
        
    	$("#test1").text("Hello world!");
    });

--------------------

### 2、html() ###

不同于val() 该方法获取的时候 会将HTML标记也一并获取过来  
**获取**所选元素的内容（包括 HTML 标记）

例：

$("#btn1").click(function(){
        
    	alert("HTML: " + $("#test1").html());
    });

**设置**所选元素的内容（包括 HTML 标记）

例：

$("#btn1").click(function(){
        
    	$("#test1").html("<b>Hello world!</b>");
    });

--------------------

### 3、val() ###

**获取**表单字段的值  
**获取**单标签文本内容  
获取来的就是原原本本的内容 不包含HTML标记

例：

$("#btn1").click(function(){
        
    	alert("Value: " + $("#test1").val());
    });

**设置**表单字段的值  
**设置**单标签文本内容

例：

$("#btn1").click(function(){
        
    	$("#test1").val("Cool Boy");
    });

--------------------

# 二、获取/设置属性值 #

### 1、prop() ###

对于**HTML元素本身就带有的属性**(不直接出现在标签中的属性)  
对于布尔(boolean)类型属性 应使用prop()方法  
例：\[checked\] \[selected\] \[desabled\]

**获取**指定属性值  
语法：`prop(属性名)`

例：

$("button").click(function(){
        
    	alert($("#ck1").prop("checked"));
    });

**设置**指定属性值  
语法：`prop(属性名,属性值)`

例：

$("button").click(function(){
        
    	$("#ck1").prop("checked",true);
    });

**设置多个**属性值  
例：

$("button").click(function(){
        
    	$("#ck1").prop({
        
    		"href" : "https://www.baidu.com",
    		"title" : "百度"
    	});
    });

--------------------

### 2、attr() ###

对于**HTML元素中直接出现在标签中的属性**

**获取**指定属性值  
语法：`attr(属性名)`

例：

$("button").click(function(){
        
    alert($("#ck1").attr("href"));
    });

若有多个同名对象 则输出的是第一个对象的属性

**设置**指定属性值

语法：attr(属性名,属性值)

例：

$("button").click(function(){
        
    	$("#ck1").attr("href","https://www.baidu.com");
    });

若无某属性 则自动添加该属性

**设置多个**属性值  
语法：

.attr({
        
    	属性名1:"属性值1,
    	属性名2:"属性值2,
    	属性名3:"属性值3,
    })

例：

$("button").click(function(){
        
    	$("#ck1").attr({
        
    		"href" : "http://www.baidu.com",
    		"title" : "百度"
    	});
    });

若无某属性 则自动添加该属性

--------------------

发表评论取消回复

表情：

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

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

相关阅读

相关 jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容： text() - 设置或返回所选元素的文本内容

蔚落/ 2024年03月16日 10:19/ 0 赞/ 116 阅读

相关 jQuery - 获取内容和属性

jQuery 拥有可操作 HTML 元素和属性的强大方法。 -------------------- jQuery DOM 操作 jQuery 中非常重要的部分，就是

谁践踏了优雅/ 2024年03月16日 10:19/ 0 赞/ 21 阅读

相关 JQuery学习之路Part5：DOM元素内容和属性值的获取和设置

一、获取/设置内容 1、text() 获取所选元素的文本内容获取双标签文本内容不往方法里传入参数即为获取例： $("btn1").cli

逃离我推掉我的手/ 2023年07月12日 09:27/ 0 赞/ 19 阅读

相关 JQuery学习之路Part2：用选择器获取元素

JQuery基本语法都会带有$美元符号该符号可以修改： var jq=jQuery.noConflict() 如此就可以用jq代替美元符号了 ------

Dear 丶/ 2023年07月12日 06:28/ 0 赞/ 21 阅读

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

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

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

相关【js】jQuery获取和修改元素的内容、属性、css样式

1.获取和修改元素内容我们可以使用html()方法获取元素内容和修改内容，类似于元素js的innerHTMl 当html()方法不传参数的时候即是获取该元素的内容，

﹏ヽ暗。殇╰゛Y/ 2022年11月27日 00:45/ 0 赞/ 258 阅读

相关 jQuery 之设置页面内容和属性（七）

设置内容 - text()、html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容： text() - 设置或返回所选元素的文本内容 html

布满荆棘的人生/ 2022年09月23日 13:49/ 0 赞/ 192 阅读

相关 jQuery 之获取页面内容和属性（六）

获得内容 - text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法： text() - 设置或返回所选元素的文本内容 ht

素颜马尾好姑娘i/ 2022年09月23日 13:48/ 0 赞/ 214 阅读

相关【DOM 编程艺术】3.5 获取和设置属性

> getAttribute用于获取各个属性，setAttribute方法可以更改属性节点的值。 <table> <tbody> <tr> <td><b>1

心已赠人/ 2022年06月08日 08:39/ 0 赞/ 183 阅读

相关 jQuery - 获取内容和属性

jQuery DOM 操作 jQuery 中非常重要的部分，就是操作 DOM 的能力。 jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容

缺乏、安全感/ 2021年09月15日 07:44/ 0 赞/ 380 阅读