摘要:<!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
老师总结:作业写的还可以,最好上传一下程序的运行效果图