2017.12.18日作业

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12.18作业</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
p
{
background-color:red;
font-size:30px;
width:600px;
height:50px;
}
button
{
font-size:20px
}
</style>
</head>
<body>
<h2>作业一：原生querySelector()与querySelectorAll()获取元素实例</h2>
<h3>1.querySelector()的用法</h3>
<p onclick="btn1()">点这里：背景色由红变绿</p>
<h3>2.querySelectorAll()的用法</h3>
<button onclick = "btn2()" >点这里让下面字体变黄</button>
<p>1.html</p>
<p>2.css</p>
<p>3.json</p>
<p>4.jquery</p>
<hr style="border-color:blue;border-width:2px">
<script>
function btn1(){
document.querySelector('p').style.backgroundColor = 'green'//改变背景颜色
document.querySelector('p').innerHTML = "看，内容也发生了变化"//改变内容
document.querySelector('p').style.color = 'white'//改变字体颜色
}
</script>
<script>
function btn2(){
var p= document.querySelectorAll('p')
for(var i = 1; i<p.length; i++)
p[i].style.color = "yellow"//改变字体颜色
}
</script>

<h2>作业二：jQuery对象的参数与基本语法，ready()事件注册实例</h2>
<button onclick = "btn3()">点这里段落背景颜色会变成蓝色</button>
<script>
function btn3(){
$('p').css('background-color', 'blue')
}
</script>
<p>ready()事件：网页打开后自动变成黄色</p>
<button id = "cl">点这里网页的背景颜色会变成绿色</button>
<script>
$(document).ready(function(){
$(document.body).css('backgroundColor','yellow')
$('#cl').click(function(){ //通过id选择器改变背景颜色
$(document.body).css('backgroundColor','green')
})
})
// function btn4(){
// $(document.body).css('backgroundColor','green')
// }
</script>

<h2>作业三：jQuery中的事件注册与删除： on()和off()方法的使用</h2>
<div>
<h3>鼠标移入试试看</h3>
</div>
<button id = "btn5">删除事件：如果先点这里上面就不会消失</button>
<script>
$('div').css({
width: '200px',
height:'200px',
background: 'brown'
})
$('div').on('mouseenter',function(){
$(this).hide(1000)
})
$('#btn5').click(function(){
$("div").off('mouseenter')
})
</script>
<h3>2017.12.18日作业</h3>
</body>
</html>

相关文章