`

jQuery之get(val,text,html)

jqueryvaltexthtml 
阅读更多
参考资料
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获取元素内的所有的内容,包含标签,文本等
以下是一个小示例 
<%@ 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之jqzoom(图片放大镜插件)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery get方法+一般处理程序处理文本框内容

    接下来，我们来看jQuery的`get`方法，它是jQuery的Ajax方法之一，用于向服务器发送异步请求。当我们需要将文本框的内容传递给后端进行处理时，可以使用这个方法。`get`方法的基本语法是： ```javascript $.get(url,...

    jQuery获取Select选择的Text和_Value

    jQuery 获取和设置 Select 选择的 Text 和 Value jQuery 获取 Select 选择的 Text 和 Value 是一种常见的操作，例如在表单提交前获取用户选择的选项，或者在页面加载时根据服务器端的数据设置选择的选项。本文将...

    JQuery简单实例(C#,HTML,.NET.JQUERY)(工程源码)

    在本实例中，我们主要探讨的是如何利用JQuery与C# .NET框架相结合，实现一个简单的异步功能，即在用户界面中验证用户名是否已经存在。这个实例是基于Visual Studio 2008开发环境，涉及到的技术栈包括前端的HTML、CSS...

    jQuery帮助文档

    text( [val] ) 值 val( [val] ) CSS CSS css(name) css(properties) css(name, value) 位置 offset() position() scrollTop( [val] ) scrollLeft( [val] ) 尺寸 height( [val] ) width( [val] ) ...

    jquery html文档

    2. **内容操作**: `html()`, `text()`, `val()`用于获取或设置元素的内容、文本或表单值。 3. **DOM遍历**: `parent()`, `children()`, `siblings()`, `next()`, `prev()`等方法帮助遍历DOM结构。 4. **DOM插入**:...

    jQuery应用技巧大全modified

    比如，`.html()`可以读取或设置元素的HTML内容，`.text()`处理文本内容，`.height()`和`.width()`处理元素尺寸，`.val()`处理表单输入框的值，`.click()`处理点击事件。这些方法的双重性使得代码更为简洁高效。 ...

    最新版JQuery-jquery-3.2.1.min.js

    - **DOM操作**：`append()`, `prepend()`, `before()`, `after()`, `html()`, `text()`, `val()`等方法用于操作元素内容和结构。 - **事件处理**：`on()`, `off()`, `trigger()`, `bind()`, `unbind()`等用于绑定、...

    jQuery操作select下拉框的text值和value值的方法

    1、jquery获取当前选中select的text值 var checkText=$(“#slc1”).find(“option:selected”).text(); 2、jquery获取当前选中select的value值 var checkValue=$(“#slc1”).val(); 3、jquery获取当前选中select的...

    jquery的jar包 入门基础

    `.html()`, `.text()`, `.val()`等方法用于获取或设置元素的内容。例如，`$('p').html('新的文本')` 可以将所有段落元素的HTML内容替换为“新的文本”。 事件处理在jQuery中同样简单。`.click()`, `.change()`, `....

    JQuery新版中文手册

    text([val|fn]) val([val|fn|arr]) CSS CSS css(name|pro|[,val|fn]) 位置 offset([coordinates]) position() scrollTop([val]) scrollLeft([val]) 尺寸 heigh([val|fn]) width([val|fn]) innerHeight...

    jquery插件库-jquery按钮控制text文本框商品数量增加或减少.zip

    jQuery的`$.ajax()`或者简化的`$.get()`、`$.post()`函数可以轻松实现异步数据交互，无需页面刷新。 5. **自定义插件开发**：jQuery鼓励开发者创建自己的插件，以便复用代码和分享给其他开发者。这个插件就是基于...

    jQuery1.4.1 小结

    jQuery 提供了一套完整的DOM操作API，包括`append()`, `prepend()`, `before()`, `after()`, `html()`, `text()`, `val()`等方法，可以方便地进行元素的插入、删除和修改。 ### 4. 事件处理 jQuery 的事件处理方式...

    jquery手册-jQuery1.3

    2. DOM操作：通过`$()`函数可以创建jQuery对象，然后使用`.html()`, `.text()`, `.attr()`, `.val()`等方法来读取或修改元素的内容、属性和值。 3. 链式操作：jQuery的方法返回的都是jQuery对象，因此可以进行链式...

    JQuery中文帮助文档

    可以使用`html()`、`text()`和`val()`方法来设置或获取元素的HTML内容、文本内容和值。`append()`、`prepend()`用于在元素内部添加内容，而`remove()`则可以移除元素。 **三、事件处理** jQuery提供了一套统一的...

    jQuery常见开发技巧详细整理

    4. **同名函数实现set和get**：许多jQuery方法如`html()`, `text()`, `height()`, `width()`, `val()`等，既可读取属性值（get），又可设置属性值（set）。例如，`$("#msg").html()`用于获取HTML内容，`$("#msg")....

    JQuery中对Select的option项的添加、删除、取值

    jQuery获取Select选择的Text和Value: 代码如下: $(“#select_id”).change(function(){//code…}); //为Select添加事件，当选择其中一项时触发 var checkText=$(“#select_id”).find(“option:selected”).text(); ...

    jQuery 1.5 API 中文版

    $.text( val ), .text( fn(index, html) ) Value str,arr.val( ) $.val( val ), .val( fn() ) CSS CSS str.css( name ) $.css( name, val ), .css( map ), .css( name, fn(index, val) ) Positioning obj.offset( ) ...

    jquery 中文使用说明

    当你需要访问或修改元素内容时，可以使用 `.html()`, `.text()`, 或 `.val()` 方法。 ### 三、选择器 jQuery 支持多种 CSS 选择器，如标签选择器 (`div`), 类选择器 (`.class`), ID 选择器 (`#id`) 等。此外，...

    jquery资料--jquery学习资料

    3. **内容操作（Content Manipulation）**：`.html()`, `.text()`, `.val()`分别用于获取或设置元素的HTML内容、文本内容和表单值。 三、jQuery高级应用 1. **Ajax操作（Ajax Handling）**：`.ajax()`, `.get()`, ...

    jquery-3.5.1.rar

    jQuery提供了一系列方法进行DOM操作，如`append()`用于在元素内部添加内容，`prepend()`在元素内部开头添加内容，`remove()`删除元素，`clone()`复制元素，以及`html()`, `text()`, `val()`等用于获取或设置元素的...

Magicbox
Global site tag (gtag.js) - Google Analytics