jQuery之get(val,text,html)

最新推荐文章于 2023-08-24 23:39:51 发布

天涯在身边

最新推荐文章于 2023-08-24 23:39:51 发布

阅读量451

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery 文章标签： jquery val text html ViewUI

本文链接：https://blog.youkuaiyun.com/liuzidong_liuzidong/article/details/84003826

Jquery 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了jQuery中val、text与html三个方法的使用场景与区别，包括适用于不同类型的输入元素（如文本框、单选框等）及非输入元素，并通过实例演示了如何在实际网页开发中应用这些方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考资料
1 jquery中，html、val与text三者属性取值的联系与区别
[url]http://www.cnblogs.com/CZy5168/archive/2010/01/01/1637416.html[/url]
2 jquery中text val html的差别
[url]http://www.2cto.com/kf/201107/97116.html[/url]
3 JQuery中的html(),text(),val()区别
[url]http://blog.youkuaiyun.com/ystyaoshengting/article/details/6698149[/url]
4 JQuery中text()、html()和val()的区别
[url]http://www.cnblogs.com/scy251147/archive/2010/08/10/1796476.html[/url]
参考资料上也说了很多,不再重复了
我总结如下：
一 val()适合的页面的input元素如下：
在jQuery当中用法：

$("#name").val()

1 文本框:

<input type="text" id="name"/>

2 文本域:

<textarea  id="textArea"/>

3 下拉框:


         <select id="address">
        	 <option value="0">北京</option>
        	 <option value="1">成都</option>
        	 <option value="2">昆明</option>
           </select>

4 文件框:

<input type="file" name="file" id="file"/>

5 按钮:

<input type="button" id="bt" value="中国"/>

[b]特殊情况：[/b]
6 单选框:


<input type="radio" name="sex"  value="0" checked/>男
<input type="radio" name="sex"  value="1" />女
<input type="radio" name="sex"  value="2" />人妖

jQuery获取方式如下：


//$('input[type=radio]:checked').val();
//$('input[type=radio][name=sex]:checked').val();
//$('input[type=radio][name=sex][checked]').val();
//$('input[type=radio][@name=sex][checked]').val();		//$('input[type=radio]@name=sex]:checked').val();					
$(':radio[name=sex]:checked').val();

7 多复选框:


<input type="checkbox" name="love" value="电影"/>电影
<input type="checkbox" name="love" value="图书"/>图书
<input type="checkbox" name="love" value="学习" checked/>学习
 <input type="checkbox" name="love" value="编程"/>编程

jQuery获取方式如下：


 var arr = [];  
 // $('input[type=checkbox][name=love]:checked').each(function()  
 //所有为checked状态的多选框
 $(':checkbox[name=love]:checked').each(function()   
 {  
	arr.push(this.value);  
  });  
 //arr.toString();

8 多下拉框


<select id="address2" multiple >
      <option value="0">北京</option>
      <option value="1">成都</option>
       <option value="2">昆明</option>
</select>

jQuery获取方式如下：


var arr = [];      					
 $('#address2>option:selected').each(function()    
 {  
	//直接用this可提高速度,如去掉上面的：selected就可用下面这种方式
	 //if(this.selected == true){
		arr.push(this.value + "," + this.text);
	  //}  
 });

二 text()适合的页面非input元素如下
在jQuery当中用法：

$("#address").text()

对于下拉框：

 var checkText=$("#select_id").find("option:selected").text();

[color=red]text顾名思义:取得页面元素中的纯文本值,不包含html标签[/color]
三 html()适合的页面非input元素如下
在jQuery当中用法：

$("#address").html()

[color=red]html获取元素内的所有的内容,包含标签,文本等[/color]
以下是一个小示例 :lol:


