一、事件

事件绑定的方法有两种：

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

方法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. Hibernate中对象的三种状态及相互转化

    1． 瞬时状态 (Transient) 当我们通过Java的new关键字来生成一个实体对象时,这时这个实体对象就处于自由状态,如下:  Customer customer=new Customer(“ ...

  2. python的函数(二)

    1,函数的变量 2,函数的返回值 1,函数的变量 1.0,函数的变量分为局部变量和全局变量. def fun(): x = 100 print x 这个x是局部变量,函数执行完后,x的变量就会销毁,只 ...

  3. python自学——文件处理（截取文件内容）

    #截断文件内容使用的函数为truncate()来截断文件中的内容# 注意当truncate()括号内没有定义对象时则会删除文件内容:当括号内为指定某个条件时文件会截取从0到指定位置的内容f=open( ...

  4. MySQL客户端连接方式

    MySQL连接方式MySQL除了最常见的TCP连接方式外,还提供SOCKET(LINUX默认连接方式).PIPE和SHARED MEMORY连接方式.各连接方式的服务器.客户端启动选项,及连接默认值见 ...

  5. fedora 开启 apache 并 开启目录浏览模式

    在内网中 暂时需要一台 文件 服务器,所以准备安装一台 http服务器并开启目录访问权限.这次使用 apache 在 fedora 28 机器上: 因为 fedora 28 已经包含 httpd 软件 ...

  6. [IDEA_5] IDEA 集成 Scala

    0. 说明 在 IDEA 中集成 Scala 1. IDEA 集成 Scala 1.1 安装 Scala 插件 Ctrl + Alt + S 进入设置 依次选中 Settings  -->  P ...

  7. 匿名访问windows server 2008 R2 文件服务器的共享

    匿名访问windows server 2008 R2 文件服务器的共享 匿名访问windows 2008 R2 文件服务器的共享,七步:第一步 取消简单文件共享:第二步 设置需要共享的文件夹every ...

  8. Java Collection集合方法

    一.简单方法 package cn.itcast.day15; import java.util.ArrayList; import java.util.Arrays; import java.uti ...

  9. Json.Net用法

    基本用法 Json.Net是支持序列化和反序列化DataTable,DataSet,Entity Framework和Entity的.下面分别举例说明序列化和反序列化. DataTable: //序列 ...

  10. C#中的事件(event)处理机制

    委托 语法 [访问修饰符] delegate 返回类型 委托名(); 委托的特点 类似于C++函数指针,但它是类型安全的:委托允许将方法作为参数进行传递:委托可用于定义回调方法:委托可以链接在一起:如 ...