Jquery中事件总结 Click ,Animate,One,Bind,UnBind等
2016-12-30 16:24
260 查看
一:笔者第一个要说的事件 animate
jQuery animate() - 使用队列功能
默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
二:笔者第二个要说的事件Click
定义和用法
当点击元素时,会发生 click 事件。
当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。
click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。
function 可选。规定当发生 click 事件时运行的函数
将函数绑定到 click 事件
三:笔者第三个要说的事件Bind
定义和用法
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
将事件和函数绑定到元素
规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行的函数。
语法
测试例子
替代写法
四:笔者第四个要说的事件Change
定义和用法
当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
语法:
实例
将函数绑定到 change 事件
规定当被选元素的 change 事件发生时运行的函数。
五:笔者第五个要说的事件One
定义和用法
one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。
当使用 one() 方法时,每个元素只能运行一次事件处理器函数。
语法:
实例:当点击 p 元素时,增加该元素的文本大小:
六:笔者第六个要说的事件toggle()
toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
该方法也可用于切换被选元素的 hide() 与 show() 方法。
d523
向 Toggle 事件绑定两个或更多函数
当指定元素被点击时,在两个或多个函数之间轮流切换。
如果规定了两个以上的函数,则 toggle() 方法将切换所有函数。例如,如果存在三个函数,则第一次点击将调用第一个函数,第二次点击调用第二个函数,第三次点击调用第三个函数。第四次点击再次调用第一个函数,以此类推。
语法:
实例:切换不同的背景色:
案例:
六-2
Hide() Show()
切换 Hide() 和 Show()
检查每个元素是否可见。
如果元素已隐藏,则运行 show()。如果元素可见,则元素 hide()。这样就可以创造切换效果。
语法
$(selector).toggle(speed,callback)
七:笔者第七个要说的事件 unbind()
介绍:
定义和用法
unbind() 方法移除被选元素的事件处理程序。
该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
ubind() 适用于任何通过 jQuery 附加的事件处理程序。
取消绑定元素的事件处理程序和函数
规定从指定元素上删除的一个或多个事件处理程序。
如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。
语法:
实例:移除所有 p 元素的事件处理器:
案例1:
使用 Event 对象来取消绑定事件处理程序
规定要删除的事件对象。用于对自身内部的事件取消绑定(比如当事件已被触发一定次数之后,删除事件处理程序)。
如果未规定参数,则 unbind() 方法会删除指定元素的所有事件处理程序。
案例2:
本人做ASP.NET网站开发中常常遇到的一些问题,和一些Jquery事件,用的比较多的,个人总结,参考w3cschool教学文档写法例子。有什么问题可以一起学习交流。欢迎留言关注,谢谢大家,个人QQ:1787024563。
jQuery animate() - 使用队列功能
默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); }); </script> </head> <body> <button>点击动画</button> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>
二:笔者第二个要说的事件Click
定义和用法
当点击元素时,会发生 click 事件。
当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。
click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。
function 可选。规定当发生 click 事件时运行的函数
将函数绑定到 click 事件
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").slideToggle(); }); }); </script> </head> <body> <p>这是一个段落。</p> <button>切换</button> </body> </html>
三:笔者第三个要说的事件Bind
定义和用法
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
将事件和函数绑定到元素
规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行的函数。
语法
$(selector).bind(event,data,function)
测试例子
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").bind("click",function(){ $("p").slideToggle(); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button>请点击这里</button> </body> </html>
替代写法
$(selector).bind({event:function, event:function, ...})
四:笔者第四个要说的事件Change
定义和用法
当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
语法:
$(selector).change()
实例
$(".field").change(function(){ $(this).css("background-color","#FFFFCC"); });
将函数绑定到 change 事件
规定当被选元素的 change 事件发生时运行的函数。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".field").change(function(){ $(this).css("background-color","#FFFFCC"); });
});
</script>
</head>
<body>
<p>在某个域被使用或改变时,它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>
五:笔者第五个要说的事件One
定义和用法
one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。
当使用 one() 方法时,每个元素只能运行一次事件处理器函数。
语法:
$(selector).one(event,data,function)
实例:当点击 p 元素时,增加该元素的文本大小:
$("p").one("click",function(){ $(this).animate({fontSize:"+=6px"}); });
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").one("click",function(){ $(this).animate({fontSize:"+=6px"}); });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>请点击 p 元素增加其内容的文本大小。每个 p 元素只会触发一次改事件。</p>
</body>
</html>
六:笔者第六个要说的事件toggle()
toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
该方法也可用于切换被选元素的 hide() 与 show() 方法。
d523
向 Toggle 事件绑定两个或更多函数
当指定元素被点击时,在两个或多个函数之间轮流切换。
如果规定了两个以上的函数,则 toggle() 方法将切换所有函数。例如,如果存在三个函数,则第一次点击将调用第一个函数,第二次点击调用第二个函数,第三次点击调用第三个函数。第四次点击再次调用第一个函数,以此类推。
语法:
$(selector).toggle(function1(),function2(),functionN(),...)
实例:切换不同的背景色:
$("p").toggle( function(){ $("body").css("background-color","green");}, function(){ $("body").css("background-color","red");}, function(){ $("body").css("background-color","yellow");} );
案例:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").toggle(function(){ $("body").css("background-color","green");}, function(){ $("body").css("background-color","red");}, function(){ $("body").css("background-color","yellow");} ); }); </script> </head> <body> <button>请点击这里,来切换不同的背景颜色</button> </body> </html>
六-2
Hide() Show()
切换 Hide() 和 Show()
检查每个元素是否可见。
如果元素已隐藏,则运行 show()。如果元素可见,则元素 hide()。这样就可以创造切换效果。
语法
$(selector).toggle(speed,callback)
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").toggle(1000); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button class="btn1">Toggle</button> </body> </html>
七:笔者第七个要说的事件 unbind()
介绍:
定义和用法
unbind() 方法移除被选元素的事件处理程序。
该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
ubind() 适用于任何通过 jQuery 附加的事件处理程序。
取消绑定元素的事件处理程序和函数
规定从指定元素上删除的一个或多个事件处理程序。
如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。
语法:
$(selector).unbind(event,function)
实例:移除所有 p 元素的事件处理器:
$("button").click(function(){ $("p").unbind(); });
案例1:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).slideToggle();
});
$("button").click(function(){ $("p").unbind(); });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落可以令其消失。包括本段落。</p>
<button>删除 p 元素的事件处理器</button>
</body>
</html>
使用 Event 对象来取消绑定事件处理程序
规定要删除的事件对象。用于对自身内部的事件取消绑定(比如当事件已被触发一定次数之后,删除事件处理程序)。
如果未规定参数,则 unbind() 方法会删除指定元素的所有事件处理程序。
案例2:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var x=0; $("p").click(function(e){ $("p").animate({fontSize:"+=5px"}); x++; if (x>=2) { $(this).unbind(e); } }); }); </script> </head> <body> <p style="font-size:20px;">点击这个段落可以增加其大小。只能增加两次。</p> </body> </html>
本人做ASP.NET网站开发中常常遇到的一些问题,和一些Jquery事件,用的比较多的,个人总结,参考w3cschool教学文档写法例子。有什么问题可以一起学习交流。欢迎留言关注,谢谢大家,个人QQ:1787024563。
相关文章推荐
- JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别
- jquery事件绑定和解除绑定bind、unbind、one
- jQuery事件(ready/bind/hover/toggle/unbind/one/trigger/focus/blur/change/live)
- jQuery绑定事件方法及区别(bind,click,on,live,one)
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
- jQuery 事件绑定方法(bind hover toggle live.... )、删除事件方法(unbind, die)及 事件对象
- jQuery的三种bind/One/Live事件绑定使用方法
- 【jquery事件对象event】| jqeury bind 绑定事件与 unbind删除绑定事件| pageX pageY
- jquery bind(click)传参让列表中每行绑定一个事件
- jQuery 事件绑定方法(bind hover toggle live.... )、删除事件方法(unbind, die)及 事件对象
- jquery bind('click')传参问题(例如:列表中每行绑定一个事件)
- Jquery 事件 click 、 bind 、live 、delegate
- JQuery中绑定事件(bind())和移除事件(unbind())
- Jquery中的事件绑定$("#btn").bind("click",function(){ })
- jQuery学习19---事件中bind与unbind
- jquery事件绑定$('.next')bind("click",function(){ });和$(".next").live("click",function(){});
- Jquery揭秘系列:谈谈bind,one,live,delegate事件及实现
- jQuery bind/One/live三种绑定事件方法的区别