在前面的知识中,我们有提到一个text()方法用来获取文本,其实,在jQuery中,获取HTML和文本的方法有很多,下面依次演示这些方法。
在开始操作前,我们先在html中添加如下代码,后期所有的操作都在此基础上进行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.js"></script> </head> <body> <div id="one">北京你好</div> <div id="two"><span>上海也很好</span>,风景秀丽<a>重庆</a></div> <input type="text" id="username" value="tom" /> </body> </html>
html()
在JavaScript中,可以通过innerHTML方法获取元素包含的具体内容。
$(function(){ console.log(document.getElementById(\'one\').innerHTML); console.log(document.getElementById("two").innerHTML); })
从上面的例子中我们可以看到,innerHTML会把节点包含的【文本 和 元素标签内容】都给抓取出来,在jQuery中,也有一个类似的方法,可以获取节点包含的内容,那就是html()。
$(function(){ console.log($(\'#one\').html()); console.log($(\'#two\').html()); })
目前看起来,两个方法是一样的,但是其实网上有很多地方有提出innerHTML对于像table类的元素标签不起作用,还会报错,具体的我没有研究,下次应该会看一下。
很显然,html()除了可以获取节点内容外,还可以设置节点内容。
$(function(){ $(\'#one\').html("天津你也好"); $("#two").html("<p><a href=\'http://www.chongqing.com\'>重庆</a>很好</p>"); })
当我们向html()方法中传递参数的时候,这个参数就会成为匹配元素的内容,这个参数可以说是纯文本,也可以是html标签内容。
text()
在JavaScript中,可以通过innerText方法,获取元素的纯文本内容。
$(function(){ console.log(document.getElementById(\'one\').innerText); console.log(document.getElementById("two").innerText); })
在jQuery中,也有一个类似的方法,可以获取纯文本,那就是text(),这个方法只对文本起作用,在获取节点的内容时,会把html标签删除,只保留文本内容。
$(function(){ console.log($("#one").text()); console.log($("#two").text()); })
这两个方法在获取节点内容的时候,效果几乎相同,但是需要特别注意的是,在《锋利的jQuery》一书中,提到innerText在Firefox浏览器中并不能运行,但我试验的时候是没有报错,而是正常运行,不知道是不是版本的原因。
自然,text()方法还可以用来设置节点内容。
$(function(){ $("#one").text("百度"); $("#two").text("<a href=\'http://www.baidu.com\'>百度</a>"); })
也就是说,即使在内容里添加了html标签,也会被当做纯文本解析。
val()
val()类似于JavaScript中的value属性,可以用来设置和获取元素的值,无论元素是文本框、下拉列表还是单选框,它都可以返回元素的值,如果元素为多选,则返回一个包含所有选择的值的数组。
$(function(){ console.log($("#username").val()); })
$(function(){ $("#username").val(\'jack\'); console.log($("#username").val()); })