jq事件

1，ready：当DOM载入就绪可以查询及操纵时绑定一个要执行的函数，在使用之前必须确保body元素的onload事件，，没有注册函数，否则不会触发ready函数。

$(document).ready(function(){

alert("sss")请确保在 <body> 元素的onload事件中没有注册函数，否则不会触$(document).ready()事件。

})

$(function($) {

alert("Sss");

})

2，on函数：用于在元素上绑定一个或者多个事件；

object.on(events,selector,Data,function);

传进来的Data被归属为event.data.Data

selecter 是一段选择器代码，可以选择object下的子元素

$("p:first").on("click","a",{Text:"一个大帅比"},function(event){

alert($(this).parent().text()+event.data.Text);

})

当然也可以传进来很多个事件了：如下，既添加了点击事件，又添加了鼠标移入的操作

$("p:first").on("click mouseover","a",{Text:"一个大帅比"},function(event){

alert($(this).parent().text()+event.data.Text);

})

on()还可以用来取消表单的提交，

$("form").on("submit",false);

$("form").on("submit",function(event){

event.preventDefult;

})

3,off()函数：在选择的元素使用on方法中绑定的事件的事件处理函数

object.off()：直接把object上所有的事件都解绑，

命名空间：一个并发的环境，每一个事件的绑定都可以让它进入一个特定的空间里，然后取消某空间的的某事件，就可以实现解除同一个元素上面的不同空间的相同事件函数；

<button>button</button>

$('button').on("click.one",function(){

alert("one");

})

$('button').on("click.two",function(){

alert("two");

})

$('button').off("click.one"); //再点击的时候只能弹出two

</div>

$("p").on("click.first",".p1",function(){

alert($(this).text());

})

$("p").on("click.second",function(){

alert($(this).text()+"ss");

})

$("p").off("click",".p1"); //为所有的p元素取消在.first空间里的click事件

off事件中的selector元素相对应on事件的selector事件

</script>

4.one()函数：

<p style="background: red;">努力的人拥有全世界</p>

$("p").one("click",{Text:"没错"},function(event){

alert($(this).text()+"："+event.data.Text);

})

为某元素绑定一个事件吗，但只执行一次

如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

5，trigger函数():规定指定元素的触发事件，但是不能阻止事件冒泡。

1>.触发事件

<button>激活 input 域的 select 事件</button>

