JQuery入门(6)
来源:互联网 发布:淘宝怎么换货 编辑:程序博客网 时间:2024/06/15 02:44
一、一次性事件
one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数。
语法形式:$(selector).one(event,[data],function)
其中event参数必需,当添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。data参数可选,是传递到函数的额外数据。function参数必需,当事件发生时运行的函数。
示例如下:
<script type="text/javascript">$(function(){ $("p").one("click",function(){ $(this).animate({fontSize:"+=6px"}); });}) </script><h3>one()方法的使用</h3><p>这是一个段落。</p><p>这是另一个段落。</p><p>请点击 p 元素增加其内容的文本大小。每个 p 元素只会触发一次改事件。</p>
二、手动触发指定事件
trigger() 方法触发被选元素的指定事件类型。
语法形式:$(selector).trigger(event,[param1,param2,…])
其中event参数必需,是指定元素要触发的事件。可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。后面的参数可选,是指传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。
示例如下:
<script type="text/javascript">$(function(){ $("div").bind("append-content",function(){ $(this).append("<b>,那是我逝去的青春</b>"); }); $("div").trigger("append-content");}) </script>...省略代码<h3>替换元素</h3><h3>trigger()手动触发事件</h3><div>在夕阳下奔跑</div>
三、焦点事件
当元素获得焦点时,发生 focus 事件;当元素失去焦点时发生 blur 事件。
<script type="text/javascript">$(function(){ $("input").focus(function(){//获得焦点 $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){//失去焦点 $("input").css("background-color","#D6D6FF"); });})</script>...省略代码<h3>焦点事件</h3>输入名字: <input type="text"><p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p>
四、change()改变事件
当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textarea 和 select 元素。change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
语法形式:$(selector).change(function)
参数function是当change事件发生时运行的函数
示例如下:
<script type="text/javascript">$(function(){ $(".field").change(function(){ $(this).css("background-color","#FFFFCC"); });})</script>...省略代码<p>在某个域被使用或改变时,它会改变颜色。</p>名 称: <input class="field" type="text"><p>性别: <select class="field" name="male"> <option value="volvo">男</option> <option value="saab">女</option> <option value="fiat">中</option> <option value="audi">保密</option> </select></p>
0 0
- JQuery入门(6)
- jQuery入门[6]-动画
- jQuery入门[6]-动画
- jQuery入门
- jQuery入门
- jQuery 入门
- jquery 入门
- jQuery 入门
- Jquery 入门
- jquery 入门
- jQuery 入门
- JQuery 入门
- jquery 入门
- jquery入门
- jQuery入门
- JQuery 入门
- jquery入门
- jQuery入门
- SharedPreferences
- 多态的优越性
- Linux下wc命令详解
- JDBC ResultSet
- linux centos 6.5 zookeeper搭建
- JQuery入门(6)
- android studio module not specified
- Oracle OCP笔记(20)数据库安全与审计
- js技巧杂谈
- Linux下xargs命令详解
- javascript下的数组及其操作时间
- 2015实习面试腾讯产品经历
- App开发日报 2015-04-19
- Linux下find命令详解