面前的语句

  在javascript中,讲述元素内容有5个属性,分别是innerHTML、outerHTML、innerText、outerText和textContent。这5独特性各自发生独家的作用,且兼容性不同。jQuery针对这样的处理提供了3独方便的艺术,分别是:html()、text()和val()。本文将详细介绍jQuery描述文本内容之就3只章程

 

html()

  html()方法类似于javascript中的innerHTML属性,用来博集合中率先只门当户对配元素的HTML内容要安装各一个匹配元素的html内容,具体产生3种用法:

【1】html()

  html()不招入值可以为此来获取集合中首先独门当户对配元素的HTML内容

  [注意]和innerHTML属性的题材同,IE8-浏览器会将装有标签转换成为雅写形式,且未分包空白文本节点;而其他浏览器虽然相返回

<div class="test">
    <div>Demonstration Box</div>
</div>
<div class="test">
    <div>123</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//'  <div>Demonstration Box</div>'
console.log($('.test').html());
</script>

【2】html(htmlString)

  html(htmlString)方法设置各一个匹配元素的html内容,这些要素被之另外内容会了让新的情取代。此外,用新的始末替换这些要素前,jQuery从子元素删除其他组织,如数据与事件处理程序,这样可以预防内存溢出

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//123
$('div.demo-container').html('123');
</script>

【3】html(function(index, oldhtml)) 

  html(function(index,
oldhtml))用来回到设置HTML内容的一个函数。接收元素的目录位置和因素原先的HTML作为参数。jQuery的调用这个函数之前见面清空元素,使用oldhtml参数引用先前之始末。在是函数中,this指为元素集合中之目前元素

<div class="demo-container">123</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//1230
$('div.demo-container').html(function(index,oldhtml) {
  return oldhtml + index;
});
</script>

下限制

  及innerHTML属性相同,html()方法就能够下被对签,单标签无效

<input id="test" value="123">
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
console.log(test.innerHTML)//''
console.log($('#test').html())//''
</script>

 

text()

  text()方法类似于javascript中的innerText属性,得到匹配元素集合中每个元素的文书内容结合,包括他们的后,或设置匹配元素集合中每个元素的文件内容吧指定的文件内容,具体有3种植用法:

【1】text()

  text()方法赢得匹配元素集合中每个元素的联合文本,包括他们的后生

<p id="test">This is a <i>simple</i> document</p>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//This is a simple document
console.log($('#test').text());
</script>

<div>1</div>
<div>2</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//12
console.log($('div').text());
</script>

【2】text(textString)

  text(textString)用来安匹配元素集合中每个元素的公文内容吗指定的文件内容

<p id="test">This is a <i>simple</i> document</p>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#test').text('<i>123</i>');
//'<i>123</i>'
console.log($('#test').text());
</script>

【3】text(function(index, text))

  text(function(index,
text))方法通过动用一个函数来装文本内容,该函数接收元素的目录位置与文本值作为参数,返回设置的文本内容

<p id="test">This is a <i>simple</i> document</p>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#test').text(function(index, text){
    return text + index;
});
//'This is a simple document0'
console.log($('#test').text());
</script>

  该方法常用于数据初始化,使用html()方法为可以实现同效果

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('ul li').text(function(index, text){
    return '内容' + (index+1);
});
//'内容1内容2内容3'
console.log($('li').text());
//'内容1'
console.log($('li').html());
</script>

动范围

  同innerText属性相同,text()方法无能够运用于input元素。在IE8-浏览器下,text()方法无可知动用以script元素上

  input元素可以用val()方法赢得或设置文本值;script元素可以以html()方法

<input id="test1" value="123">
<script id="test2">
var a = 1;
</script>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
console.log($('#test1').text());//''
//IE8-浏览器返回'',其他浏览器返回'var a = 1;'
console.log($('#test2').text());
console.log($('#test1').val());//'123'
console.log($('#test2').html());//'var a = 1;'
</script>

 

val()

  val()方法类似于javascript中之value属性,主要是用于拍卖表单元素的价,用于获取匹配的素集合中率先单要素的此时此刻值或设置匹配的元素集合中每个元素的价值

val()

  当val()方法没有参数时,表示收获元素的value值

<input id="test" value="text">
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
console.log($('#test').val());//'text'
</script>

  [注意]通过val()方法从textarea元素中得到的值是休带有回车(\r)字符的。但是如果该值是由此XHR传递让服务器的,回车(\r)字符会被封存(或者是让浏览器添加的,但是于原有数据被连无含有回车(\r))。可以以下的valHook方法解决是题材

$.valHooks.textarea = {
  get: function(elem){
    return elem.value.replace(/\r?\n/g,"\r\n");
  }
};

  val()方法主要用于获取表单元素的价,比如input,select和textarea。对
<select
multiple=”multiple”>元素,val()方法返回一个富含每个选择项之屡屡组,如果没有选择性被入选,它回到null

<textarea id="test1">1</textarea>
<input id="test2" value="2">
<select id="test3">
    <option>3</option>
</select>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
console.log($('#test1').val());//1
console.log($('#test2').val());//2
console.log($('#test3').val());//3
</script>

val(value)

  val(value)用来安表单元素的value值

<input id="test" value="2">
<button id="btn">按钮</button>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
btn.onclick = function(){
    var value = $('#test').val();
    $('#test').val('测试'+ value)
}
</script>

val(function(index, value))

  val()方法好承受一个函数作为参数,函数中之this指向当前元素。接收的集中的因素,旧的价当参数的目录位置,返回设置的价值

<input id="test" value="2">
<button id="btn">按钮</button>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
btn.onclick = function(){
    $('#test').val(function(index,value){
        return '测试'+index + value;
    })
}
</script>

 

总结

  html()、text()、val()三种方式都是因此来读取选定元素的情节;html()是故来读取元素的html内容,text()用来读取元素的纯文本内容,val()是因此来读取表单元素的value值。其中html()和text()方法无可知以以表单元素上,而val()只能采取在表单元素上

  html()和val()方法应用在多个要素上经常,只读博第一单元素;而text()方法应用在差不多只要素上不时,将会读取所有入选元素的公文内容

  html(htmlString)、text(textString)和val(value)三种植方式都是为此来替换选中元素的内容,如果三只章程以用在多独因素上时,那么用会晤交替所有入选元素的内容

  html()、text()、val()都可采取回调函数的回到值来动态改变多单因素的情节

相关文章

网站地图xml地图