欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

jQuery之get(val,text,html)

程序员文章站 2022-06-10 09:38:30
...
参考资料
1 jquery中，html、val与text三者属性取值的联系与区别
http://www.cnblogs.com/CZy5168/archive/2010/01/01/1637416.html
2 jquery中text val html的差别
http://www.2cto.com/kf/201107/97116.html
3 JQuery中的html(),text(),val()区别
http://blog.csdn.net/ystyaoshengting/article/details/6698149
4 JQuery中text()、html()和val()的区别
http://www.cnblogs.com/scy251147/archive/2010/08/10/1796476.html
参考资料上也说了很多,不再重复了
我总结如下：
一 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="中国"/>

特殊情况：
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();

text顾名思义:取得页面元素中的纯文本值,不包含html标签
三  html()适合的页面非input元素如下
在jQuery当中用法：
$("#address").html()

html获取元素内的所有的内容,包含标签,文本等
以下是一个小示例jQuery之get(val,text,html) 博客分类： Jquery jqueryvaltexthtml 
<%@ 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 ="&lt;h1&gt;" +v + "&lt;/h1&gt;";		
			    });
			  	    
			});	
			
		</script>

    </head>
    <body>
       <h1>获取页面元素值</h1>
       <h2><div id="message" style="color:red"></div></h2>       
        文本框:  <input type="text" id="name"/>&nbsp;<input type="button" id="get1" value="获取文本框的值" />&nbsp;<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>
相关标签： jquery val text html

上一篇： 移动电商创业有什么好的选择？如意推名片电商成为行业风向标

下一篇： 智能名片代理如何选择？如意推、链脉、客来易助力创业

推荐阅读