jQuery事件方法作业

Original 2019-01-07 09:50:50 261
abstract:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>jquery的事件函数</title> <script type="text/javascript" src="jquery-3.3.1.min.js&qu

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jquery的事件函数</title>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

</head>

<body>

<script type="text/javascript">

$(document).ready(function(){

       $('input').blur(function(){

        $('input').css('background','#ccc')

       })

         $('input').focus(function(){

        $('input').css('background','#f93')

       })

          $('input').change(function(){

      $('input').css('color','blue')

      })

      $('button').click(function(){

      $('div').css('background','lightblue')

      })

     $('div').dblclick(function(){

      $(this).css('background','pink')

     })

       $(document).mousemove(function(aa){

        $('span').text('x: '+aa.pageX+'y: '+aa.pageY)

       })

      a=1

      $(window).resize(function(){

      alert('窗口被调整大小')

       $('b').text(a++)

      })

})

</script>

<input type="text" name="">

<div style="width: 100px;height: 100px;background: red;margin-top: 20px;"></div>

<button>点击</button>

<div>

当前鼠标的位置:<span> </span>

</div>

<div>

页面被调整大小的次数:<b> </b>

</div>

</body>

</html>


Release Notes

Popular Entries