事件

页面加载

在DOM中提供了load事件用于页面加载完毕之后执行机制，jQuery提供了ready（）方法实现相似的功能，但是存在以下的区别。
1.DOM中的load事件没有任何的简写形式，但是在jQuery的ready（）方法中提供了简写形式。
2.在HTML页面加载完成以后，load事件才会被触发；而在DOM节点树加载完毕以后，ready（）方法就会被调用。
3.一个HTML页面中只能存在一个load事件，但是可以存在多个ready（）方法。
ready（）方法的语法结构：

1.$(document).ready(function(){});

2.$().ready(function(){});//简写

3.$(function(){});//简写

事件绑定

单事件绑定与单事件解绑

单事件绑定

jQuery中提供了bind（）方法完成绑定事件，语法如下
$element.bind(type,data,callback);
type:表示绑定事件的名称，是字符串类型，没有‘on’。
data：作为element.data属性值传递给事件对象的额外数据对象(可选项)。
callback：表示绑定事件的处理函数。
示例代码如下：

<body>

<button id='btn'>按钮</button>

<script>

function click1(){

console .log('this  is button,');

}

$('#btn').bind('click',click1);

单事件解绑

jQuery中提供了unbind（）方法来解绑事件。具体方法如下：
$element.unbind(type[,data，callback])；

$('#btn').unbind('click');//只传递事件名称，解绑定该事件的所有处理函数。

$('#btn').undind('click'click1);//传递时间名称和指定的处理函数，解绑定该事件的指定处理函数。

多事件绑定与解绑

<style>

        #title {

            width: 100px;

            height: 20px;

            border: 1px solid black;

        }

        ul {

            list-style: none;

            padding: 0;

            display: none;

        }

        li {

            width: 100px;

            height: 20px;

            border: 1px solid black;

        }

    </style>

</head>

<body>

<div id="title">菜单</div>

<ul>

    <li>北京</li>

    <li>南京</li>

    <li>天津</li>

</ul>

<script>

// mouseover表示鼠标悬停在指定元素之上 mouseout表示鼠标从指定元素上移开

 //jQuery支持链式操作，多事件绑定时，事件名称之间使用空格分离。

$('#title').bind('mouseover mouseout', function(){

        if ($('ul').is(':hidden')) {

            $('ul').css('display','block');

        } else {

            $('ul').css('display','none');

        }

    });

 /*

        unbind()方法

        1.没有指定任何事件时 - 将指定元素的所有事件全部解绑定

        2.指定一个事件名称时 - 将指定元素的指定当个事件解绑定

        3.指定多个事件名称时 - 将指定元素的指定多个事件解绑定

 */

 $('#title').unbind('mouseover mouseout');

事件绑定方法的对比

jQuery中提供多组事件绑定与解绑定的方法
1.bind()与unbind() - jQuery 3.0版本后删除方法
2.on()与off()方法 - jQuery 1.7版本后新增方法
其实bind()与unbind()的底层方法就是on()和off()
3.live()与die() - jQuery 1.7版本后删除方法
作用 - 实现事件委托
4.delegate()与undelegate() - jQuery 1.6版本后新增方法，jQuery
3.0版本后删除方法
作用 - 实现事件委托
5.one() - 为事件绑定一次性的函数

事件切换

hover（）方法

jQuery中提供了hover()方法模拟鼠标悬停事件效果。
$element.hover(over,out);
示例代码如下：

   <style>

        #title {

            width: 100px;

            height: 20px;

            border: 1px solid black;

        }

        ul {

            list-style: none;

            padding: 0;

            display: none;

        }

        li {

            width: 100px;

            height: 20px;

            border: 1px solid black;

        }

    </style>

</head>

<body>

<div id="title">菜单</div>

<ul>

    <li>北京</li>

    <li>南京</li>

    <li>天津</li>

</ul>

<script>

 $('#title').hover(function(){

        $('ul').css('display','block');

    },function(){

        $('ul').css('display','none');

    });

</script>

</body>

事件模拟

jQuery中提供了trigger()方法用于模拟除法匹配元素绑定的事件
$element.trigger(type[,dat]);

<body>

<button id="btn">按钮</button>

