一、事件

事件绑定的方法有两种:

  • 绑定到元素
  • 查找元素后绑定事件

方法1:绑定到元素

<body>
<p onclick='func1()'>点击我</p>
</body> <script type="text/javascript">
function func1(){
alert('123'); }

  

方法2:查找到元素后绑定事件

<body>
<p>点击我</p>
</body> <script type="text/javascript">
$('p').click(function(){
alert('123');
}); </script>

  

说明:方法2的优点是不用在元素里面进行事件添加,相当于事件和元素分离。

1、浏览器事件

resize()//只要在浏览器窗口的大小改变时,根据不同的浏览器,该消息被追加到<div id="log">一次或多次。

<body>
<p id='log'>点击我</p>
</body> <script type="text/javascript"> $(window).resize(function() {
$('#log').append('<div>Handler for .resize() called.</div>');
}); </script>

  

2、scroll()//当用户在元素内执行了滚动操作,就会在这个元素上触发scroll事件。

$('#target').scroll(function() {
   $('#log').append('<div>Handler for .scroll() called.</div>');
});

  

2、文档加载

当DOM准备就绪时,执行的一个函数。

$( document ).ready(function() {
  // Handler for .ready() called.
});
等价于
$(function() {
  // Handler for .ready() called.
});
 
 

3、事件绑定

bind(事件名称,函数)和unbind(‘click’,function(){})

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});
 
on()和off()
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>
<script>
//定义函数aClick,然div显示,并展示慢慢消失效果。
function aClick() {
$("div").show().fadeOut("slow");
}
//绑定点击函数,针对#theone绑定aClick函数,并把内容改为‘Can Click!’
$("#bind").click(function () {
$("body").on("click", "#theone", aClick)
.find("#theone").text("Can Click!");
});
//找到unbind元素并绑定click事件,执行aClick函数,找到#theone元素然后把内容改为‘Does nothing.....’
$("#unbind").click(function () {
$("body").off("click", "#theone", aClick)
.find("#theone").text("Does nothing...");
});
</script> </body>
</html>

  

4、表单事件

  • .blur() //为 "blur" 事件绑定一个处理函数,或者触发元素上的 "blur" 事件
  • .change()//"change" 事件绑定一个处理函数,或者触发元素上的 "change" 事件。此事件仅限用于<input>元素,<textarea><select>元素。
  • .focus()//"focus" 事件绑定一个处理函数,或者触发元素上的 "focus" 事件。此事件起初适用于有限的元素,比如表单元素(<input><select>等)和链接元素(<a href>)。
  • .select()//"select" 事件绑定一个处理函数,或者触发元素上的该事件。此事件只能用在<input type="text"><textarea>
  • .submit()//"submit" 事件绑定一个处理函数,或者触发元素上的该事件。它只能绑定在<form>元素上。以下几种情况会导致表单被提交:用户点击了<input type="submit"><input type="image">, 或者 <button type="submit">,或者当某些表单元素获取焦点时,敲击Enter(回车键),都可以提交。

5、键盘事件

  • .keydown()
  • .keypress()
  • .keyup()

6、鼠标事件

    • .click()
    • .contextmenu()
    • .dblclick()
    • .focusin()
    • .focusout()
    • .hover()
    • .mousedown()
    • .mouseenter()
    • .mouseleave()
    • .mousemove()
    • .mouseout()
    • .mouseover()
    • .mouseup()
    • .toggle()

7、事件对象

  • event.currentTarget
  • event.data
  • event.isDefaultPrevented()
  • event.isImmediatePropagationStopped()
  • event.isPropagationStopped()
  • event.namespace
  • event.pageX
  • event.pageY
  • event.preventDefault()
  • event.relatedTarget
  • event.result
  • event.stopImmediatePropagation()
  • event.stopPropagation()
  • event.target
  • event.timeStamp
  • event.type
  • event.which

二、效果

1、基础

  • .hide()//隐藏
  • .show()//显示
  • .toggle()//切换(有就去掉,没有就增加)

