三: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属性对 ...
随机推荐
- openvswitch BFD 简介
为了保护关键应用,网络中会设计有一定的冗余备份链路,网络发生故障时就要求网络设备能够快速检测出故障并将流量切换至备份链路以加快网络收敛速度.目前有些链路(如POS)通过硬件检测机制来实现快速故障检测. ...
- Python3.5 学习十二 数据库介绍
MYSQL介绍: 主流三种数据库:Oracle.Mysql.Sqlserver Mysql安装和启动: windows 1安装 2启动服务 3进入bin目录,打开命令行 4 mysqladmin -u ...
- 2018 Multi-University Training Contest 3
claris出题,orzzzzzz.前一天晚上说是贪心专场,喵喵喵??? 之前clsris说难题扔多校了,据说07,13是女生赛撤下来的题,喵喵喵??? A.Ascending Rating 题目传送 ...
- 《Vue 编程房内考》
古人有云:码农爱coding,则为之计深远. 众人问:何为之? 古人曰:底层.算法和架构. 众木然. 古人又曰:多看源码. 以下内容是我在学习 Vue-2.5.2 源码时的一个总结. 第一章 活捉Vu ...
- Lora通信解决方案对比
欢迎大家进群交流分享:QQ群:773082801
- java泛型---通配符,泛型嵌套
package generic; import java.util.ArrayList; import java.util.List; /** * ? -->通配符,类型不确定,用于声明 变量| ...
- 【链表】Sort List(归并排序)
题目: Sort a linked list in O(n log n) time using constant space complexity. 思路: nlogn的排序有快速排序.归并排序.堆排 ...
- gulp4.0 前端构建脚手架
最近看了下gulp4.0的升级,感觉和3.0相比变化还是比较大的,很多3.0的写法和插件会出现一些莫名其妙的变化,详细的变化就先不说了,这里我直接把我配置好的代码拿过来吧,方便各位可以更好的学习和使用 ...
- 关于daterangepicker取消默认值的设置
1.项目中用到了daterangepicker这个插件,需求要求不能有默认值. 2.查资料得知,可以修改插件内的属性 autoUpdateInput值来实现这个效果. 顾虑有二: 1.修改插件内容,导 ...
- mongodb二进制安装与yum安装
一.什么是mongodb MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当 ...