jQuery应用简单小习题
改变文本颜色 寻找div 寻找元素
效果图!效果图!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.js" ></script>
<script src="js/jquery-3.5.1.min.js" ></script>
</head>
<style>
div,span,p{
width:250px;
height:250px;
margin:5px;
border:1px solid blue;
float:left;
}
div.mini{
width:100px;
height:100px;
}
</style>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#one").css('background-color', 'red');
});
$("#btn2").click(function () {
$(".mini").css('background-color', 'black');
});
$("#btn3").click(function () {
$("div").css('background-color', 'yellow');
});
$("#btn4").click(function () {
$("*").css('background-color', 'blueviolet');
});
$("#btn5").click(function () {
$("*").css('background', 'none');
});
});
</script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$(".body div").css('background-color', 'red');
});
$("#btn2").click(function () {
$("div>div").css('background-color', 'black');
});
$("#btn3").click(function () {
$("#one+div").css('background-color', 'yellow');
});
$("#btn4").click(function () {
$("#two~*").css('background-color', 'blueviolet');
});
$("#btn5").click(function () {
$("*").css('background', 'none');
});
});
</script>
<body>
<div id="one" class="one">
id为one,class为one的div
<div class="mini">
class为mini的div
</div>
</div>
<div id="two" class="one" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">
class为mini,title为other的div
</div>
<div class="mini" title="test">
class为mini,title为test的div
</div>
</div>
<div class="one">
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
</div>
<div class="one">
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini" title="test">class为mini,title为test的div</div>
</div>
<p>这是p标签</p>
<span>这是span标签</span>
<input type="button" value="改变id为one的背景颜色" id="btn1" />
<input type="button" value="改变class为mini的背景颜色" id="btn2" />
<input type="button" value="改变元素名为div的背景颜色" id="btn3" />
<input type="button" value="改变所有元素背景颜色" id="btn4" />
<input type="button" value="清空所有盒子的背景颜色" id="btn5" />
</body>
</html>
动动你发财的小手指,举手之劳,赞有余香!