1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('#a').click(function () {
$('div').css({'background-color': 'blue'});
});
})
</script>
</head>
<body>
<div style="width: 40px; height: 50px; background-color: green;"></div>
<input type="button" value="点我上面的div会变色！" id="a"/>
</div>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('#btn').click(function () {
$('p').text('我是子元素');
});
})
</script>
</head>
<body>
<div>4444<p>点击！</p>
</div>
<input type="button" value="点" id="btn"/>
</div>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('#btn').click(function () {
$('#p2').css('backgroundColor','orangered');
});
})
</script>
</head>
<body>
<div>
<p style="background-color: green;">绿色</p>
<p style="background-color: blue" id="p2">蓝色</p>
</div>
<input type="button" value="点我" id="btn"/>
</div>
</body>
</html>
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('#btn').click(function () {
$('ul li:last').remove();
});
})
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input type="button" value="点我" id="btn"/>
</div>
</body>
</html>
5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('p').click(function(){
alert($(this).index())
})
})
</script>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
</html>
6.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('#btn').click(function () {
$('.box').animate({
'left':'+=500px'
})
});
})
</script>
</head>
<body>
<div class="box" style="width:30px; height:30px; background-color:blue;position: absolute;">
</div>
<input type="button" value="点我" id="btn">
</body>
</html>
w2d2（JQuery练习题）
最新推荐文章于 2022-11-12 21:27:00 发布
260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