$(document).ready(function(){

$("input").select(function(){

$("input").after("文本被选中！");

});

$("button").click(function(){

$("input").trigger("select");

});

2>，传递参数，但是可以使所绑定的事件函数自动触发，但是必须指定事件名称

$("p").click(function(event,a,b){

alert(a+b);

}).trigger("click",["wrr","莱索"]);

3>，为trigger函数传递jquery.event()的事件对象

var e = jQuery.Event("select");

object.trigger(e);

4>，事件冒泡

<p>

</p>

$("p").click(function(event,a,b){

alert(a+b);

}).trigger("click",["wrr","莱索"]);

6，triggerHandler()与trigger相似，但是阻止了事件冒泡

<p>

</p>

$("p").click(function(event,a,b){

alert(a+b);

}).triggerHandler("click",["wrr","莱索"]);

7，delegate(selector,type,data,function)函数:给自定元素的每一个子元素都加上了一个事件。

<p>这是一个段落。</p>

<button class="btn1">请点击这里</button>

<button>请点击这里</button>

</div>

$("div").delegate("button.btn1", "click", function() {

$("p").slideToggle();

});

8，

$(".btn2").click(function(){

$("<p>wangruiui</p>").appendTo($(this).parent().find("p:first"));

})

8.undelegate()函数：

1>，删除由delegate()函数添加的一个或者多个事件处理程序

<div>

<button>button</button>

</div>

function f1(){

alert("1");

}

function f2(){

alert("2");

}

$("div").delegate("button","click",f1);

$("div").delegate("button","click",f2);

$("div").undelegate("button","click",f1);
2>,使用命名空间

$("div").delegate("button","click.f",f1);

$("div").delegate("button","click.s",f2);

$("div").undelegate("button","click.s");

3>，取消由delegate方法绑定所有事件

$("div").undelegate();

4>，取消某类事件的所有监听

$("div").undelegate("click");

1.hover()方法

1>:hover(function1,function2);

<p style="border: 1px solid red;width: 100px;">hover</p>

$("p").hover(

function(event){alert($(event.target).text()+"on");},

function(event){alert($(event.target).text()+"out");}

)

text()方法获取元素div等块级的时候，都会包括文本元素，文本元素就是所留的空白，所以要求紧凑

2>hover(function):移入和移出都只有一个方法

<p style="border: 1px solid red;width: 100px;">hover</p>

$("p").hover(handlerInout);

function handlerInout(){

alert("S");

}

2，blur()：是元素处于一个失去焦点的状态

$("input").blur(function(){

alert("blur");

})

3.change():当元素的值被改变的时候触发

$("input").change(function(){

alert("change");

})

3，error事件():

当页面的js发生错误时，window对象error触发事件

当图像的src属性无效时，比如文件不存在或者数据错误时，也会触发图像对象的error事件

$(document).ready(function() {

$("img").error(function(msg,url,line) {

alert(msg+url+line);

$("img").replaceWith("<p><b>图片未加载！</b></p>");

});

})

</script>

<body>

<p>如果上面的图像没有正确地加载，会被替换为一段 "图片未加载" 的文本。</p>

</body>

4，focus事件与focusin、focusout

focusin与focus的事件区别是：她可以在父元素上子元素获取焦点的情况

</div>

$("input:first").focus(function(){

$(this).blur();

})//是一个输入框处于一个禁用的状态

$("div").focusin(function(event){

console.log(event.target);

}) //inputelement

$("div").focusout(function(event){

console.log(event.target);

})

5,keydown keyup keypress三个事件键盘事件。不能同时用，会出现事件被吞没

6，select事件：针对于input、textarea

$("input").select({Text:"w"},function(e){

alert($(this).val()+e.data.Text);

})

7，submit事件：

<form>

<button type="submit">submit</button>

</form>

$("form").submit(function(){

alert("submit");//事件触发函数

return false;//阻止提交

})

8，remove()事件：是把一个元素移除，但是函数返回一个相同的节点，但是元素所绑定的事件都已经消失

$(".div").on("click",function(){

alert("ss");

})

var w=$(".div").remove();

$("body").append(w);

9，detch()事件,把一个元素删除，并且返回一个相同的节点，并且所有的事件绑定都返回了，也就是说保留了所有的事件

注意事项：

1，jq中事件函数的第一个参数就是兼容后的事件对象，

ev.pageX （相当于文档）= ev.clientX（相当于可视区）+ev.scrolltop

ev.which : keyCode

ev.preventDefault() //阻止默认事件

ev.stopPropagation() //阻止事件冒泡

return false：== ev.preventDefault() //阻止默认事件+ ev.stopPropagation() //阻止事件冒泡

2，jq的位置操作：

1>:offset() 是获取元素到浏览器边框时的距离，

offest().left 是获取元素到屏幕左边的距离

offest().top 是获取元素到屏幕顶部的距离

2>:position() 首先把元素分装成有定位的元素，获取元素到定位父级的距离，而不包括magin值

position().top :到定位父级的顶部距离

position() .left :到定位父级的左边距离

3，offsetParent():获取有定位的父级

parent():获取父级

4，val(参数)方法：

如果有参数的话就直接替代原来的value值。如果没有参数的话。就获得原来的参数值

5，size（）,获取数组的长度

6，obj.each（function(i,elem){

$(elem).html（i）;第一个参数：index，第二个参数：当前元素

}）

巴特西

jq事件

最新文章

热门文章