操作文本
原生js 中通过元素.innerText和innerHTML和.value属性操作标签内部文本和内容,
jQuery给我们封装了text(),html()和val()三个方法
- innerText >>>> text();
- innerHTML >>>> html();
- value >>>> val();
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
width: 200px;
height: 200px;
border: 1px solid green;
}
</style>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
function fun1(){
/*
* innerText >>>> text();
* innerHTML >>>> html();
* value >>>> val();
*
* */
console.log($("#d1").text())
console.log($("#d1").html())
console.log($("#i1").val())
}
function fun2(){
//修改标签内容
$("#d1").text("<h2>自律</h2>")
$("#d1").html("<h2>自律</h2>")
}
function fun3(){
//清空内容
$("#d1").html("")
$("#d1").empty()
$("#i1").val("")
}
</script>
</head>
<body>
<input type="text" value="这里是文字" id='i1' />
<div id='d1'>
a
<span>xxx</span>
b
</div>
<input type="button" value="获得标签内容" onclick="fun1()"/>
<input type="button" value="修改标签内容" onclick="fun2()"/>
<input type="button" value="删除标签中的内容" onclick="fun3()"/>
</body>
</html>
增删元素
原生js 中的对于元素的创建,增加和删除代码比较繁琐,而jQuery从元素的创建到元素的增加和删除都给我们提供了更加便捷的方法
创建元素：$('<span>text<span>')
追加元素
append()、appendTo()添加内部标签
before() 、insertBefore()向前增加标签
after() 、insertAfter()向后增加标签
删除元素
empty()清空字标签
remove()移除当前标签
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
function fun1(){
// 创建元素
var span1=$("<span></span>");
// 设置样式
span1.css("color","green");
span1.css("border","1px solid blue");
span1.css("background-color","lightgray")
// 设置文字
span1.text("今天天气很好");
$('#d1').append(span1)
}
function fun2(){
var h =$("<h3>测试文字</h3>").css("color","red").css("border","1px solid green")
h.appendTo($('#d1'))
}
function fun3(){
var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>')
$("#d1").before(span1);
}
function fun4(){
var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>')
span1.insertBefore($("#d1"));
}
function fun5(){
var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>')
$("#d1").after(span1);
}
function fun6(){
var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>')
span1.insertAfter($("#d1"));
}
function fun7(){
$("#d1").empty()
}
function fun8(){
$("#d1").remove(); // 移除当前元素本身
}
</script>
</head>
<body>
<div id='d1'>
</div>
<input type="button" value="testAppend" onclick="fun1()" />
<input type="button" value="testAppendTo" onclick="fun2()" />
<input type="button" value="testbefore" onclick="fun3()" />
<input type="button" value="testinsertBefore" onclick="fun4()" />
<input type="button" value="testafter" onclick="fun5()" />
<input type="button" value="testInsertAfter" onclick="fun6()" />
<input type="button" value="empty" onclick="fun7()" />
<input type="button" value="remove" onclick="fun8()" />
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/123428.html
