jq——事件

Posted 2021-11-30 ellen-mylife

 

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():失去焦点事件

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

6 $(selector).mousover:鼠标放上

7 $(selector).mouseout:鼠标离开

8 $(selector).mousedown:鼠标抬起

9 $(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"});