浅谈jquery中,html、val与text三者属性取值的联系与区别

标签: jquery html val | 发表时间:2013-06-25 19:33 | 作者:gengyudan
出处:http://blog.csdn.net
学了一段时间的Jquery了但是我老是分不太清html、val、text这三者之间的属性以及之间的联系与区别,下面我就给大家举例一些简单的来区分jquery这三者之间的关系

首先,html属性中有两个方法,一个有参,一个无参

      1. 无参html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String

     例子:

            html页面代码:<div><p>Hello</p></div>

           jquery代码:$("div").html();

          结果:Hello

     2.有参html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象

        html页面代码:<div></div>

        jquery代码:$("div").html("<p>Nice to meet you</p>");

        结果:[ <div><p> Nice to meet you</p></div> ]      

其次,text属性中有两个方法,一个有参,一个无参

        1. 无参text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String

         例子:

            html页面代码:<p><b>Hello</b> fine</p>

                                  <p>Thank you!</p>

           jquery代码:$("p").text();

           结果:HellofineThankyou!

         2.有参text(val):设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象

           html页面代码:<p>Test Paragraph.</p>

          jquery代码:$("p").text("<b>Some</b> new text.");

          结果:[ <p><b>Some</b> new text.</p> ]

最后,val()属性中也有两个方法,一个有参,一个无参。

       1.无参val():获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。

                           返回的是一个String、 array

        例子:

            html页面代码 :

    <p></p><br/>
      <select id="single">
      <option>Single</option>
     <option>Single2</option>
    </select>
    <select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select> 

 jquery代码:$("p").append( "<b>Single:</b> "   + $("#single").val() + " <b>Multiple:</b> " + $("#multiple").val().join(", "));

 

       结果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]

     

         2.有参val(val):设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为check,select,radio元件赋值,返回一个jquery对象

 

           html页面代码:<input type="text"/>

          jquery代码:$("input").val("hello world!");

          结果:hello world! 

 

一 val()适合的页面的input元素如下:
在jQuery当中用法:
$("#name").val() 一起jquery,17jquery 

1 文本框: 
<input type="text" id="name"/>     

内容来自17jquery


2 文本域: 
<textarea  id="textArea"/> 17jquery.com 

3 下拉框:
         <select id="address">
        	 <option value="0">北京</option>
        	 <option value="1">成都</option>
        	 <option value="2">昆明</option>
           </select>
 一起jquery,17jquery 

4 文件框: 
<input type="file" name="file" id="file"/> 17jquery.com 

5 按钮:    
<input type="button" id="bt" value="中国"/> 内容来自17jquery 

特殊情况:
6 单选框:
<input type="radio" name="sex"  value="0" checked/>男
<input type="radio" name="sex"  value="1" />女
<input type="radio" name="sex"  value="2" />人妖
     

17jquery.com


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();
 17jquery.com 

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,17jquery

jQuery获取方式如下:
 var arr = [];  
 // $('input[type=checkbox][name=love]:checked').each(function()  
 //所有为checked状态的多选框
 $(':checkbox[name=love]:checked').each(function()   
 {  
	arr.push(this.value);  
  });  
 //arr.toString();	
     
一起jquery,17jquery

8 多下拉框
<select id="address2" multiple >
      <option value="0">北京</option>
      <option value="1">石家庄</option>
       <option value="2">保定</option>
</select>
     
17jquery.com

jQuery获取方式如下:
var arr = [];      					
 $('#address2>option:selected').each(function()    
 {  
	//直接用this可提高速度,如去掉上面的:selected就可用下面这种方式
	 //if(this.selected == true){
		arr.push(this.value + "," + this.text);
作者:gengyudan 发表于2013-6-25 19:33:45 原文链接
阅读:118 评论:0 查看评论

相关 [jquery html val] 推荐:

浅谈jquery中,html、val与text三者属性取值的联系与区别

- - CSDN博客Web前端推荐文章
学了一段时间的Jquery了但是我老是分不太清html、val、text这三者之间的属性以及之间的联系与区别,下面我就给大家举例一些简单的来区分jquery这三者之间的关系. jquery中,html、val与text三者属性取值的联系与区别. 首先,html属性中有两个方法,一个有参,一个无参. 无参html():取得第一个匹配元素的html内容.

jQuery操作HTML元素

- - CSDN博客推荐文章
JQuery 获取、设置input的值$("#txtID").val();. JQuery 获取、设置label的值$("#labelID").text(); $("#labelID").html(buildName); . 获取一组radio被选中项的值. 获取select被选中项的文本. select下拉框的第二个元素为当前选中值.

nodejs上HTML分析利器node-jquery

- - 博客园_首页
      首先描述产生这篇随笔的场景:我需要获取项目在jenkins构建的最新Javascript Coverage显示在供管理层次查看的项目情况Report上,但是由于jenkins没有直接的API取得数据所需数据,所以我们只能从自建的容器发布Javascript Coverage数据API,供Report项目使用.

jQuery的html()函数和原生innerHTML属性比较

- - WebUI框架使用参考
不可否认jQuery是一个很犀利的工具,很容易让人对其产生依赖感. 不过好的工具不一定是最适合的解决方案,就跟漂亮的女人并一定适合做你老婆的道理是一样的. 本篇文章针对jQuery的html()函数和javascript原生innerHTML属性的优缺点做概要比较. innerHTML属性的优点. innerHTML是w3c制定的行业标准,几乎所有浏览器都做了支持;.

【外刊IT评论网】HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

- - 外刊IT评论网
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用. 这就是为什么在HTML5规范里增加了一个 自定义data属性,你可以拿它做很多有用的事情.

HTML 安全列表

- 火锅土豆 - 酷壳 - CoolShell.cn
下面这个网站罗列了,几乎所有的关于HTML 5 在各种主流浏览器上的安全问题,这些安全问题很有可能将会是黑客攻击你的网上的敲门砖,他们几乎都和Javascript都有关系,你就要好好注意了. IE6,7,8,9,和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中,可以让用户进行XSS(跨站脚本)攻击.

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言( 英文:HyperText Markup Language,HTML)是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全,超赞.

html嵌套规则

- - Web前端 - ITeye博客
转载: http://www.studyofnet.com/news/412.html. 一、HTML 标签包括 块级元素(block)、内嵌元素(inline). 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签:. 一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,下面这些标签都属于内嵌元素:.

Html 转换成PDF

- - 编程语言 - ITeye博客
最近在搞一个关于html转换为pdf的需求,网上找了很多,但是如果批量处理就会出现问题,最后找到了PD4ML,解决了我的问题. String urlstring = "file:///D:/债权转让及受让协议--魏然2014-08-16.html";. 需要在src目录下创建fonts文件夹,并且在文件夹中建立pd4fonts.properties ,配置文件中的内容如下.

HTML+CSS小结 - jessies

- - 博客园_首页
   结构   HTML        .    样式   CSS      .    行为   JavaScript(交互行为).    .    网页标题.    标题.