3.2.10: jQuery的DOM操作之设置和获取HTML、文本和值
2014-01-02 02:00
1006 查看
1. html()方法:
此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的html内容。
如果需要设置某元素的html代码,也可以使用该方法,不过需要传入一个参数:
2. text()方法:
次方法类似于JavaScript中的innerText属性,可以用来读取或者设置某个元素中的文本内容。
如果需要为某元素设置文本内容,那么需要传递一个参数:
3. val()方法:
此方法类似于JavaScript中的value属性,可以用来设置或获取元素的值。无论元素是文本框,下拉列表还是单选框,它都可以发回元素的值。如果元素为多选,则返回一个包含所有选择的值的数组。
通过上面的例子可以发现val()方法不仅能设置元素的值,还能获取元素的值。而且val()方法还有另外一个用处,就是它能使select,checkbox和radio相应的选项被选中,在表单操作中经常会用到。
该网页中的一些元素是默认选中的,可以通过val()方法来改变它们的选中项。
此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的html内容。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jQuery/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($("p").html()); }); </script> </head> <body> <p title="what kind of fruit do you like best?"><strong>你最喜欢的水果是?</strong></p> </body> </html>
如果需要设置某元素的html代码,也可以使用该方法,不过需要传入一个参数:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jQuery/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").html("<strong>你最喜欢的水果是?</strong>"); }); </script> </head> <body> <p title="what kind of fruit do you like best?"></p> </body> </html>
2. text()方法:
次方法类似于JavaScript中的innerText属性,可以用来读取或者设置某个元素中的文本内容。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jQuery/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($("p").text()); }); </script> </head> <body> <p title="what kind of fruit do you like best?"><strong>你最喜欢的水果是?</strong></p> </body> </html>
如果需要为某元素设置文本内容,那么需要传递一个参数:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jQuery/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").text("你最喜欢的水果是?"); }); </script> </head> <body> <p title="what kind of fruit do you like best?"></p> </body> </html>
3. val()方法:
此方法类似于JavaScript中的value属性,可以用来设置或获取元素的值。无论元素是文本框,下拉列表还是单选框,它都可以发回元素的值。如果元素为多选,则返回一个包含所有选择的值的数组。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jQuery/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#address").focus(function(){ var txt_value=$(this).val(); if(txt_value=="请输入邮箱地址"){ $(this).val(""); } }); $("#address").blur(function(){ var txt_value=$(this).val(); if(txt_value==""){ $(this).val("请输入邮箱地址"); } }); $("#pwd").focus(function(){ var txt_value=$(this).val(); if(txt_value=="请输入邮箱密码"){ $(this).val(""); } }); $("#pwd").blur(function(){ var txt_value=$(this).val(); if(txt_value==""){ $(this).val("请输入邮箱密码"); } }); }); </script> </head> <body> <input type="text" id="address" value="请输入邮箱地址" style="color:gray"><br> <input type="text" id="pwd" value="请输入邮箱密码" style="color:gray"><br> <input type="button" value="登录"> </body> </html>
通过上面的例子可以发现val()方法不仅能设置元素的值,还能获取元素的值。而且val()方法还有另外一个用处,就是它能使select,checkbox和radio相应的选项被选中,在表单操作中经常会用到。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jQuery/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ }); </script> </head> <body> <select id="single"> <option>选择1号</option> <option>选择2号</option> <option>选择3号</option> </select> <select id="multiple" multiple="multiple" style="height:130px"> <option selected="selected">选择1号</option> <option>选择2号</option> <option>选择3号</option> <option>选择4号</option> <option selected="selected">选择5号</option> </select> <br> <input type="checkbox" value="check1"/>多选1 <input type="checkbox" value="check2"/>多选2 <input type="checkbox" value="check3"/>多选3 <input type="checkbox" value="check4"/>多选4 <br> <input type="radio" value="radio1"/>单选1 <input type="radio" value="radio2"/>单选2 <input type="radio" value="radio3"/>单选3 </body> </html>
该网页中的一些元素是默认选中的,可以通过val()方法来改变它们的选中项。
<script type="text/javascript"> $(document).ready(function(){ $("#single").val("选择2号"); $("#multiple").val(["选择2号","选择3号"]); $(":checkbox").val(["check2","check3"]); $(":radio").val(["radio2"]); }); </script>效果如下:
相关文章推荐
- 3.2.9: jQuery的DOM操作之样式操作
- 3.2.8: jQuery的DOM操作之属性操作
- 3.2.7: jQuery的DOM操作之包裹节点
- 3.2.6: jQuery的DOM操作之替换节点
- 3.2.5: jQuery的DOM操作之复制节点
- 3.2.4: jQuery的DOM操作之删除节点
- 3.2.3: jQuery的DOM操作之插入节点
- 3.2.2: jQuery的DOM操作之创建节点
- 3.2.1: jQuery的DOM操作之查找节点
- Create a Flipping Awesome 3D Gallery with jQuery Flipping Gallery
- js/jQuery简单实现选项卡功能
- 快速解决jQuery与其他库冲突的方法介绍
- 使用简洁的jQuery方法实现隔行换色功能
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
- jQuery简单实现banner图片切换
- 使用jQuery快速解决input中placeholder值在ie中无法支持的问题
- Jquery 渲染表单
- jQuery Sizzle选择器(一)
- jQuery 源码基本框架
- 说说JSON和JSONP,也许你会豁然开朗,含jQuery用例