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).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样式

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-22 13:21:45

jQuery 使用手册(六)_jquery的相关文章

jQuery 使用手册(五)_jquery

五:动态效果       在将这部分之前我们先看个例子,相信做网页的朋友都遇到n级菜单的情景,但点击某菜单按钮时,如果它的子菜单是显示的,则隐藏子菜单,如果子菜单隐藏,则显示出来,传统的javascript做法是先用getElementById取出子菜单所在容器的id,在判断该容器的style.display是否等于none,如果等于则设为block,如果不等于这设为none,如果在将效果设置复杂一点,当点击按钮时,不是忽然隐藏和显示子菜单,而是高度平滑的转变,这时就要通过setTimeout来

jQuery 使用手册(三)_jquery

三:CSS操作      传统javascript对css的操作相当繁琐,比如<div id="a" style="background:blue">css</div>取它的background语法是 document.getElementById("a").style.background,而jQuery对css更方便的操作,$("#a").background(),$("#a")

jQuery使用手册之一_jquery

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

jQuery 使用手册(一)_jquery

一:核心部分$(expr)说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础参数:expr:字符串,一个查询表达式或一段html字符串例子:未执行jQuery前: <p>one</p><div>      <p>two</p></div>    <p>three</p>     <a href="#" id="test

jQuery 使用手册(四)_jquery

四:JavaScript处理 $.browser()  判断浏览器类型,返回boolen值 $(function(){    if($.browser.msie) {        alert("这是一个IE浏览器");}    else if($.browser.opera) {        alert("这是一个opera浏览器");}}) 当页面载入式判断浏览器类型,可判断的类型有msie.mozilla.opera.safari $.each(obj, f

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 学习笔记一_jquery

jquery基本信息 jquery的官方网站:www.jquery.com jquery解释: jquery是javascript的类库,提供了大量的javascript的类库和API,方便javascript开发. jquery API中文参考手册: http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html   前台数据提交到后台demo: 实例图:   功能点: 1.使用$("#UserName")获取id为UserNa