<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>12.2jQuery属性与样式之.html()与.text()</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1 .html()获取HTML
$('#btn1').click(function(){
var $p1=$('#p1');
//alert($p1.html());
alert($('p').html());
});
//2 .text()获取文本
$('#btn2').click(function(){
var $p1 = $('#p1');
//alert($p1.text());
alert($('p').text());
});
//3 .html(jQuery对象)设置HTML
$('#btn3').click(function(){
var $p1 = $('#p1');
var $jq1 = $('<i>我喜欢学习jQuery</i>');
//创建了一个jQuery对象
//$p1.html($jq1);
$('p').html('I like to study <strong>html</strong>.');
});
//4 .text(文本)设置文本
$('#btn4').click(function(){
var $p1 = $('#p1');
//$p1.text('I like to study jQuery.');
$('p').text('I like to study html.');
});
});
</script>
</head>
<body>
<input id="btn1" type="button" value="获取HTML">
<input id="btn2" type="button" value="获取TEXT"><br>
<input id="btn3" type="button" value="设置HTMl">
<input id="btn4" type="button" value="设置TEXT"><br>
<p id='p1'>我喜欢学习<strong>jQuery</strong></p>
<p id='p1'>我喜欢学习<strong>html</strong></p>
</body>
</html>
单击获取HTML按钮
单击获取TEXT按钮
单击设HTML按钮
单击设置TEXT按钮
举例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3.2jQuery样式与属性之.html()与.text()比较</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//获取列表对象
var $li = $('#score li');
$('#btn1').click(function(){
alert($li.html());
//返回值 <b>HTML</b>
//只返回第一个元素内的HTML
});
$('#btn2').click(function(){
alert($li.text());
//返回值 HTMLCSSjQuery
//返回所有元素内的文本
});
//设置html
$('#btn3').click(function(){
$li.html('HTML5+CSS3+<strong>jQuery</strong>');
//设置所有元素的HTML
});
//设置text
$('#btn4').click(function(){
$('li').text('html+css+jQuery');
//设置所有元素的text
});
});
</script>
</head>
<body>
<input id="btn1" value="获取html" type="button">
<input id="btn2" value="获取text" type="button"><br>
<input id="btn3" value="设置html" type="button">
<input id="btn4" value="设置text" type="button"><br>
<h3>web前端课程</h3>
<ul id="score">
<li><b>HTML</b></li>
<li><i>CSS</i></li>
<li>jQuery</li>
</ul>
</body>
</html>
单击获取html按钮
单击获取text按钮
单击设置html
单击设置text
