一、事件

事件绑定的方法有两种：

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

方法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. Prometheus Node_exporter 之 FileSystem Detail

    FileSystem Detail /proc/filesystems 1. Filesystem space available type: GraphUnit: bytesLabel: Bytes ...

  2. 使用 Chef 自动执行 Azure 虚拟机部署

    Chef 是一个强大的工具,用于提供自动化和所需的状态配置. 使用我们的最新 cloud-api 版本,Chef 提供了与 Azure 的无缝集成,使得你能够通过单个命令设置和部署配置状态. 在本文中 ...

  3. 转：jQuery选择器大全(48个代码片段+21幅图演示)

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

  4. centos7 安装 jdk1.8

    首先是Linux的不同版本的额系统自带的配置是不一样的,比如centos6上有的自带的jdk环境的话要装1.8的就要进行卸载或者马上进行更改 jdk是java程序依赖的环境 首先查看你的系统下是否有j ...

  5. months_between()用法

    orcl中months_between()函数用法如下: 格式:即MONTHS_BETWEEN(日期1,日期2) 例如: select months_between(to_date('2018-10- ...

  6. 解决The valid characters are defined in RFC 7230 and RFC 3986错误问题

    分析原因: 导致上述问题是因为tomcat自tomcat 8.0.35版本之后对URL参数做了比较规范的限制,必须遵循RFC 7230 and RFC 3986规范,对于非保留字字符(json格式的请 ...

  7. buffers与cached

    下面是buffers与cached的区别. buffers是指用来给块设备做的缓冲大小,他只记录文件系统的metadata以及 tracking in-flight pages. cached是用来给 ...

  8. react如何引入外部文件的整理

    1 引入组件 首先就应该是安装了,安装在环境中后通过 import { Select, Button, Icon, QueueAnim } from 'antd'; 就可以把需要的组件引用进来了~ 2 ...

  9. aused by: org.apache.xmlbeans.SchemaTypeLoaderException: XML-BEANS compiled schema: Incompatible min

    版权声明:转载请注明出处 https://blog.csdn.net/seashouwang/article/details/24025871 6.导入Word2007-docx,Excel-2007 ...

  10. Python中让MySQL查询结果返回字典类型的方法

    import pymysql host='localhost' user='root' passwd='root' port=3306 db='test' db=pymysql.connect( ho ...