<!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>
浙公网安备 33010602011771号