<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type='text/javascript' src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script> <script> $(function(){ //-------------------------------JQuery之html()[解析html标签] // 1.无参html()：取得[ 第一个 ]匹配元素的html内容, 这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String var phtml = $('p').html(); console.log(phtml); // 2.有参html(val)：设置[ 每一个 ]匹配元素的html内容,这个函数不能用于XML文档, 但可以用于XHTML文档，包含的html标签将会被解析，返回一个jquery对象 $('p').html('<b>被替换了</b>的P元素的演示文本'); // 3.参数是回调函数的html(funtion(index, html){...}): 第一个参数表示当前元素的索引位置(index从0开始), 第二个参数表示当前元素的html文本内容 $('p').html(function(index, oldHtml){ return '第' + (++index) + oldHtml; }); //-------------------------------JQuery之text()[纯文本, 不解析html标签] // 1.无参text()：取得[ 所有匹配 ]元素的内容, 结果是由[ 所有匹配 ]元素包含的文本内容组合起来的文本, 返回的是一个String var phtml = $('p').text(); console.log(phtml); // 2.有参text(val)：设置[ 所有匹配 ]元素的内容, 包含的html标签不会被解析 $('p').text('<b>新的</b>text有参演示') // 3.参数是回调函数的html(funtion(index, html){...}): 第一个参数表示当前元素的索引位置(index从0开始), 第二个参数表示当前元素的html文本内容 $("p").text(function(index,oldText){ return (++index) + "." + oldText; }); //-------------------------------JQuery之val() // 1.返回的是匹配的元素集合中的第一个 var iVal = $('input:text').val(); console.log(iVal); // 2.设置所有匹配元素的value值 $('input:text').val('账号与昵称重复了！'); $('input:text').eq(0).focus(function(){ $(this).val(''); }); $('input:text').eq(0).blur(function(){ $(this).val($('input:text').eq(1).val()); }); }); </script> </head> <body> <p>第一个P元素的演示文本</p> <p>第二个P元素的演示文本</p> 账号：<input type="text" value="Jason"> 昵称：<input type="text" value="洛基神棍"> </body> </html>