七、添加删除类
1.添加：$(this).addClass('a'); 删除： $(this).removeClass('a');
2. $(this).toggleClass('a',count%3==0)
例题1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 300px;
width: 300px;
background-color: orange;
}
.a{
background-color: blue;
}
</style>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#d").mouseover(function(){
$(this).addClass('a');
}).mouseout(function(){
$(this).removeClass('a');
});
})
</script>
</head>
<body>
<div id="d">s</div>
</body>
</html>
例题2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 300px;
width: 300px;
background-color: orange;
}
.a{
background-color: blue;
}
</style>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#d").mouseover(function(){
$(this).toggleClass('a')
}).mouseout(function(){
$(this).toggleClass('a')
});
})
</script>
</head>
<body>
<div id="d">s</div>
</body>
</html>
例题3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 300px;
width: 300px;
background-color: orange;
}
.a{
background-color: blue;
}
</style>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var count=1;
$("#d").click(function(){
//在删除与添加类操作不停切换时，推荐使用toggleClass
count++;
$(this).toggleClass('a',count%3==0)
});
})
</script>
</head>
<body>
<div id="d">s</div>
</body>
</html>
八、添加，删除，克隆节点
添加节点：
var table=$("<table id='t'><tr><td>123</td></tr></table>")
$("div").append(table);
删除节点：table.remove();
克隆节点：table.clone().appendTo($("div"))
例题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//添加节点
var table=$("<table id='t'><tr><td>123</td></tr></table>")
$("div").append(table);
//删除节点
// table.remove();
//克隆节点
table.clone().appendTo($("div"))
})
</script>
</head>
<body>
<div></div>
</body>
</html>
扫一扫
6692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