<script>

    // 绑定事件 - 由用户行为进行触发，调用处理函数

    $('#btn').bind('click',function(){

        console.log('this is button.');

    });

    // 模拟用户触发事件

    $('#btn').trigger('click');

</script>

</body>

初步学习jQuery之事件的更多相关文章

  1. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  2. 学习jQuery的事件dblclick

    Insus.NET一直以来都是asp.net的开发的,少使用javascript.现在学习asp.net mvc了,jQuery是一个必须掌握的客户端语言. 不用急,慢慢来.一步一步.这篇练习jQue ...

  3. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  4. 初步学习jquery学习笔记（二）

    jQuery事件 jquery是为事件处理而设计的 什么是事件? 页面对不同访问者的相应叫做事件. 事件处理程序指的是html中发生某些事件所调用的方法 实例: 在元素上移动鼠标 选取单选按钮 点击元 ...

  5. 初步学习jquery学习笔记（三）

    jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...

  6. Jquery学习—jquery的事件

    1.Jquery事件1:one 1)one() 方法是为所选的元素绑定一个仅出发一次的处理函数,调用格式 one(type,[data],fn) 2)其中参数type是事件类型,即需要触发什么类型的事 ...

  7. 初步学习jquery学习笔记（一）

    什么是jquery? Jquery是javascript的一个函数库包含以下功能: html元素选取 html元素的操作 css操作 html事件的函数 javacript的特效 html的遍历和修改 ...

  8. 初步学习jquery学习笔记（六）

    jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...

  9. 初步学习jquery学习笔记（五）

    jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...

随机推荐

  1. git的忽略文件语法规范

    忽略文件语法规范 空行或是以 # 开头的行即注释行将被忽略. 可以在前面添加正斜杠 / 忽略当前路径文件,但不包括子目录的同名文件. 可以在后面添加正斜杠 / 来忽略文件夹. 可以使用 ! 来否定忽略 ...

  2. Leveldb--Slice

    http://www.kuqin.com/database/20110919/265041.html Slice非常简单的数据结构,它包括length和一个指向外部字节数组的指针.为什么使用Slice ...

  3. [2019杭电多校第四场][hdu6621]K-th Closest Distance（主席树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6621 题意为求区间[l,r]内第k小|a[i]-p|的值. 可以二分答案,如果二分的值为x,则判断区间 ...

  4. 三大浏览器（火狐-谷歌-IE浏览器）驱动版本下载

    1.chrome浏览器: 对于chrome浏览器,有时候会有闪退的情况,有时候也许是版本冲突的问题,我们要对照着这个表来对照查看是不是webdriver和chrome版本不对应 点击下载chrome的 ...

  5. [CQOI2009]dance跳舞（最大流+二分）

    [CQOI2009]dance跳舞 每个人拆成$2$个点,表示是否与喜欢的人跳舞 跳$m$首舞曲时,满足最大流为$n*m$ 二分$m$,跑最大流即可 #include<cstdio> #i ...

  6. python实现不同条件下单据体的颜色不一样，比如直接成本分析表中关闭的细目显示为黄色

    #引入clr运行库 import clr #添加对cloud插件开发的常用组件的引用 clr.AddReference('Kingdee.BOS') clr.AddReference('Kingdee ...

  7. WPF自定义样式篇-DataGrid

    WPF自定义样式篇-DataGrid 先上效果图: 样式:  <!--DataGrid样式-->    <Style TargetType="DataGrid"& ...

  8. pppd - 点对点协议守护进程

    总览 SYNOPSIS pppd [ tty_name ] [ speed ] [ options ] 描述 点对点协议 (PPP) 提供一种在点对点串列线路上传输资料流 (datagrams)的方法 ...

  9. 解决SVN异常 cleanup failed

    winndows上偶尔使用SVN的时候就会整出一些有的没的问题,比如"cleanup failed to process the following paths previous opera ...

  10. P2617 Dynamic Rankings(待修改区间第k大)

    题目链接:https://www.luogu.org/problemnew/show/P2617 题目: 题目描述 给定一个含有n个数的序列a[1],a[2],a[3]……a[n],程序必须回答这样的 ...