慢一点再写,整个课程,要过三次

Original 2018-11-13 20:12:14 192
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">

// 在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:必需 参数来自事件绑定函数。 

$(document).ready(function(){

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

      // $('input').css('background','red')

      // })

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

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

      // })

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

      // $('input').css('background','pink')


     // })

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

     // $('div').css('background','blue')

     // })

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

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


     })

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

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

      // })

      a=0

      $(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