- 浏览: 2286914 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (357)
- J2EE (49)
- JavaScript (40)
- Spring (19)
- Struts (5)
- CSS (8)
- Hibernate (16)
- Java (67)
- DWR (4)
- JSON (3)
- XFIRE (1)
- Tomcat (1)
- Ant (2)
- 设计模式 (2)
- 经典收藏 (2)
- JSP (10)
- Linux (0)
- WebLogic (11)
- myeclipse (13)
- Buffalo (4)
- 文件上传相关 (1)
- oracle (33)
- html (6)
- JSTL (3)
- SVN (2)
- GIT (1)
- 孙卫琴(Java网络编程精解) (1)
- DOM4J (2)
- Swing (1)
- AJAX (1)
- Eclipse (5)
- 日志组件 (3)
- PowerDesigner (1)
- Jquery (22)
- IT技术开发相关网址 (1)
- Nutz (1)
- 其它 (1)
- Velocity (3)
- WebService (1)
- MySql (2)
- Android (1)
- Maven (2)
- Quartz (11)
- Lucene (1)
- springsource (1)
- Junit (1)
- Activiti (0)
最新评论
-
yzlseu:
拼凑,没有营养
Activiti进阶—分配组任务 -
zhangsenhao:
非常赞!代码很清楚
SpringMVC3.0+MyIbatis3.0(分页示例) -
xiamw2000:
分页写得不对,应该是 : order by ${orderNa ...
SpringMVC3.0+MyIbatis3.0(分页示例) -
sheertewtw:
...
SpringMVC:上传与下载 -
kingtoon:
...
XSS之xssprotect
参考资料
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当中用法:
1 文本框:
2 文本域:
3 下拉框:
4 文件框:
5 按钮:
特殊情况:
6 单选框:
jQuery获取方式如下:
7 多复选框:
jQuery获取方式如下:
8 多下拉框
jQuery获取方式如下:
二 text()适合的页面非input元素如下
在jQuery当中用法:
对于下拉框:
text顾名思义:取得页面元素中的纯文本值,不包含html标签
三 html()适合的页面非input元素如下
在jQuery当中用法:
html获取元素内的所有的内容,包含标签,文本等
以下是一个小示例
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 ="<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>
发表评论
-
jQuery图表(jqPlot,Highcharts)
2012-05-18 00:48 23546jQuery图表在http://www.oschina.net ... -
jQuery之Ztree
2011-10-19 17:14 17579参考资料 1 spring+struts2+hibernate ... -
jQuery之弹出层(用于提示)
2011-10-19 10:26 2287参考了权威指南的部分代码 实现效果:单击按钮显示层,在单击就 ... -
jQuery之get(txt,xml,json二点注意事项)
2011-10-18 14:42 5707参考资料 1 jQuery ajax - get() 方法 h ... -
jQuery之load
2011-10-17 15:33 7771参考资料 1 jQuery ajax - load() 方法 ... -
jQuery之ID选择器
2011-08-23 15:25 9897参考资料 强烈推荐:张子秋 从零开始学习jQuery (二) ... -
jQuery之effect(效果)
2011-08-23 14:59 2606参考资料 从零开始学习jQuery (7) jQuery动画- ... -
jQuery之css
2011-08-23 13:54 1623jQuery W3C文档 http://www.w3schoo ... -
jQuery之select
2011-08-22 16:39 2354话不多说,详见代码吧 网页代码 <div style ... -
jQuery之实战(checkbox,table)
2011-08-19 16:22 3819实现功能如下:参考图片 1 页面加载时效果 2 全选效果 ... -
jQuery之table(隔行变色)
2011-08-19 15:52 2774页面代码如下: <table style=&quo ... -
jQuery之checkbox(复选框)
2011-08-18 17:06 2101业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项 ... -
jQuery之radio(单选)
2011-08-18 15:41 2459页面代码如下: <inpu ... -
jQuery之ID选择器
2011-08-18 13:58 16参考资料 强烈推荐:张子秋 从零开始学习jQuery (二) ... -
jQuery之jqzoom(图片放大镜插件)
2011-08-18 11:07 19731参考资料 1 基于jQuery开发的图片放大镜插件 - 淘宝网 ... -
jQuery之DOM
2011-08-17 14:45 1475参考资料 1 跳蚤的小窝:)jQuery对象和DOM对象【jQ ... -
jQuery之入门(ready)
2011-08-17 11:46 2115参考资料 1 jquery $(document).ready ... -
jQuery与Java实现图片的剪切
2011-08-05 15:10 30498一 参考资料 1 jquery Jcrop 头像,logo截图 ... -
jQueryAPI 中文版及相关参考资料
2010-12-24 12:52 2042转载: http://www.css88.com/catego ... -
jQuery对象和DOM对象【jQuery开发注意点(一)】
2010-12-23 16:45 2660转载:jQuery对象和DOM对象【jQuery开发注意点(一 ...
相关推荐
jQuery 获取和设置 Select 选择的 Text 和 Value jQuery 获取 Select 选择的 Text 和 Value 是一种常见的操作,例如在表单提交前获取用户选择的选项,或者在页面加载时根据服务器端的数据设置选择的选项。本文将...
接下来,我们来看jQuery的`get`方法,它是jQuery的Ajax方法之一,用于向服务器发送异步请求。当我们需要将文本框的内容传递给后端进行处理时,可以使用这个方法。`get`方法的基本语法是: ```javascript $.get(url,...
在本实例中,我们主要探讨的是如何利用JQuery与C# .NET框架相结合,实现一个简单的异步功能,即在用户界面中验证用户名是否已经存在。这个实例是基于Visual Studio 2008开发环境,涉及到的技术栈包括前端的HTML、CSS...
text( [val] ) 值 val( [val] ) CSS CSS css(name) css(properties) css(name, value) 位置 offset() position() scrollTop( [val] ) scrollLeft( [val] ) 尺寸 height( [val] ) width( [val] ) ...
2. **内容操作**: `html()`, `text()`, `val()`用于获取或设置元素的内容、文本或表单值。 3. **DOM遍历**: `parent()`, `children()`, `siblings()`, `next()`, `prev()`等方法帮助遍历DOM结构。 4. **DOM插入**:...
- **DOM操作**:`append()`, `prepend()`, `before()`, `after()`, `html()`, `text()`, `val()`等方法用于操作元素内容和结构。 - **事件处理**:`on()`, `off()`, `trigger()`, `bind()`, `unbind()`等用于绑定、...
1、jquery获取当前选中select的text值 var checkText=$(“#slc1”).find(“option:selected”).text(); 2、jquery获取当前选中select的value值 var checkValue=$(“#slc1”).val(); 3、jquery获取当前选中select的...
`.html()`, `.text()`, `.val()`等方法用于获取或设置元素的内容。例如,`$('p').html('新的文本')` 可以将所有段落元素的HTML内容替换为“新的文本”。 事件处理在jQuery中同样简单。`.click()`, `.change()`, `....
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的`$.ajax()`或者简化的`$.get()`、`$.post()`函数可以轻松实现异步数据交互,无需页面刷新。 5. **自定义插件开发**:jQuery鼓励开发者创建自己的插件,以便复用代码和分享给其他开发者。这个插件就是基于...
jQuery 提供了一套完整的DOM操作API,包括`append()`, `prepend()`, `before()`, `after()`, `html()`, `text()`, `val()`等方法,可以方便地进行元素的插入、删除和修改。 ### 4. 事件处理 jQuery 的事件处理方式...
2. DOM操作:通过`$()`函数可以创建jQuery对象,然后使用`.html()`, `.text()`, `.attr()`, `.val()`等方法来读取或修改元素的内容、属性和值。 3. 链式操作:jQuery的方法返回的都是jQuery对象,因此可以进行链式...
可以使用`html()`、`text()`和`val()`方法来设置或获取元素的HTML内容、文本内容和值。`append()`、`prepend()`用于在元素内部添加内容,而`remove()`则可以移除元素。 **三、事件处理** jQuery提供了一套统一的...
4. **同名函数实现set和get**:许多jQuery方法如`html()`, `text()`, `height()`, `width()`, `val()`等,既可读取属性值(get),又可设置属性值(set)。例如,`$("#msg").html()`用于获取HTML内容,`$("#msg")....
jQuery获取Select选择的Text和Value: 代码如下: $(“#select_id”).change(function(){//code…}); //为Select添加事件,当选择其中一项时触发 var checkText=$(“#select_id”).find(“option:selected”).text(); ...
$.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( ) ...
当你需要访问或修改元素内容时,可以使用 `.html()`, `.text()`, 或 `.val()` 方法。 ### 三、选择器 jQuery 支持多种 CSS 选择器,如标签选择器 (`div`), 类选择器 (`.class`), ID 选择器 (`#id`) 等。此外,...
3. **内容操作(Content Manipulation)**:`.html()`, `.text()`, `.val()`分别用于获取或设置元素的HTML内容、文本内容和表单值。 三、jQuery高级应用 1. **Ajax操作(Ajax Handling)**:`.ajax()`, `.get()`, ...
jQuery提供了一系列方法进行DOM操作,如`append()`用于在元素内部添加内容,`prepend()`在元素内部开头添加内容,`remove()`删除元素,`clone()`复制元素,以及`html()`, `text()`, `val()`等用于获取或设置元素的...