码迷,mamicode.com
首页 > 其他好文 > 详细

jq——事件

时间:2019-05-16 20:30:28      阅读:363      评论:0      收藏:0      [点我收藏+]

标签:就会   鼠标移动   案例   bind   jquer   绑定   png   比较   焦点   

 

http://www.w3school.com.cn/jquery/jquery_ajax_intro.asp

$(document),$(body)

加载事件:

$(document).ready(fn)

$(document).ready(function(){ alert("这是加载事件"); });

简写:$(function(){});工作中简写比较多

js:window.onload=fn   把页面上的DOM和资源加载完成之后执行

jq:$(document).ready(fn)  把页面的DOM加载完成之后就会执行

jq来源于js,超越js

事件切换

hover(hover,out);

技术图片

技术图片技术图片

事件:

1 $(selector).click(fn):selector的点击事件会触发fn

2 $(selector).dblclick(fn):selector的双击事件会触发fn

$("input").dblclick(function() { alert("hhhh"); });

3 $(selector).focus():获得焦点事件

技术图片

4 $(selector).blur():失去焦点事件

$(selector).chang():发生改变

$(selector).mousover:鼠标放上

$(selector).mouseout:鼠标离开

$(selector).mousedown:鼠标抬起

$(selector).mouseup:鼠标移动

10 $(selector).mousemove:鼠标移动

js中的事件都带有on,而jq没有

鼠标移动案例

技术图片

事件处理

1  bind("action",fn) 绑定,所以版本都支持

技术图片

2 如果多个事件:bind({"mouseover":fn1,"mouseout":fn2});

技术图片

3 unbind("action")解除绑定,没有参数意味着全部解除

$("div").unbind();

技术图片

只解除一个:$("div").unbind("mouseout");

4 on:也是绑定(同上)

$(select).on("action",function(){});

5 off:解绑

技术图片

6 one:绑定事件只会执行一次

$("#d3").one("click",function(){ alert("one"); });

技术图片

bind和on是重点

查找

技术图片

1 $(selector).parent(),查找父元素

$("p").parent().css("background":"red");

2 $(selector).find(a);在selector中找a元素

$("div").find(‘p‘).css({background:"red"});

 

jq——事件

标签:就会   鼠标移动   案例   bind   jquer   绑定   png   比较   焦点   

原文地址:https://www.cnblogs.com/ellen-mylife/p/10877685.html

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