JQuery入门(6)

一、一次性事件

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>
时间: 2024-10-31 01:50:12

JQuery入门(6)的相关文章

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

jQuery 入门笔记1

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多). 1:jQuery使用 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#

jQuery入门(2)使用jQuery操作元素的属性与样式

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 一.区分DOM属性和元素属性 对于下面这样一个标签元素: <img id='img' src="images/image.1.jpg" alt='1' class="imgs"></img> 我们通常将id.src.alt.class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性

jquery基础教程 - 第一章 JQUERY入门

Jquery基础教程 - 第一章 JQUERY入门 内容提要 1.jquery能做什么 2.jquery为什么如此出色 3.第一个jquery驱动的页面 4.纯javascript与jquery 5.开发工具 6.小结 1.jquery能做什么 取得文档中的元素 -- jQuery为准确的获得需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制. 找到所有应用了.content class样式的div中所有的P标签             $('div.content').find('p'

jquery入门之jquery简

Jquery是javascript中中众多框架中的一个框架.它是轻量级的js库,以DOM元素为核心一点一点地给他们添加新功能.Jquery的特色就是"面向集合和方法连缀",Jquery的设计秉承了一致性和对称性原则,它的大部分概念都是从html和css的结构中借用来的.它利用CSS选择符创建jquery对象,为这些对象提供丰富的方法,批量操作其中的DOM元素,而且让所有方法尽可能再返回这个对象以实现方法连缀调用,这些绝妙的创意组合在一起,让写javascript代码变得妙趣横生! Jq

jQuery 入门教程(二): 基本语法

学习jQuery之前需要你有下面几个方面的基本知识 HTML CSS JavaScript jQuery 的基本语法 $(selector).action() $ 符合定义这是一个jQuery语句 (selector) 用来选择某个HTML元素,其语法和CSS的selector语法一样. action() 定义操作该HTML元素的方法. 比如: $(this).hide() – 隐藏当前元素. $("p").hide() – 隐藏所以 <p> 元素. $(".te

jQuery入门(3)事件与事件对象

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 一.事件与事件对象 首先看一下我们经常使用的添加事件的方式: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jQuery 入门教程(一): 概述

jQuery是一套跨浏览器的JavaScript函式库,简化HTML与JavaScript之间的操作,下面为摘自Wikepedia上的jQuery说明: jQuery 是开源软件,使用MIT许可证授权.[4] jQuery的语法设计使得许多操作变得容易,如操作文档对象(document).选择DOM元素.创建动画效果.处理事件.以及开发Ajax程序.jQuery 也提供了给开发人员在其上创建插件的能力.这使开发人员可以对底层交互与动画.高级效果和高级主题化的组件进行抽象化.模块化的方式使 jQu

jQuery 入门教程(三): Selectors

jQuery Selector 是jQuery库中非常重要的一个组成部分. jQuery Selector 用来选择某个HTML元素,其基本语句和CSS的选择器(Selector)是一样的,所有jQuery selector 都是以$()开始. 选择HTML标记 选择某个HTML元素的方法是直接使用该元素的标记名称,比如选择所有<p>元素 $("p") 下面的例子当用户点击一个按钮时,隐藏所有的<p>元素 $(document).ready(function()

jQuery入门(4)jQuery中的Ajax应用

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax应用 一.原始Ajax与jQuery中的Ajax 首先通过实例, 来看一下jQuery实现Ajax有多简单. 下面是一个使用原始Ajax的示例: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "