三:Jquery-event
一: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的更多相关文章
- 极客技术专题【007期】:jQuery初学者入门 - jQuery Event
日期:2013-8-19 来源:GBin1.com 技术专题介绍 专题:jQuery初学者入门[第三讲:jQuery Event] 分享人:极客标签技术编辑 -Lana (请站内关注分享人) 授课时 ...
- 一个普通的 Zepto 源码分析(三) - event 模块
一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块, ...
- 【前端】原生event对象和jquery event对象的区别
标准DOM event对象转换成 jQuery event对象 $(event) jQuery event对象转换成 标准DOM event对象 event.originalEvent
- 第二十五课:jQuery.event.trigger的源码解读
本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...
- 第二十四课:jQuery.event.remove,dispatch的源码解读
本课还是来讲解一下jQuery是如何实现它的事件系统的.这一课我们先来讲一下jQuery.event.remove的源码解读. remove方法的目的是,根据用户传参,找到事件队列,从里面把匹配的ha ...
- 第二十三课:jQuery.event.add的原理以及源码解读
本课主要来讲解一下jQuery是如何实现它的事件系统的. 我们先来看一个问题: 如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99 ...
- jQuery event,冒泡,默认事件用法
jQuery event,冒泡,默认事件用法 <%@ page language="java" import="java.util.*" pageEnco ...
- HTML5 元素拖拽实现 及 jquery.event.drag插件
如上图片: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- jQuery.event详细解析
介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是 ...
- jQuery Event.which 属性详解
jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对 ...
随机推荐
- EF 多对多循环引用序列化失败 解决办法
错误:Self referencing loop detected with type 'System.Data.Entity.DynamicProxies.tbldph_901D48A194FB31 ...
- JQuery - Ajax和Tomcat跨域请求问题解决方法!
在JQuery里面使用Ajax和Tomcat服务器之间进行数据交互,遇到了跨域请求问题,无法成功得到想要的数据! 错误信息部分截图: 通过错误信息判断知道已经发生在Ajax跨域请求问题了! 当前Tom ...
- django 实现全局支持跨域请求
Django 实现允许跨域请求 1.安装django-cors-headers pip install django-cors-headers 2.配置settings.py文件 INSTALLED_ ...
- JavaScript基础数组_布尔值_逻辑运算等(2)
day51 参考:https://www.cnblogs.com/liwenzhou/p/8004649.html 布尔值(Boolean) 区别于Python,true和false都是小写. var ...
- myeclipse注册码生成
import java.io.*; /** * <一句话功能简述> * <功能详细描述> * * @author 程松 * @date 2013-11-8上午8:50:34 * ...
- String 在内存中如何存储的
基本数据类型由于长度固定,且需要空间比较少,所以直接存储在栈中:而对象比较大,所以栈中只存储一个4btye的引用地址(逻辑地址). java中对String对象特殊对待,所以在heap区域分成了两块: ...
- eclipse 使用prolog编程
第一步:在电脑上安装swi-prolog 相应环境下载地址http://www.swi-prolog.org/download/stable 第二步: eclipse-help-install new ...
- CentOS7搭建FastDFS V5.11分布式文件系统-第一篇
1.绪论 最近要用到fastDFS,所以自己研究了一下,在搭建FastDFS的过程中遇到过很多的问题,为了能帮忙到以后搭建FastDFS的同学,少走弯路,与大家分享一下.FastDFS的作者淘宝资深架 ...
- rabbitmq系列三 之发布/订阅
1.发布/订阅 在上篇教程中,我们搭建了一个工作队列,每个任务只分发给一个工作者(worker).在本篇教程中,我们要做的跟之前完全不一样 —— 分发一个消息给多个消费者(consumers).这种模 ...
- J01-Java IO流总结一 《异常捕获》
下面演示java中处理I/O操作时的异常的正确方式,总结自书籍,书名忘啦~ 先看一种不正确的方式 方式一: import java.io.FileInputStream; import java.io ...