Jquery中事件总结 Click ,Animate,One,Bind,UnBind等

时间：2022-08-26 10:09:49

一：笔者第一个要说的事件 animate

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() 方法。

向 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。
标签：

相关文章