三: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属性对 ...
随机推荐
- 根据已有的Jar包 一键生成对应的mavenpom.xml信息
根据已有的jar包信息一键生成对应的maven坐标信息 .想一个问题 假如 我有一个SSH的项目, jar包是配置在lib中, 我现在想把它做成maven格式的SSH项目 ,那么这些jar包在mav ...
- 《Python绝技:运用Python成为顶级黑客》 用Python实现免杀
1.免杀的过程: 使用Metasploit生成C语言风格的一些shellcode作为载荷,这里使用Windows bindshell,功能为选定一个TCP端口与cmd.exe进程绑定在一起,方便攻击者 ...
- uiautomator2
uiautomator2 该项目正在火热的开发中 uiautomator2 是一个可以使用Python对Android设备进行UI自动化的库.其底层基于Google uiautomator,Go ...
- 使用VS Code开发.Net Core 2.0 MVC Web应用程序教程之三(配置文件读取)
干了一天的活,还有点时间,给兄弟们写点东西吧. 大家有没有发现一个问题?那就是在.Net Core的MVC项目里面,没有.config文件了!!!同志们,没有config文件了啊,这样搞,我以后要做些 ...
- 2 rocketmq mqadmin 的用法详解
参考文档 http://jameswxx.iteye.com/blog/2091971 1.1. 控制台使用 RocketMQ 提供有控制台及一系列控制台命令,用于管理员对主题,集群,broker 等 ...
- 用absolute进行页面的自适应布局
用position:absolute和top,left,bottom,right进行设置可以进行页面的头部,底部,左边框,内容的自适应布局,可以代替position:fixed; <!DOCTY ...
- Eclipse启动和手动启动tomcat访问localhost:8080显示404问题总结
前言:建议对tomcat的文件结构和相关属性有较多了解.本文以eclipse的DynamicWebProject为讲解对象. 目录: eclipse添加tomcat关联注意点 tomcat404问题归 ...
- POJ 1131
#include <iostream> #include <string> using namespace std; ]; int main() { //freopen(&qu ...
- Luogu P4670 [BalticOI 2011 Day2]Plagiarism 题解
我最近是不是数据结构学傻了啊... 这道题看是1e5,所以复杂度为\(O(nlogn)\)的是完全可以跑过去的,然后看题,要求的对于每个数满足要求的区间的长度之和,我们自然而然的就可以想到用FHQ-T ...
- (转)MySQL 5.6 OOM 问题解决分享
本文来自:杨德华的原创分享 | MySQL 5.6 OOM 问题解决分享 原文:http://www.cnblogs.com/zhoujinyi/p/5763112.html 延伸阅读:Linux的内 ...