第三周day01
作业1,2, 3 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第三周第二节小测试</title>
<script src="jQuery/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<p>aaaaa</p>
<p>bbbbb</p>
ccccc
<p>ddddd</p>
eeeeee
<button class="btn" onclick="bct()">点击我,带p标签文字出现红色边框</button>
<script>
//第一步:创建一个函数,并通过标签onclick属性将函数调用与按钮点击事件绑定
function bct() {
$('p').css('border','1px solid red')
/*函数功能,让所有p标签框变红*/
/*第二步:将所有p标签获取到js中变成一个数组并保存这个数组*/
// var parray = document.getElementsByTagName('p');
// /*第三步:遍历这个数组,访问数组中每一个p标签对象的style属性的cssText属性,并修改为我们想要修改的样式效果*/
// for (var i = 0; i <parray.length ; i++) {
// parray[i].style.cssText='border:1px solid red';
// }
}
people={
sex:'男',
age:22,
work:function () {
alert('工作是:zhu');
},
address:function () {
alert('工作地点是:');
}
}
alert(people.sex);
alert(people.age);
alert(people.work());
alert(people.address());
/*分素数和合数*/
var num = prompt();
for (var i = 2; i < num; i++) {
if(num !=2 & num % i ==0){
alert(num+'是合数');
break;
}else{
alert(num+'是素数');
break;
}
}
</script>
</body>
</html>
第三周day02
作业1:使用jQuery修改div元素的背景颜色(随意颜色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业1</title>
<script src="jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<div style="width: 100px;height:100px;background-color: red"></div>
<button>点我改颜色</button>
<script>
$(function () {
$('button').click(function () {
$('div').css('background-color','green');
})
})
</script>
</body>
</html>
作业2:使用jQuery修改div的子元素p的内容为“我是子元素”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业2</title>
<script src="jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<p>你猜我是什么?</p>
</div>
<button>点我改变内容</button>
<script>
$(function () {
$('button').click(function () {
$('p').text('我是子元素');
})
})
</script>
</body>
</html>
作业3:使用jQuery修改第二个p元素的背景色为“orange”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业3</title>
<script src="jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<p id="one" style="background-color: red">第一个p</p>
<p id="two" style="background-color: red">第二个p</p>
<button>点我改变第二个p背景色</button>
<script>
$(function () {
$('button').click(function () {
$('#two').attr({
style:'background-color:orange',
})
})
})
</script>
</body>
</html>
作业4:删除列表元素中最后一个li元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业4</title>
<script src="jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<ul>
<li>aaaa</li>
<li>vvvv</li>
<li>ddddd</li>
<li id="last">tgthth</li>
</ul>
</div>
<button>点我删除最后一个li元素</button>
<script>
$(function () {
$('button').click(function () {
$('#last').remove();
})
})
</script>
</body>
</html>
作业5:点击当前的p标签。弹出相对应的元素下标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业5</title>
<script src="jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>你是猪大</p>
<p>你是猪二</p>
<p>你是猪三</p>
<p>你是猪四</p>
<p>你是猪五</p>
<script>
$('p').click(function () {
// $(this).index();
alert('此p标签下标是'+parseInt($(this).index()+1))
})
</script>
</body>
</html>
作业6:利用jQuery中的animate()方法。点击id为btn的按钮,实现类名为box的元素,向左移动500px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业6</title>
<script src="jQuery/jquery-3.4.1.min.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 1000px;
}
</style>
</head>
<body>
<div class="box"></div>
<div>
<button id="btn">点击我,类名为box元素,向左移动500px</button>
</div>
<script>
$(function () {
$('#btn').click(function () {
$('.box').animate({
left:'500px'
});
})
})
</script>
</body>
</html>