<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery获取元素写法</title>       
		<link rel="stylesheet" href="style/mystyle.css" type="text/css">
        <script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
		<script type="text/javascript" >

			$(function(){

			    $('#get1').click(function(){
			    	alert($("#name").attr("id"));
					$("#message").html($("#name").val());   
			    });

			    $('#get2').click(function(){					 
					$("#message").html($("#textArea").val());
			    });

			    $('#get3').click(function(){					 
					//$("#message").html($('input[type=radio]:checked').val());
					//$("#message").html($('input[type=radio][name=sex]:checked').val());
					//$("#message").html($('input[type=radio][name=sex][checked]').val());
					//$("#message").html($('input[type=radio][@name=sex][checked]').val());
					//$("#message").html($('input[type=radio][@name=sex]:checked').val());		

					$("#message").html($(':radio[name=sex]:checked').val());
			    });

			     $('#get4').click(function(){

			        var arr = [];  
				   // $('input[type=checkbox][name=love]:checked').each(function()   //所有为checked状态的多选框
				    $(':checkbox[name=love]:checked').each(function()   
				    { 

				        arr.push(this.value);  
				    });  
				    //arr.toString();			     	
					$("#message").html(arr.toString());
			    });

			    $('#get5').click(function(){	
					$("#message").html($('#address').val());
			    });

			    $('#get6').click(function(){	

			        //alert($("#address2").val());
					var arr = [];      					
				    $('#address2>option:selected').each(function()    
				    {  
				    	//直接用this可提高速度
					   //if(this.selected == true){
					    	arr.push(this.value + "," + this.text);
					    //}  
				    });				   				        	
					$("#message").html(arr.toString());
			    });

			    $('#get7').click(function(){	
			     	var oRdoValue = $("#out1").is (":checked")?"程序员":"会计师"; 
					$("#message").html(oRdoValue);
			    });

			     $('#get8').click(function(){	
			     	var v = $("#file").attr("value"); 			     	
					$("#message").html(v);
			    });

			    $('#get9').click(function(){	
			     	var v = $("#bt").attr("value"); 			     	
					$("#message").html(v);
			    });

			    $('#get10').click(function(){	
			     	var v = $("#div1").text(); 				     		     	
					$("#message").html(v);
			    });

			     $('#get11').click(function(){	
			     	//var v = $("#div1").html();
			     	//alert( $("#div1").val());
			     	var v = $("#div1").text(); 		
			     	//显示原生的html元素,不进行解析
			     	document.getElementById("message").innerHTML ="<h1>" +v + "</h1>";		
			    });

			});	

		</script>

    </head>
    <body>
       <h1>获取页面元素值</h1>
       <h2><div id="message" style="color:red"></div></h2>       
        文本框:  <input type="text" id="name"/> <input type="button" id="get1" value="获取文本框的值" /> <br>
        文本域:  <textarea  id="textArea" cols="17" rows="2"/></textarea><input type="button" id="get2" value="获取文本域的值" /><br>
        单选:  <input type="radio" name="sex"  value="0" checked/>男
             <input type="radio" name="sex"  value="1" />女
             <input type="radio" name="sex"  value="2" />人妖
             <input type="button" id="get3" value="获取单选框的值" /><br>       
        多选: <input type="checkbox" name="love" value="电影"/>电影
            <input type="checkbox" name="love" value="图书"/>图书
            <input type="checkbox" name="love" value="学习" checked/>学习
            <input type="checkbox" name="love" value="编程"/>编程
            <input type="button" id="get4" value="获取多选框的值" /><br>  
        下拉:<select id="address">
        	 <option value="0">北京</option>
        	 <option value="1">成都</option>
        	 <option value="2">昆明</option>
           </select>
           <input type="button" id="get5" value="获取下拉框的值" /><br> 
       下拉多选:<br><select id="address2" multiple >
        	 <option value="0">北京</option>
        	 <option value="1">成都</option>
        	 <option value="2">昆明</option>
           </select>
           <input type="button" id="get6" value="获取下拉框多选的值" /><br> 
       单选二:<input type="radio" name="out"  id="out1" value="0" checked/>程序员
             <input type="radio" name="out" id="out2" value="1" />会计师            
             <input type="button" id="get7" value="获取单选二的值" /><br>  
       文件框:  <input type="file" name="file" id="file"/>            
             <input type="button" id="get8" value="获取文件框的值" /><br>  
      按钮: <input type="button" id="bt" value="中国"/>
           <input type="button" id="get9" value="获取文件框的值" /><br>
      DIV: <div id="div1" style="color:green;"><h1>得陇望蜀</h1></div>
           <input type="button" id="get10" value="获取DIV的文本值" /><input type="button" id="get11" value="获取DIV的HTML" /><br>
        <p><a href="index.jsp">返回</a></p>
    </body>
</html>