jquery小案例001

Original 2019-08-21 19:19:35 1515
abstract:<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <meta name="viewport" content="width=, initial-scale=

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

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

</head>

<body>

       // 在jQuery中是以调用事件函数的形式来触发事件的,如js中的onclick事件,在jQuery则用click()来替代

       // 简单的理解:事件方法会触发匹配元素的事件,或者将函数绑定到所有匹配元素的某个事件

       //ready() 当我们的DOM已经加载,页面已经加载完,触发的事件==js的onload

       //语法:

       // $(document).ready(function(){

   

       // })

       //*不能与<body onload="">一起使用

       //blur()当元素失去焦点==onblur

       // focus()当元素获得焦点

       // change()当元素的值发生改变的时候

       // click()点击事件

       //dblclick()双击事件

       // mouseover()  当鼠标指针位于元素上方时会发生mouseover事件

       // mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件

       // mousemove()  当鼠标指针在指定的元素中移动时,就会发生该事件

       // mouseleave() 当鼠标指针离开元素时

       // mouseout()   当鼠标指针从元素上移开时

       // mousedown()  当鼠标指针移动到元素上方并按下鼠标按键时

       // mouseup()    当在元素上松开鼠标按键时

       // resize()     当调整当前浏览器窗口大小时

       // pageX()      属性是鼠标指针的位置,相对于文档的左边缘 event.pageX  event:必需 参数来自事件绑定函数。

    //    pageY()      属性是鼠标指针的位置,相对于文档的上边缘 event.pageY  event:必需 参数来自事件绑定函数。

   <script>

      $(document).ready(function(){

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

           $('div').toggle()

       })

      })

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

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

      })

      a=0

      $(window).resize(function(){

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

      })

   

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

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

     })

   

      </script>  

   <div style="width: 100px;height: 100px;background:pink;"></div>

   <button>点击</button>

   <div>当前鼠标位置:

       <span></span>

   </div>

   <div>页面被调整次数: <b></b></div>

   <input type="text">

</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-08-22 15:33:33
Teacher's summary:jQuery官方推荐使用on()和off()来绑定或取消事件, 如果直接用click, 只支持冒泡, 并且 同一事件只能触发一次

Release Notes

Popular Entries