jquery中的页面内容操作的三个方法
一、总结
一句话总结：记三个方法即可。text，html，val。因为这里是方法，所以设置值的是后面方法的参数。
1、jquery中的页面内容操作的三个方法？
text，html，val
- text()方法:获取和设置某个元素的“文本内容”。
- html()方法:获取和设置某个元素中的“HTML内容”
- val()方法：获取或设置“表单元素”的值。
30 // alert($('#main').text())
2、jquery中如何设置页面内容操作来设置元素的值？
因为这里是方法，所以设置值的是后面方法的参数
$('#title').html('锦瑟-<em>李商隐</em>')
二、页面内容操作
1、相关知识
- text()方法:获取和设置某个元素的“文本内容”。
- html()方法:获取和设置某个元素中的“HTML内容”
- val()方法：获取或设置“表单元素”的值。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
h1{
margin-left: 100px
}
</style>
</style>
</head>
<body>
<div id="main">
<h1 id="title">锦瑟</h1>
<p>锦瑟无端五十弦，一弦一柱思华年。</p>
<p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p>
<p>沧海月明珠有泪，蓝田日暖玉生烟。</p>
<p>此情可待成追忆？只是当时已惘然。</p>
</div>
<input type="button" id="btn1" value="获取">
<input type="button" id="btn2" value="修改">
<input type="button" id="btn3" value="删除">
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
// alert($('#main').text())
// alert($('#main').html())
alert($(this).val())
})
$('#btn2').click(function(){
//$('#title').text('锦瑟-李商隐')
$('#title').html('锦瑟-<em>李商隐</em>')
$('#btn1').val('获取内容')
})
})
</script>
</body>
</html>