JQuery入门(6)

简介: 一、一次性事件 one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数。语法形式:$(selector).one(event,[data],function)其中event参数必需,当添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。data参数可选,是传递到

一、一次性事件
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>
目录
相关文章
|
存储 JavaScript 前端开发
JQuery(入门~选择器)
JQuery 是快速、简洁的JavaScript库,也就是写好的JS文件。
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
50 0
|
JavaScript 前端开发
jQuery01-入门-选择器
jQuery01-入门-选择器
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
69 0
|
2月前
|
JavaScript
Jquery从入门到精通
Jquery从入门到精通
|
6月前
|
JavaScript 前端开发 API
jQuery 入门:轻松创建与插入节点
jQuery 入门:轻松创建与插入节点
|
XML JSON JavaScript
jQuery入门到实战
jQuery入门到实战
jQuery入门到实战
|
存储 JavaScript 前端开发
JQuery入门基础
JQuery入门基础
46 0
|
JavaScript 前端开发 开发工具
jQuery入门级别介绍及选择器的使用----详细介绍
jQuery入门级别介绍及选择器的使用----详细介绍
60 0