2、自定义

  • .animate()
  • .clearQueue()
  • .delay()
  • .dequeue()
  • jQuery.dequeue()
  • .finish()
  • jQuery.fx.interval
  • jQuery.fx.off
  • .queue()
  • jQuery.queue()
  • .stop()

3、渐变

  • .fadeIn()
  • .fadeOut()
  • .fadeTo()
  • .fadeToggle()

4、滑动

  • .slideDown()
  • .slideToggle()
  • .slideUp()

JQuery快速入门-事件与效果的更多相关文章

  1. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

  2. JQuery快速入门

    Write less, do more, I like jQuery. jQuery是最常用的js库,整体来说非常轻量并易于扩展,对于移动应用可以使用其更轻量的孪生兄弟Zepto代替.其是由John ...

  3. jquery快速入门三

    事件 常用事件 click(function(){.......}) #触发或将函数绑定到指定元素的click事件 hover(function(){.....}) 当鼠标指针悬停在上面时触发.... ...

  4. jQuery 快速入门教程

    内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...

  5. JQuery 快速入门一篇通

    JQuery是什么? JQuery 是一套JavaScript库, 使用它,可以很方便的进行 JavaScript的编程.比如: 获取页面元素, 修改页面元素的CSS样式等等都可以以很简单的语法完成. ...

  6. jquery快速入门(二)

    jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...

  7. JQuery快速入门-简介

    一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

  8. jQuery快速入门专题

    jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...

  9. jquery快速入门(一)

    一.jquery加载文档 jquery加载文档(也叫入口函数) $(document).ready(function(){ // 这里写 jQuery 代码... }); 简写方式: $(functi ...

随机推荐

  1. python基础知识回顾之列表

    在python 中,主要的常用数据类型有列表,元组,字典,集合,字符串.对于这些基础知识,应该要能够足够熟练掌握. 如何创建列表: # 创建一个空列表:定义一个变量,然后在等号右边放一个中括号,就创建 ...

  2. AD域创建用户无法登录

    怎么登录都无法登录 解决办法: 创建用户的时候   将用户下次登录时须更改密码的勾去掉    不然需要修改密码才可以登录

  3. python基础学习23----IO模型(简)

    对于一个网络IO(network IO),它会涉及到两个系统对象,一个是调用这个IO的process (or thread),另一个就是系统内核(kernel).当一个read操作发生时,该操作会经历 ...

  4. pythonGUI编程-tkinter

    图形用户界面( G raphical U ser I nterface,GUI)编程 Python2.0级以下的版本叫做Tkinter,Python3.0改名为tkinter tkinter 模块:添 ...

  5. How to Be Assertive Asking for What You Want Firmly and Fairly

    What Is Assertiveness? It's not always easy to identify truly assertive behavior. This is because th ...

  6. MySQL基础之 视图

    视图 视图就是从一个表或多个表导出来的一张虚拟的表.通过这个窗口可以看到系统专门提供的数据,方便用户操作的同时增加了安全性. 视图的特点: 1.视图的列可以来自于不同的表. 2.视图是由实际存在的表创 ...

  7. HDFS NameNode内存详解

    前言 <HDFS NameNode内存全景>中,我们从NameNode内部数据结构的视角,对它的内存全景及几个关键数据结构进行了简单解读,并结合实际场景介绍了NameNode可能遇到的问题 ...

  8. Windows Phone 8 获取与监听网络连接状态(转)

    原文地址:http://www.cnblogs.com/sonic1abc/archive/2013/04/02/2995196.html 现在的只能手机对网络的依赖程度都很高,尤其是新闻.微博.音乐 ...

  9. October 22nd, 2017 Week 43rd Sunday

    Yesterday is not ours to recover, but tomorrwo is ours to win or lose. 我们无法重拾昨天,但我们可以选择赢得或者输掉明天. Eve ...

  10. linux sqlplus查询数据中文乱码解决方法记录

    locale-gen -lang en.US.UTF-8 重启.