jQuery属性--html([val|fn])、text([val|fn])和val([val|fn|arr])
html([val|fn])
概述
取得第一个匹配元素的html内容，这个函数不能用于XML文档。但可以用于XHTML文档。
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取
参数
val 用于设定HTML内容的值；function(index,html) 此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("p:eq(0)").click(function() { alert($(this).html()); }); $("p:eq(1)").click(function() { $(this).html("<a href='#'>第二个段落内容已换。<a>"); }); $("p:eq(2)").click(function() { $(this).html(function(){ return "简单一点就好！"; }); }); }) </script> </head> <body> <p><a>第一个段落。</a></p> <p>第二个段落。</p> <p>第三个段落。</p> </body> </html>
text([val|fn])
概述
取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效
参数
val 用于设置元素内容的文本。function(index,text) 此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("p:eq(0)").click(function() { alert($(this).text()); }); $("p:eq(1)").click(function() { $(this).text("<a href='#'>第二个段落内容已换。<a>"); }); $("p:eq(2)").click(function() { $(this).text(function(){ return "简单一点就好！"; }); }); }) </script> </head> <body> <p><a>第一个段落。</a></p> <p>第二个段落。</p> <p>第三个段落。</p> </body> </html>
val([val|fn|arr])
概述
获得匹配元素的当前值
参数
val 要设置的值；function(index,value) 此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function(){ alert($("input:eq(0)").val()); $("input:eq(1)").val("测试二") }); }) </script> </head> <body> 测试一：<input type="text" value="测试一"/><br /> 测试二：<input type="text" /> <button>点击</button> </body> </html>
