jQuery操作元素和内容和样式
1.显示获取的是HTML的内容——相当于底层innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//声明函数
function testHtml() {
//获取元素对象
var showdiv = $("#showdiv");
//获取元素的内容
alert(showdiv.html());
}
</script>
</head>
<body>
<h3>jQuery操作元素html</h3>
<input type="button" value="测试获取元素内容——HTML" onclick="testHtml()">
<hr>
<div id="showdiv">
<b>Have a good day!</b>
</div>
</body>
</html>
——————————————————————————————————————————————————————--
2.修改HTML内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//声明函数
function testHtml() {
//获取元素对象
var showdiv = $("#showdiv");
//获取元素的内容
alert(showdiv.html());
}
function testHtml2() {
//获取元素对象
var showdiv = $("#showdiv");
//修改元素内容(函数需要传参)
showdiv.html("<b>今天是个美好的一天!</b>");
}
</script>
</head>
<body>
<h3>jQuery操作元素html</h3>
<input type="button" value="测试获取元素内容——HTML" onclick="testHtml()">
<input type="button" value="测试修改元素内容——HTML" onclick="testHtml2()">
<hr>
<div id="showdiv">
<b>Have a good day!</b>
</div>
</body>
</html>
点击修改按钮后HTML内容改变
可以实现代码拼接效果
showdiv.html("<b>今天是个美好的一天!</b>");改为:
showdiv.html(showdiv.html()+"<b>今天是个美好的一天!</b>");
3.获取元素内容,只包含text部分,没有b、i这种标签特点的显示——testText
4.修改元素内容,修改内容为 <i>今天是个美好的一天!</i> 但是结果显示i标签没有被解析(没有变斜体)
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//声明函数
function testHtml() {
//获取元素对象
var showdiv = $("#showdiv");
//获取元素的内容
alert(showdiv.html());
}
function testHtml2() {
//获取元素对象
var showdiv = $("#showdiv");
//修改元素内容(函数需要传参)
showdiv.html(showdiv.html()+"<b>今天是个美好的一天!</b>");
}
function testText() {
//获取元素对象
var showdiv = $("#showdiv");
//获取元素内容
alert(showdiv.text());
}
function testText2() {
//获取元素对象
var showdiv = $("#showdiv");
//修改元素内容
showdiv.text("<i>今天是个美好的一天!</i>")
}
</script>
</head>
<body>
<h3>jQuery操作元素html</h3>
<input type="button" value="测试获取元素内容——HTML" onclick="testHtml()">
<input type="button" value="测试修改元素内容——HTML" onclick="testHtml2()">
<input type="button" value="测试获取元素内容——HTML" onclick="testText()">
<input type="button" value="测试修改元素内容——HTML" onclick="testText2()">
<hr>
<div id="showdiv">
<b>Have a good day!</b>
</div>
</body>
</html>
效果3:
效果4:
——————————————————————————————————————————————————————
——————————————————————————————————————————————————————
jQuery操作元素的样式
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px ;
}
.common{
width: 300px;
height: 300px;
border: solid 1px ;
background: purple;
}
.dd{
font-size: 30px;
font-weight: bold;
}
</style>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
<!--声明js代码域-->
<script type="text/javascript">
//jQuery操作样式--css()
function testCss() {
//获取元素对象
var showdiv = $("#showdiv");
//操作样式--增加
showdiv.css("background-color","orange");
//操作样式的获取_这里显示的是div的宽度
alert(showdiv.css("width"));
//操作样式的修改-给一个已知存在的属性并赋值新的属性值
showdiv.css("width","30");
}
//使用json用法 方便添加css样式
function testCss2() {
//获取元素对象
var div = $("#div01");
//操作样式
div.css({"border":"solid 1px","width":"300px","height": "300px"})
}
//jQuery操作样式--addClass()类选择器______等效于className
function testAddClass() {
var div = $("#div01");
//操作样式-添加类选择器的名称
div.addClass("common");
}
function testAddClass2() {
var div = $("#div01");
//操作样式-添加类选择器的名称
div.addClass("dd");
}
function testRemoveClass() {
//获取元素对象
var div = $("#div01");
//删除元素
div.removeClass("dd");
}
</script>
</head>
<body>
<h3>jQuery操作元素样式</h3>
<input type="button" value="操作样式-css" onclick="testCss()">
<input type="button" value="操作样式-css--json" onclick="testCss2()">
<input type="button" value="操作样式-css--addClass()" onclick="testAddClass()">
<input type="button" value="操作样式-css--addClass2()" onclick="testAddClass2()">
<input type="button" value="操作样式-css--removeClass()" onclick="testRemoveClass()">
<div id="showdiv"></div>
<div id="div01">I am div01!</div>
<!--function里面添加类选择器的效果实际就是 <div id="div01" class="common dd">I am div01!</div>-->
</body>
</html>