一: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. Java中的split和join

    Javascript中的用于字符串和数组之间转换的split和join函数使用起来非常方便,在Java中也有这两个函数,只不过join是在apache commons的lang库里实现的. impor ...

  2. Golang channel 的基本使用方法

    package main import ( "fmt" "learner/Add" "time" ) //a. 普通类型,普通变量保存的就是 ...

  3. CentOS7下 Python2.7.5升级为Python2.7.13

    参考:https://www.jianshu.com/p/fad3942fc0ed 第一步:查看Centos版本及Python版本 • CentOS版本 [root@ tools_package]# ...

  4. centos7系统的进程管理

    使用top命令,实时查看后台的进程,会看到以下信息 官方的解释: us: user cpu time (or) % CPU time spent in user space sy: system cp ...

  5. POJ 1063

    #include <iostream> using namespace std; int main() { //freopen("acm.acm","r&qu ...

  6. Chapter 3 Phenomenon——14

    They wheeled me away then, to X-ray my head. 他们把我移到了一边用X光照射我的头. 他们把我放到轮椅上,推着我去做头部X光检查. I told them t ...

  7. ubuntu16.04 nginx安装

    .gcc.g++依赖库 apt-get install build-essential apt-get install libtool .安装 pcre依赖库(http://www.pcre.org/ ...

  8. 破局人工智能:构建AI,与腾讯云一起探索语音应用场景

    本文来自腾讯云技术沙龙,本次沙龙主题为AI平台及智能语音应用解析 近年来,人工智能技术快速发展,与其他行业的结合也成为业界不断探索的方向.在人工智能基础和工具方面,AI平台已成为降低人工智能门槛的关键 ...

  9. ruby中nil?, empty? and blank?的选择

    In Ruby, you check with nil? if an object is nil: article = nil article.nil? # => true empty? che ...

  10. UIKit 框架之UISearchBar、UITableViewController

    // // tableViewController.m // tableVC // // Created by City--Online on 15/6/1. // Copyright (c) 201 ...