<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<style>
body>div{
border: #333 1px solid;
margin: 10px;
}
</style>
</head>
<body>
<div id="Q1" style="height: 100px;">
<button onclick="Q1()">变色</button>
</div>
<div id="Q2">
<button onclick="Q2()">改字</button>
<p></p>
</div>
<div id="Q3" style="">
<button onclick="Q3()">改第二个p背景</button>
<p>第一个p</p>
<p>第二个p</p>
<p>第三个p</p>
</div>
<div id="Q4" style="">
<button onclick="Q4()">删除最后一个li</button>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
</div>
<div id="Q5">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
<div id="Q6">
<button id="btn" onclick="Q6()">往左动</button>
<div class="box" style="width: 50px;height: 50px;background: red;left: 500px;position: relative;"></div>
</div>
<script>
function Q1() {
$('#Q1').css('background', 'red');
}
function Q2() {
$('#Q2 p').text('我是子元素');
}
function Q3() {
$('#Q3 p:eq(1)').css('background', 'orange')
}
function Q4() {
$('#Q4 li:last').remove();
}
$('#Q5 p').click(function(){
alert($('#Q5 p').index(this));
})
function Q6(){
$('.box').animate({left:'0'})
}
</script>
</body>
</html>
day11
最新推荐文章于 2023-05-09 23:45:45 发布