接下来介绍jq对HTML的标签追加类名和增加内容。
如果不加jq,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box2{
background: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="box1"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
div和ul li标签没有写任何内容,也没有赋予类名box2
增加jq代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box2{
background: red;
width: 100px;
height: 100px;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#box1').addClass('box2');//追加样式(增加类名)
$('ul li').html('lll')//增加内容
})
</script>
</head>
<body>
<div id="box1"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
运行效果:
通过追加类名使得上面的css样式可以再div标签执行,".html()"可以在选择的标签中增加需要的内容。