青岛专业制作网站的公司,天都城网站建设,西昌市住房与城乡建设厅网站,推广普通话主题班会前面的话 在javascript中#xff0c;描述元素内容有5个属性#xff0c;分别是innerHTML、outerHTML、innerText、outerText和textContent。这5个属性各自有各自的功能#xff0c;且兼容性不同。jQuery针对这样的处理提供了3个便捷的方法#xff0c;分别是#xff1a;html(…前面的话 在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 classtest
divDemonstration Box/div
/div
div classtest
div123/div
/div
script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
script
// divDemonstration Box/div
console.log($(.test).html());
/script 【2】html(htmlString) html(htmlString)方法设置每一个匹配元素的html内容这些元素中的任何内容会完全被新的内容取代。此外用新的内容替换这些元素前jQuery从子元素删除其他结构如数据和事件处理程序这样可以防止内存溢出 div classdemo-container
div classdemo-boxDemonstration Box/div
/div
script srchttp://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 classdemo-container123/div
script srchttp://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 idtest value123
script srchttp://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 idtestThis is a isimple/i document/p
script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
script
//This is a simple document
console.log($(#test).text());
/script div1/div
div2/div
script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
script
//12
console.log($(div).text());
/script 【2】text(textString) text(textString)用来设置匹配元素集合中每个元素的文本内容为指定的文本内容 p idtestThis is a isimple/i document/p
script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
script
$(#test).text(i123/i);
//i123/i
console.log($(#test).text());
/script 【3】text(function(index, text)) text(function(index, text))方法通过使用一个函数来设置文本内容该函数接收元素的索引位置和文本值作为参数返回设置的文本内容 p idtestThis is a isimple/i document/p
script srchttp://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 srchttp://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 idtest1 value123
script idtest2
var a 1;
/script
script srchttp://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 idtest valuetext
script srchttp://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()方法主要用于获取表单元素的值比如inputselect和textarea。对 select multiplemultiple元素val()方法返回一个包含每个选择项的数组如果没有选择性被选中它返回null textarea idtest11/textarea
input idtest2 value2
select idtest3
option3/option
/select
script srchttp://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 idtest value2
button idbtn按钮/button
script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
script
btn.onclick function(){
var value $(#test).val();
$(#test).val(测试 value)
}
/script stylewidth: 100%; height: 40px; srchttps://demo.xiaohuochai.site/jquery/content/c1.html frameborder0 width320 height240
val(function(index, value)) val()方法可以接受一个函数作为参数函数中的this指向当前元素。接收的集合中的元素旧的值作为参数的索引位置返回设置的值 input idtest value2
button idbtn按钮/button
script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
script
btn.onclick function(){
$(#test).val(function(index,value){
return 测试 index value;
})
}
/script stylewidth: 100%; height: 40px; srchttps://demo.xiaohuochai.site/jquery/content/c2.html frameborder0 width320 height240 总结 html()、text()、val()三种方法都是用来读取选定元素的内容html()是用来读取元素的html内容text()用来读取元素的纯文本内容val()是用来读取表单元素的value值。其中html()和text()方法不能使用在表单元素上而val()只能使用在表单元素上 html()和val()方法使用在多个元素上时只读取第一个元素而text()方法应用在多个元素上时将会读取所有选中元素的文本内容 html(htmlString)、text(textString)和val(value)三种方法都是用来替换选中元素的内容如果三个方法同时运用在多个元素上时那么将会替换所有选中元素的内容 html()、text()、val()都可以使用回调函数的返回值来动态改变多个元素的内容
更多专业前端知识请上
【猿2048】www.mk2048.com
