摘要：<!DOCTYPE html> <html> <head> <meta charset="uft-8"> <title>jQuery获取CSS属性</title> <script type="text/java
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<title>jQuery获取CSS属性</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<!-- <script type="text/javascript">
$(document).ready(function(){
alert($("div").css("background"))
alert($("div").css("height"))
})
</script>
<div style="height:100px; width:100px; background:pink"></div> -->
<!-- <script type="text/javascript">
$(document).ready(function(){
// $("p").addClass("box main")
// $("p").removeClass("box main")
// alert($("p").attr("title"))
// $("p").attr("title","not")
// alert($("p").attr("title"))
// $("button").click(function(){
// $("img").removeAttr("src")
// })
// $("button").click(function(){
// alert($("div").hasClass("box"))
// })
})
</script>
<p title="content">php中文网</p>
<img src="images/an4.png">
<button>删除图片</button>
<div class="box"></div>
<button>点击</button> -->
<!-- <script type="text/javascript">
$(document).ready(function(){
$("input").val("另一个值")
$("button").click(function(){
$("span,b,p").toggleClass("col")
})
$("span").text("我是一个坏学生")
$("b").html("<h1>真的是</h1>")
})
</script>
<input type="text" name="" value="一个值">
<span>我是一个好学生</span><br>
<b>真的是</b>
<p>上山打老虎</p>
<button>按一下，再按一下</button> -->
<!-- <script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){ //当input获取焦点时
$("input").css("background","red") //改变css样式
})
$('input').blur(function(){ //当input失去焦点时
$('input').css("background","yellow")
})
$('input').change(function(){ //当input的值变化时
$('input').css('background','pink')
})
$('button').click(function(){
$('.box_1').css({'background':'pink','color':'black'})
})
c=0
$(window).resize(function(){
$('b').text(c++)
})
$(document).mousemove(function(a){
$('span').text('x: '+a.pageX+'y: '+a.pageY)
})
})
</script>
<input type="text" name="">
<div class="box_1" style="width:70px; height:20px; background:#ccc; color:#ccc; margin: 10px 0px;">我喜欢你</div>
<button>刮一下</button>
<p>点击刮一下，获得惊喜</p>
<div class="box_2">
鼠标位置：<span></span>
</div>
<div class="box_3">
页面调整次数：<b></b>
</div> -->
<script type="text/javascript">
$(document).ready(function(){
$('div').hover(
function(){
$(this).css('background','white',)
},
function(){
$(this).css('background','black',)
})
$('button').click(function(){
$('p').toggle().css('background','red',)
})
})
</script>
<div style="width:200px; height:200px; background:black;">相亲对象很满意</div>
<p style="width:200px; height:200px; background:black;"></p>
<button>点击</button>
</body>
</html>
批改老师：灭绝师太批改时间：2019-01-19 15:40:22
老师总结：完美啊，后面的课程应该就是小米商城了，继续加油吧！将学习到的知识点运用起来！
