一:jq中事件

1.页面载入事件

	ready()方法
格式:
$(document).ready(function(){});
$(function(){});

2.绑定事件

	click(),dblclick(),focus(),blur(),mouseover(),mouseout(),change(),select()
keydown(),keyup()

js事件模型:

		第一种:在html标签上增加事件属性,让属性值等于处理该事件的函数名或程序代码
第二种:在js代码中设置元素的事件属性,让属性值等于处理该事件的函数名或程序代码

jq事件一种统一的事件模型:

		在页面加载完毕后,为每个选取元素的事件绑定响应函数
$(function(){
$("#btn").click(function(){//执行代码}); //统一的事件模型
$("#btn").bind(type,function(){//执行代码}); //type表示事件类型
//为所选对象绑定多个事件处理函数
$("#btn").bind({type:function(){//执行代码},type:function(){//执行代码}});
});

3.切换事件

	hover():使元素在鼠标移入与移出的事件中进行切换
hover(over,out); //over:移入时处理的函数,out:移出时处理的函数
toggle():依次调用N个指定的函数,直到最后一个,然后重复对函数进行调用
toggle(
function(){},
function(){},
function(){},...
);

4.其它事件

	one():为所选的元素绑定一个仅触发一次的处理函数
one(type,function(){}); //type表示事件类型
trigger():在所选的元素上触发指定类型的事件
trigger(type); //type表示触发事件的类型

二:事件机制

事件在触发后分为两个阶段:一个是捕获(capture),另一个是冒泡(bubbling).
往往事件触发后,直接执行冒泡过程,冒泡实质就是事件执行中的顺序.(大部分浏览器不支持捕获,jq也不支持) (单击按钮,按钮的父标签div的单击事件也被触发,同时div的父标签body的单击事件也随之触发)
冒泡过程:整个事件波及的过程就行水泡一样向外冒,故称为冒泡过程
停止事件的冒泡过程:可以通过return false;语句实现.(单击按钮就执行单击事件,不触发其它父元素的单击事件)

三:开关

toggleClass():样式添加/删除开关
hover():鼠标移入/移出开关
toggle():显示/隐藏开关(没参数时)

四:获取元素的宽高

$("body").css("width");		//获取页面内容css样式中的宽度属性值
$("body").height(); //获取页面内容的高度
$(window).width(); //获取浏览器窗口的宽度
$(window).css("height"); //获取浏览器窗口css样式中的高度属性值
css("width/height"):值得形式是包含了单位"px"的字符串 -- "160px"
height()/width():值是数字型的,更方便进行数学运算 -- 160

三:Jquery-event的更多相关文章

  1. 极客技术专题【007期】:jQuery初学者入门 - jQuery Event

    日期:2013-8-19  来源:GBin1.com 技术专题介绍 专题:jQuery初学者入门[第三讲:jQuery Event] 分享人:极客标签技术编辑 -Lana (请站内关注分享人) 授课时 ...

  2. 一个普通的 Zepto 源码分析(三) - event 模块

    一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块, ...

  3. 【前端】原生event对象和jquery event对象的区别

    标准DOM event对象转换成 jQuery event对象 $(event) jQuery event对象转换成 标准DOM event对象 event.originalEvent

  4. 第二十五课:jQuery.event.trigger的源码解读

    本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...

  5. 第二十四课:jQuery.event.remove,dispatch的源码解读

    本课还是来讲解一下jQuery是如何实现它的事件系统的.这一课我们先来讲一下jQuery.event.remove的源码解读. remove方法的目的是,根据用户传参,找到事件队列,从里面把匹配的ha ...

  6. 第二十三课:jQuery.event.add的原理以及源码解读

    本课主要来讲解一下jQuery是如何实现它的事件系统的. 我们先来看一个问题: 如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99 ...

  7. jQuery event,冒泡,默认事件用法

    jQuery event,冒泡,默认事件用法 <%@ page language="java" import="java.util.*" pageEnco ...

  8. HTML5 元素拖拽实现 及 jquery.event.drag插件

    如上图片: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  9. jQuery.event详细解析

    介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是 ...

  10. jQuery Event.which 属性详解

    jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对 ...

随机推荐

  1. sql-省市区

    insert into Area (codeid,parentid,cityName) values(11,0,'北京');insert into Area (codeid,parentid,city ...

  2. VSCode开发(一)——入门基础

    8天掌握EF的Code First开发之Entity Framework介绍   返回<8天掌握EF的Code First开发>总目录 本篇目录 Entity Framework概要 什么 ...

  3. CSS2.1SPEC:视觉格式化模型之width属性详解(下)

    本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absol ...

  4. iOS method swizz

    1: 防止按钮在一定时间内重复响应默认1秒 // // UIButton+AvoidDoubleClick.h // 51WaywardShop // // Created by jisa on 20 ...

  5. Segment Tree-732. My Calendar III

    Implement a MyCalendarThree class to store your events. A new event can always be added. Your class ...

  6. ffmpeg + nginx 搭建流媒体

    //安装nginx rtmp 流媒体服务 1.安装nginx+rtmp模块  brew install nginx-full --with-rtmp-module 2.修改配置文件 /usr/loca ...

  7. Window Navigator对象

    Window Navigator对象 txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>&quo ...

  8. ASP.NET 下使用特定身份完成windows服务的功能操作

    今天部署项目的发现一个问题: 在本地Win7系统下利用Web页面完成Windows服务的功能操作(启动.停止.安装.卸载)都是正常的,而部署到Server2008系统下,再使用Web页面完成windo ...

  9. 对称(DES/AES)与非对称(RSA/SSL/数字证书)加密介绍及实际应用

    本文不对具体的算法做深入研究,只是讲解各种安全算法的原理和使用场景. 一.数据校验算法 数据校验,是为保护数据的完整性,用一种指定的算法对原始数据计算出的一个校验值.当接收方用同样的算法再算一次校验值 ...

  10. RabbitMQ初学之二:直接发送消息到队列

    一. 背景 总前提:队列无论是在生产者声明还是在消费者声明,只有声明了,才能在RabbitMQ的管理界面看到该队列 生产者直接发送消息到队列,消费者直接消费队列中的消息,而不用指定exchange并绑 ...