jQuery事件

https://www.w3cschool.cn/jquery/jquery-ref-selectors.html

事件的接基础分类

基础事件:

    鼠标事件

    click()   鼠标点击事件

    mouseover() 鼠标移入

    mouseout()鼠标移出

    mouseenter()鼠标移入

    mouseleave()鼠标移出

区别:mouseover()移入,该元素的子元素的mouseover能起作用

          mouseenter()移入,该元素的子元素的mouseover()不会被触发

/*鼠标移上去方法*/
$(".all~li").mouseover(function () {
 $(this).css({"background-color":"#ffffff"})
})
/*鼠标移出去方法*/
$(".all~li").mouseout(function () {
 $(this).css({"background-color":"#ff2832"})
})

    键盘事件

    keydown() 按下键盘时

    keyup()释放键盘时

    keypress()产生可打印的字符时

    

    窗口事件

    $(selector).reslize()   窗口尺寸样式改变时

$(window).resize(function(){
 /*只要窗口被改变,就会触发该方法*/
 $("#span").text(num++)
})

    表单事件

    绑定事件:bind(“事件”,“处理方法”)

/*绑定函数*/
$("#nav li span").bind("mouseover",function(){
    $(this).find("p:hidden").show()
})
$("#nav li span").bind("mouseout",function(){
    $(this).find("p:visible").hide()
})

    绑定多个事件:

    bind({“事件”:“处理方法”,“事件”:“处理方法”})

//用逗号隔开

    解除绑定事件:

    unbind()


复合事件:

    鼠标光标悬停

    hover()    相当于mouseover和mouseout的封装方法

    hover(移出事件处理,移出事件处理)

    

    toggle()相当于鼠标连续点击

$(document).ready(function(){
    /*模拟连续点击事件,循环执行*/
    $("input").toggle(function(){
        $("p").css({"background-color":"red"})
    },function(){
        $("p").css({"background-color":"blue"})
    },function(){
        $("p").css({"background-color":"green"})
    })
    $("p").css({"backgroun-color":"red"})
})

    toggle( function1 ,function2 , function3)

    toggle()方法不带参数,相当于show和hide方法的集合

    

/*hover复核事件*/
$("#nav li").hover(
        function(){
            $(this).find("p:hidden").show();
        }
        ,/*逗号隔开*/
        function(){
            $(this).find("p:visible").hide();
        }
)

    toggleClass()  加载和移出样式

方法描述
bind()向元素添加事件处理程序
blur()添加/触发 blur 事件
change()添加/触发 change 事件
click()添加/触发 click 事件
dblclick()添加/触发 double click 事件
delegate()向匹配元素的当前或未来的子元素添加处理程序
die()在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
error()在版本 1.8 中被废弃。添加/触发 error 事件
event.currentTarget在事件冒泡阶段内的当前 DOM 元素
event.data包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented()返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped()返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped()返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace返回当事件被触发时指定的命名空间
event.pageX返回相对于文档左边缘的鼠标位置
event.pageY返回相对于文档上边缘的鼠标位置
event.preventDefault()阻止事件的默认行为
event.relatedTarget返回当鼠标移动时哪个元素进入或退出
event.result包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation()阻止其他事件处理程序被调用
event.stopPropagation()阻止事件向上冒泡到 DOM 树,阻止任何父处理程序被事件通知
event.target返回哪个 DOM 元素触发事件
event.timeStamp返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type返回哪种事件类型被触发
event.which返回指定事件上哪个键盘键或鼠标按钮被按下
focus()添加/触发 focus 事件
focusin()添加事件处理程序到 focusin 事件
focusout()添加事件处理程序到 focusout 事件
hover()添加两个事件处理程序到 hover 事件
keydown()添加/触发 keydown 事件
keypress()添加/触发 keypress 事件
keyup()添加/触发 keyup 事件
live()在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load()在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件
mousedown()添加/触发 mousedown 事件
mouseenter()添加/触发 mouseenter 事件
mouseleave()添加/触发 mouseleave 事件
mousemove()添加/触发 mousemove 事件
mouseout()添加/触发 mouseout 事件
mouseover()添加/触发 mouseover 事件
mouseup()添加/触发 mouseup 事件
off()移除通过 on() 方法添加的事件处理程序
on()向元素添加事件处理程序
one()向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy()接受一个已有的函数,并返回一个带特定上下文的新的函数
ready()规定当 DOM 完全加载时要执行的函数
resize()添加/触发 resize 事件
scroll()添加/触发 scroll 事件
select()添加/触发 select 事件
submit()添加/触发 submit 事件
toggle()在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
trigger()触发绑定到被选元素的所有事件
triggerHandler()触发绑定到被选元素的指定事件上的所有函数
unbind()从被选元素上移除添加的事件处理程序
undelegate()从现在或未来的被选元素上移除事件处理程序
unload()在版本 1.8 中被废弃。添加事件处理程序到 unload 事件


Jquery对JavaScript中的DOM进行了封装

jQuery对DOM 操作

样式操作

内容和value操作

节点操作

节点和属性遍历

节点遍历

CSS-DOM操作

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值