jQuery属性事件操作

原创 2019-04-01 21:30:51 276
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery事件切换</title> <script type="text/javascript" src="j
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery事件切换</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
div{width: 300px;height: 300px;border: 1px solid red;float: left;}
.box{background: green;}
.bb{color:red;}
</style>
</head>
<body>
<!--  获取css属性
<script type="text/javascript">
$(document).ready(function(){
alert($('.box1').css('background'))
})
</script> -->

<!--  修改css属性
<script type="text/javascript">
$(document).ready(function(){
$('.box1').css({'backgroundColor':'green','color':'red'})
})
</script> -->

<!-- 操作属性 -->
<!--  <script type="text/javascript">
$(document).ready(function(){
// $('.box1').addClass('box')
// $('.box1').removeClass('box')
// alert($('p').attr('title'))
// $('p').attr('title','hello')
// alert($('p').attr('title'))
$('img').removeAttr('src')
// alert($('div').hasClass('box1'))
$('button').click(function(){
$('p').toggleClass('bb')
})
// alert($('p').text())
// ($('p').text('pppppp'))
// alert($('input').val())
$('input').val('QQQQQ')
})
</script> -->

<!-- 事件操作 -->
<!-- <script type="text/javascript">
$(document).ready(function(){
$('input').focus(function(){
$('input').css('background','red')
})
$('input').blur(function(){
$('input').css('background','green')
})
$('div').mouseover(function(){
$('div').css('background','green')
})
$('div').mouseleave(function(){
$('div').css('background','red')
})
a=0
$(window).resize(function(){
$('p').text(a++)
})
$(document).mousemove(function(aa){
$('span').text(aa.pageX)
})
})
</script> -->

<!-- 事件切换 -->
<script type="text/javascript">
$(document).ready(function(){
//  $('div').hover(
//  function(){
//  $(this).css('background','red')
//  },
//  function(){
//  $(this).css('background','green')
//  })
// })
$('button').click(function(){
$('div').toggle().css('background','red')
})
})
</script>

<div>Box1</div>
<p title="pp">PP</p><span>aa</span>
<img src="images/logo.png" alt="">
<input type="text" value="lalalal">
<button>点击</button>
</body>
</html>


批改老师:西门大官人批改时间:2019-04-02 11:03:57
老师总结:作业写的还可以,最好上传一下程序的运行效果图

发布手记

热门词条