一、事件

事件绑定的方法有两种：

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

方法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. 【Redis数据库】再有人问你CAP理论是什么，就把这篇文章发给他

    CAP是Consistency(一致性),Availability(可用性),Partition tolerance(分区容错性)的缩写.在学习redis过程中看到这个名词,查找各位大佬的文章发现这篇 ...

  2. LeetCode 休闲计划

    老年退役选手的 LeetCode 休闲之旅 前言 不知不觉两年多的大学时光悄然流逝,浑浑噩噩的状态似乎从来没有离开过自己. 这两年刷题似乎一直是常态.在退役之后的现在,深感有些东西一段时间没有接触,很 ...

  3. Beta阶段第二次冲刺

    Beta阶段第二次冲刺 严格按照Git标准来,组员有上传Git的才有贡献分没有的为0 代码签入图 1.part1 -站立式会议照片 2.part2 -项目燃尽图 3.part3 -项目进展 1.正在进 ...

  4. Alpha冲刺报告（5/12）（麻瓜制造者）

    今日已完成 明日计划 部分api示意图 燃尽图 scrum会议照片 今日已完成 邓弘立: 完成部分首页逻辑功能 符天愉: 写代码写着写着想起来昨天的登录接口有个非常zz的逻辑错误,今天修改完后应该没有 ...

  5. 怎样自适应ios设备大小

       在编写移动端GIS程序的时候.常常要依据ios设备的大小来设置UI.曾经我在ios程序中,须要定义设备的值(如:宽度和高度),如: 可是假设是不同的设备.如iphone4.iphone5,甚至是 ...

  6. BZOJ5334:[TJOI2018]数学计算(线段树)

    Description 小豆现在有一个数x,初始值为1. 小豆有Q次操作,操作有两种类型:  1 m: x = x  *  m ,输出 x%mod; 2 pos: x = x /  第pos次操作所乘 ...

  7. java 计算百分数方法

    俗话说好记性不如烂笔头,故记之. DecimalFormat decimalFormat = new DecimalFormat("##.00%"); System.out.pri ...

  8. <数据结构与算法分析>读书笔记--函数对象

    关于函数对象,百度百科对它是这样定义的: 重载函数调用操作符的类,其对象常称为函数对象(function object),即它们是行为类似函数的对象.又称仿函数. 听起来确实很难懂,通过搜索我找到一篇 ...

  9. <数据结构与算法分析>读书笔记--递归

    一.什么是递归 程序调用自身的编程技巧称为递归( recursion).递归做为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的 ...

  10. Nginx端口占用问题

    错误信息:nginx: [emerg] listen() to 0.0.0.0:80, backlog 511 failed (98: Address already in use) 主要是端口被占用 ...