jQuery操作html-获取&设置
一般来说，大部分方法没有参数是获取，有了参数则是设置。
获取内容
text() - 设置或返回所选元素的文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<p id="content">内容</p>
<spqn>哈哈哈哈</spqn>
</div>
<input type="text" id="name" value="itlike">
<a href="http://www.itlike.com" target="_blank">撩课学院</a>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//1.获取标签中的内容
getContent();
});
function getContent() {
var $box = $('#box');
//1.获取内容
var text = $box.text();
console.log(text);
}
</script>
</body>
</html>
运行结果：
html() - 设置或返回所选元素的内容（包括 HTML 标记）
var $box = $('#box');
// 2.获取标签和内容
var html = $box.html();
console.log(html);
运行结果：
val() - 设置或返回表单字段的值
HTML 表单包含表单元素。
表单元素 指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
var $box = $('#box');
//3.获取输入框的内容
var content = $('#name').val();
console.log(content);
运行结果：
设置内容
text(参数) - 设置或返回所选元素的文本内容
var $box = $('#box');
$box.text('撩课学院') // 设置文本，不能设置标签
运行结果：
html(参数) - 设置或返回所选元素的内容（包括 HTML 标记）
$box = $('#box');
$box.html('<h1>喜欢IT<h1>'); // 设置标签加文本
val(参数) - 设置或返回表单字段的值
$('name').val('ITLIKE') // 将输入框的值设为 ITLIKE
运行结果：
回调函数
$box = $('#box');
$box.text(function (index, oldValue) {
return index + oldValue + '，追加的内容';
});
运行结果：回调函数，在原来的值的基础上增加新的值
获取属性
attr() 获取标签的属性
var $box = $('#box');
//4.获取标签的属性值
var href = $('a').attr('href'); // 获取 a 标签的 href 属性
console.log(href);
var target = $('a').attr('target'); // 获取 a 标签的 target 属性
console.log(target);
运行结果：
设置属性
设置单个属性
$('a').attr('href','http://www.baidu.com') // 将a标签的href属性设置为Baidu
运行结果：点击超链接，跳转到百度
设置多个属性
$('a').attr({ // 设置多头属性一般都用键值对的形式
'href':'http://www.baidu.com',
'target':'_self'
});
扫一扫
145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
