当前位置:K88软件开发文章中心编程语言JavaScriptJS01 → 文章内容

jQuery的html(),val(),text(),attr(),prop()方法

减小字体 增大字体 作者:佚名  来源:网上搜集  发布时间:2019-1-4 8:48:25

-->

对于新手来说,刚开始学习的时候会对jQuery的html(),val(),text(),attr(),prop()获取属性的方法模拟两口,分不出他们的区别,我在这里简单的介绍区分下,希望能给大家带来点帮助吧。

1、html()方法,类似于javascript众的InnerHtml属性,可以用来读取或者设置某个元素中的HTML内容。有两种用法,不带参数的,它表示提取里面的html代码,带参数的表示设置其html代码,传的是string或返回string的函数。
例:
  $(‘#div1’).html()  返回:<input id="input1" name="name" type="text" value="dd" >Pl</input>
<p><b>Hello</b> fine</p>
  $(‘#div1’).html(‘<h1>H1</h1>’)  设置div的内容为html代码'<h1>H1</h1>’;

2、val()方法,设置或提取具有value属性的html代码,也支持select或其它(可自己测试)。与html类型,带参数表示设置,可用传入string或返回string的函数。
例:
$(‘#input1’).val()  返回: dd
$(‘#select1’).val() 返回: 选择了selected的Array数组
$(‘#input1’).val(‘ss’)  设置id为input1的value为ss

3、text()方法,类似于javascript众的InnerText方法,可以用来读取或者设置某个元素的文本内容 。使用方法与val类似。

4、attr()方法,来获取和设置元素的各种属性。带一个string参数的是返回这个属性的值,带两个参数的是设置这个属性的值。也可直接使用json来设置其属性,这样方便多了。
例:
$(‘#input1’).attr(‘value’)  返回 dd
$(‘#input1’).attr(‘value’,’新’)  设置其value为新
$(‘#input1′).attr({name:’new’,value:’新’}) 设置基name为new,value为新

5、prop()方法,返回值是标准属性:true/false,而不会跟attr()方法一样返回"disabled"或者""。在某些时候,比如访问input的disabled属性的时候,会有些问题,在有些浏览器里,只要写了disabled属性就可以,有些则要写disabled="disabled"。所以从1.6版本开始,jQuery提供新的方法prop()来获取这些属性啦。
那么,哪行属性应该用attr(),哪行应该用prop()访问呢?
第一个原则:只添加属性名称该属性就会生效使用prop();
第二个原则:只存在true/false的属性应该使用prop()。
按照官方说明,如果是设置disabled和checked这些属性,应该使用prop()方法,而不是使用attr()方法。

k88编程网

#jQuery%E7%9A%84html%28%29%2Cval%28%29%2Ctext%28%29%2Cattr%28%29%2Cprop%28%29%E6%96%B9%E6%B3%95.html”>k88编程网/jQuery%E7%9A%84html%28%29%2Cval%28%29%2Ctext%28%29%2Cattr%28%29%2Cprop%28%29%E6%96%B9%E6%B3%95.html


jQuery的html(),val(),text(),attr(),prop()方法