jQuery--内容操作（html()、text()、val()）详解

灰太狼 2021-08-13 22:35 313阅读 0赞

#### 样式操作 ####

在jQuery中，提供了html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值。以上方法的使用方式基本相同，当方法没有提供参数时，表示获取匹配元素的内容或值；当方法携带参数时，表示对匹配元素的内容或值进行修改。

**1. html()方法：**  
html()方法用于获取第一个匹配元素的HTML，内容或修改匹配元素的HTML内容，方方法仅对XHTML文档有效，不能用于XML文档。html()方法的语法格式如下：

html()
    html(htmlCode)
    html(function(index, oldHtmlCode))

*  无参方法用于返回第1个匹配元素的HTML内容
 *  有参方法用于设定匹配元素的文本内容
 *  htmlCode：表示将所匹配元素的HTML内容设定为htmlCode
 *  function(index, oldHTmlCode)：表示将函数的返回值作为当前元素的HTML内容，index表示当前元素在集合中的索引位置，oldHtmlCode表示当前在修改之前的HTML内容

示例：

//返回#mainCotentDiv标签的HTML内容
    $("#mainContentDiv".html());
    //设置#mainContentDiv标签的HTML内容为红色标题格式的“标题”
    $("#mainContentDiv").html("<h1><font color='red'>标题</font><h1/>");
    //根据元素在集合中的不同位置，设定不同的HTML内容
    $("p").html(function(index, htmlCode){ 
    	switch(index){ 
    		case 0:
    			return "<h1> + htmlCode + "<h1/>";
    		case 1:
    			return "<h2> + htmlCode + "<h2/>";
    	}
    });

**2. text()方法：**  
text()方法用于读取或设置匹配元素的文本内容。与html()方法区别在于，text()方法返回纯文本内容，适用于XHTML和XML文档。text()方法的语法格式如下：

text()
    text(textContent)
    text(function(index, oldTextContent))

*  无参方法用于返回第1个匹配元素的文本内容
 *  有参方法用于设定匹配元素的文本内容
 *  textContent：表示将所匹配元素的文本内容内容设定为textContent
 *  function(index, oldTextContent)：表示将函数的返回值作为当前元素的HTML内容，index表示当前元素在集合中的索引位置，oldTextContent表示当前在修改之前的文本内容

示例：

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title>jQuery基本操作-内容操作</title>
    		<script type="text/javascript" src="js/jquery-1.x.js"> </script>
    	</head>
    
    	<body>
    		<div id="newsContent">
    			<p>中国的商业正处于一场正在进行时态的变革。</p>
    			<p>MALL新闻频道拥有中国购物，城市综合体，商业街区最全的商业信息。</p>
    		</div>
    		<div id="newsDiscuss"></div>
    		<hr/>
    		<input type="button" value="获得HTML内容" onClick="getHTMLContent()" />
    		<input type="button" value="获得Text内容" onClick="getTextcontent()" />
    		<input type="button" value="改变正文内容" onClick="changeContent()" />
    		<input type="button" value="显示HTML内容" onClick="setHTMLContent()" />
    		<input type="button" value="显示Text内容" onClick="setTextContent()" />
    		<script type="text/javascript"> //获取元素的HTML内容 function getHTMLContent() { console.log("<div>中的HTML内容如下：" + $("#newsContent").html()); } //获取元素的文本内容 function getTextcontent() { console.log("<div>中的text内容如下：" + $("#newsContent").text()); } //根据元素在集合中的位置不同，所赋的值也不同 function changeContent() { $("p").html(function(index, htmlCode) { switch(index) { case 0: return "<h1>" + htmlCode + "<h1/>"; case 1: return "<h2>" + htmlCode + "<h2/>"; } }); } //设置元素的HTML内容 function setHTMLContent() { $("#newsDiscuss").html("<hr/>补充如下：Mall全称Shopping Mall（大型购物中心），属于一种新型的复合型商业。"); } //设置元素的文本内容 function setTextContent() { $("#newsDiscuss").text("<hr/>补充如下：Mall全称Shopping Mall（大型购物中心），属于一种新型的复合型商业。"); } </script>
    	</body>
    
    </html>

![在这里插入图片描述][20191001222553798.png]  
**3. val()方法：**  
val()方法用于设置或获取表单元素的值，包括文本框、下拉列表、单选框和复选框等元素。当元素允许多选时，返回一个包含被选项的数组。val()方法的语法格式如下：

val()
    val(newValue)
    val(arrayValue)
    val(function(index, oldValue))

*  无参方法用于返回所匹配的表单元素的value
 *  有参方法用于设定所匹配的表单元素的value
 *  newValue：表示将所匹配的表单元素的value值设定为newValue
 *  function(index, oldValue)：表示将函数的返回值，index表示当前元素在集合中的索引位置，oldValue表示当前在修改之前的value值

示例：

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title>jQuery基本操作-内容操作</title>
    		<script type="text/javascript" src="js/jquery-1.x.js"> </script>
    	</head>
    
    	<body>
    		<div id="newsContent">
    			<p>中国的商业正处于一场正在进行时态的变革。</p>
    			<p>MALL时代新闻频道拥有中国购物,城市综合体,商业街区最全的商业信息。</p>
    		</div>
    		<div id="newsDiscuss">
    		</div>
    		<div>
    			<hr/>评论：<input type="text" value="请输入新闻评论" id="inputDiscuss" /> 颜色：
    			<select id="discussColor">
    				<option value="black">黑色</option>
    				<option value="red" selected>红色</option>
    				<option value="green">绿色</option>
    			</select>
    			大小：<input type="radio" name="discussSize" value="9pt">较小
    			<input type="radio" name="discussSize" value="12pt" checked>正常
    			<input type="radio" name="discussSize" value="16pt">较大
    		</div>
    		<hr/>
    		<input type="button" value="提交评论信息" onClick="submitNewsDiscuss()" />
    		<script type="text/javascript"> function submitNewsDiscuss() { var inputDiscuss = $("#inputDiscuss").val(); $("#newsDiscuss").html("<hr/>评论如下：" + inputDiscuss) .css("color", $("#discussColor").val()) .css("font-size", $("[name=discussSize]:checked").val()); } </script>
    	</body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

[20191001222553798.png]: /images/20210813/07c57ab468ac4ffebd18c041a53fe2a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/0c452eb126944c9db1fc8f214e8ee645.png