jQuery使用手册之事件处理(7)

jQuery的事件处理,有方法:
hover(Function, Function)
当鼠标move
over时触发第一个function,当鼠标move out时触发第二个function
样式:

<style>.red{color:#FF0000}</style>

Html代码:

<div
id="a">sdf</div>

jQuery代码及效果

$(function(){
  $("#a").hover(function(){$(this).addClass("red");},
 
                          function(){ $(this).removeClass("red");
          
           
   });
})

最终效果是当鼠标移到id为a的层上时图层增加一个red样式,离开层时移出red样式

toggle

(Function,
Function)
当匹配元素第一次被点击时触发第一个函数,当第二次被点击时触发第二个函数
样式:

<style>.red{color:#FF0000}</style>

Html代码:

<div
id="a">sdf</div>

jQuery代码及效果

$(function(){
  $("#a"). toggle
(function(){$(this).addClass("red");},
                            
 function(){ $(this).removeClass("red");
                           
});
})

最终效果是当鼠标点击id为a的层上时图层增加一个red样式,离开层时移出red样式

另外jQuery的事件处理还有:
bind(type,
fn)是用户将一个事件和触发事件的方式绑定到匹配对象上。
trigger(type)是用户触发type形式的事件。$("p").trigger("click")
以及unbind();unbind(type);unbind(type,
fn)等

Dynamic event(Function)
绑定和取消绑定提供函数的简捷方式
例:

$("#a").bind("click",function() {
    
                                
 $(this).addClass("red");
})

也可以这样写:

$("#a").click(function() {
             
        
 $(this).addClass("red");
});

最终效果是当鼠标点击id为a的层上时图层增加一个red样式,

jQuery提供的函数有以下

  • 用于browers事件:
    • error(fn)
    • load(fn)
    • unload(fn)
    • resize(fn)
    • scroll(fn)
  • 用于form事件
    • change(fn)
    • select(fn)
    • submit(fn)
  • 用于keyboard事件
    • keydown(fn)
    • keypress(fn)
    • keyup(fn)
  • 用于mouse事件
    • click(fn)
    • dblclick(fn)
    • mousedown(fn)
    • mousemove(fn)
    • mouseout(fn)
    • mouseover(fn)
    • mouseup(fn)
  • 用于UI事件
    • blur(fn)
    • focus(fn)

以上事件的扩展再扩展为5类
比如click(fn);click();unclick();oneclick(fn);unclick(fn)

  • click(fn):增加一个点击时触发某函数的事件
  • click():可以在其他事件中执行匹配对象的click事件。
  • unclick ():不执行匹配对象的click事件。
  • oneclick(fn):只增加可以执行一次的click事件。
  • unclick
    (fn):增加一个点击时不触发某函数的事件。

上面列举的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法扩展。

时间: 2024-10-15 06:21:45

jQuery使用手册之事件处理(7)的相关文章

jQuery使用手册之 事件处理_jquery

hover(Function, Function)    当鼠标move over时触发第一个function,当鼠标move out时触发第二个function样式:<style>.red{color:#FF0000}</style>Html代码: <div id="a">sdf</div>jQuery代码及效果 $(function(){  $("#a").hover(function(){$(this).addC

jQuery使用手册

jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的! 下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip) jQuery Downloads (http://jquery.com/src/) 下载完成后先加载到文档中,然后我们来看个简单的例子! <script langu

《JavaScript和jQuery实战手册(原书第3版)》---第1章 编写第一个JavaScript程序 1.1 编程简介

本节书摘来自华章出版社<JavaScript和jQuery实战手册(原书第3版)>一书中的第1章,第1.1节,作者David Sawyer McFarland,姚待艳 李占宣 译,更多章节内容可以访问"华章计算机"公众号查看. 第1章 编写第一个JavaScript程序 HTML自身并没有太多智能:它不能做数学运算,不能判断某人是否正确填写了一个表单,而且不能根据Web访问者的交互来做出判断.基本上,HTML让人们阅读文本.观看图片或视频,并且单击链接转向拥有更多文本.图片

jquery 手册-jquery 中文手册-jquery中文api手册

本网站也提供一款在线jquery 中文手册教程 http://www.111cn.net/jquery/ 下面是一些我收藏到一些关于jquery的各位帮助文档与资料了,希望各位朋友喜欢哦. Jquery官方网站. http://jquery.com/ 附jQuery中文手册一部,jQuery中文api地址,http://jquery.org.cn/api/cn/api_11.xml http://wiki.jquery.org.cn/doku.php jQuery中文手册下载 http://ww

jQuery使用手册(收藏)

一直使用prototype.js,因为prototype的风格与ruby相似,用起来很舒服:这两天抽空看看jQuery,也是个很优秀的js基础库,特别是在选择器方面,相当实用.转自:http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html 翻译整理:Young.J 官方网站:http://jquery.com     jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更

[转贴]推荐--jQuery使用手册

原文:http://www.cnblogs.com/skylaugh/articles/595563.html   翻译整理:Young.J官方网站:http://jquery.com     jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!   下载地址:Starterkit (http://jquery.bassistance.de/jquery

了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)_jquery

2.测试jQuery包装集是否包含某些元素 如果你想测试一下某个jQuery包装集中是否包含某些元素,你首先可以尝试使用验证首个元素是否存在: 复制代码 代码如下: if($(selector)[0]){...} // 或者这样 if($(selector).length){...} 来看看这个例子: 复制代码 代码如下: //例子.如果你的页面有以下html代码 <ul id="shopping_cart_items"> <li><input class

jQuery 使用手册(六)_jquery

六:事件处理 hover(Function, Function)    当鼠标move over时触发第一个function,当鼠标move out时触发第二个function样式:<style>.red{color:#FF0000}</style>Html代码: <div id="a">sdf</div>jQuery代码及效果 $(function(){  $("#a").hover(function(){$(thi

《JavaScript和jQuery实战手册(原书第2版)》——2.11节注释

2.11 注释 有的时候,当你思考编程的时候,会觉得自己理解程序中所进行的所有事情.代码的每一行都有意义,并且更好的是,它们还都能工作.但是,一个月或两个月以后,当你的老板或客户请你对自己所编写的漂亮脚本做一个更改或添加一项新功能的时候,你可能会看着似曾相识的JavaScript代码抓耳挠腮:这个变量的作用是什么?为什么我要这样写程序呢?程序的这一段做什么事情呢? 我们很容易忘记一个程序是如何工作的以及为什么按照这样的方式来编写代码.好在大多数编程语言为程序员提供了一种方法,使得他们可以给自己或