码迷,mamicode.com
首页 > Web开发 > 详细

jQuery的基本事件

时间:2017-10-13 10:32:02      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:clientx   put   enter   支持   ==   out   word   err   删除   

1、用法

<!--jquery通过bind()这个方法来为元素绑定事件,可以传三个参数,type、data、fn-->
<!--type表示一个或者多个事件的名称-->
<!--data是可以选的,作为属性值传递额外的参数-->
<!--fn表示绑定到的指定的事件后要执行的函数-->

  

2、基本事件的总结

<!--jquery的常见的事件类型-->
<!--  1.blur()      当失去焦点时触发。包括鼠标点击离开和TAB键离开。-->

<!--  2.change()     当元素获取焦点后,值改变失去焦点事触发。-->

<!--  3.click()      当鼠标单击时触发。-->

<!--  4.dblclick()     当鼠标双击时触发。-->

<!--  5.error()      当javascript出错或img的src属性无效时触发。-->

<!--  6.focus()     当元素获取焦点时触发。注意:某些对象不支持。-->

<!--  7.focusin()    当元素或其子元素获取焦点时触发,与focus()区别在于能够检测其内部子元素获取焦点的情况。-->

<!--  8.focusout()    当元素或者其子元素失去焦点时触发,与focusout()区别在于能够检测内部子元素失去焦点的情况。 -->

<!--  9.keydown()   当键盘按下时触发。-->

<!--  10.keyup()    当按键松开时触发。-->

<!--  11.mousedown()    当鼠标在元素上点击后触发。-->

<!--  12.mouseenter()    当鼠标在元素上穿过时触发。mouseenter与mouseover的区别是,鼠标从mouseover的子元素上穿过时也会触发而mouseenter不会。-->

<!--  13.mouseleave()    当鼠标从元素上移出时触发。-->

<!--  14.mousemove()    当鼠标在元素上移动时触发。.clientX 和 .clientY分别代表鼠标的X坐标与Y坐标。-->

<!--  15.mouseout()     当鼠标从元素上移开时触发。-->

<!--  16.mouseover()     当鼠标移入元素时触发。-->

<!--  17.mouseup()     当鼠标左键按下释放时触发。-->

<!--  18.resize()       当浏览器窗口大小改变时触发。 $(window).resize();-->

<!--  19.scroll()        当滚动条发生变化时触发。-->

<!--  20.select()       当input里的内容被选中时触发。-->

<!--  21.submit()       提交选中的表单。-->

<!--  22.unload()       当页面卸载【刷新】时触发-->

  

3、简单写一些例子来讨论事件的使用

 <input type="button" name="name" value="提交">
    <input type="text">
    <input type="password">
    <div class="cc">div测试</div>

    <script src="jquery-3.2.1.js"></script>
    <script>
        $(function () {
//            $("input").bind(‘click‘,function () {
//                alert("请输入")
//            })


//            $("input").bind("click",f)
//
//            function f() {
//                alert("请输入111")
//            }
//            这种方法和上面的方法实现的效果是一样的



//            还可以同时绑定多个事件,事件和事件之间用空格隔开,下面这个例子实现的效果是单机和鼠标移入执行相同的函数

//            $("input").bind("click mouseover",function () {
//                alert("xxxxxxxxxxxxxxxxxxx")
//
//            })


//下面这个例子实现的效果就是鼠标移除和移入分别执行不同的函数
//            $("input").bind({
//                "mouseover":function () {
//                    alert("鼠标移入")
//                },
//                "mouseout":function () {
//                alert("鼠标移除")
//            }
//            })

//            删除所有的事件
//            $("input").unbind()


//            删除一个事件
//            $("input").unbind("click")




//mouseover,mouseout事件应用,鼠标移入和鼠标移除
//            $("div").bind({
//                "mouseover":function () {
//                    $(this).css("font-size","40px")
//                },
//                "mouseout":function () {
//                    $(this).css("font-size","10px")
//                }
//            })


//keyup,keydown 键盘的事件
//            $(":input[type=‘text‘]").bind("keyup",function () {
//                var a = $(this).val()
//                alert(a)
//            })


//focus,blur光标移入,光标丢失

//            $("input[type=‘password‘]").bind({‘focus‘:function () {
//                alert("光标锁定")
//            },
//            ‘blur‘:function () {
//                alert("光标移除")
//            }
//            })

  

4、函数还可以这样使用

            $(":input[type=‘text‘]").bind(‘click‘,function () {
                var b = $(this).val()
                if(b == 1){
                    $(this).val(1111)
                }else if (b == 2){
                    $(this).val(2222)
                }else {
                    $(this).val("xxxxxxxxxxxxxx")
                }
            })

  

jQuery的基本事件

标签:clientx   put   enter   支持   ==   out   word   err   删除   

原文地址:http://www.cnblogs.com/bainianminguo/p/7659130.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!