jquery事件

jquery 手机触摸事件

由 无人久伴 提交于 2020-02-08 22:16:02
最近做移动端的项目，涉及触摸事件很频繁；我接下来介绍下三个基本的触摸事件： touchstart： 触摸开始的时候触发 touchmove： 手指在屏幕上滑动的时候触发 touchend： 触摸结束的时候触发 下面是我刚写的一个小demo，可以复制体验下，测试的话打开浏览器的开发者工具的手机模式，点击屏幕移动就能体验到了，滚动鼠标是无效的哦~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ss</title> <style>.sb{width: 100%;height: 200px;background-color: red}</style> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div style="height: 3000px"> <div class="sb" ></div> </div> <script> //touchmove 手指不放发生 $('body').on('touchmove',function(){ $('.sb').css({'display':'none'}) //隐藏div

jquery插件封装

由 為{幸葍}努か 提交于 2020-02-08 18:46:47
2018-01-30 #jquery插件封装 入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性，此处添加的对象属性的名称就是你插件的名称： jQuery.fn.myPlugin = function(){ //你自己的插件代码 }; 用户非常喜欢的$符号哪里去了？ 它仍然存在，但是，为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为$符号，这样可以避免$号被其他库覆写。 (function ($) { $.fn.m​​yPlugin = function () { //你自己的插件代码 }; })(jQuery); 在这个封闭程序中，我们可以无限制的使用$符号来表示jQuery函数。 环境 现在，我们可以开始编写实际的插件代码。 但是，在这之前，我们必须得对插件所处的环境有个概念。 在插件的范围里， this关键字代表了这个插件将要执行的jQuery对象， 这里容易产生一个普遍的误区，因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中，如下所示。 (function ($) { $.fn.m​​yPlugin = function () { //此处没有必要将this包在$号中如$

jQuery 事件方法

由 旧城冷巷雨未停 提交于 2020-02-07 01:44:37
方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发、或将函数绑定到指定元素的 blur 事件 change() 触发、或将函数绑定到指定元素的 change 事件 click() 触发、或将函数绑定到指定元素的 click 事件 dblclick() 触发、或将函数绑定到指定元素的 double click 事件 delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 die() 移除所有通过 live() 函数添加的事件处理程序。 error() 触发、或将函数绑定到指定元素的 error 事件 event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。 event.pageX 相对于文档左边缘的鼠标位置。 event.pageY 相对于文档上边缘的鼠标位置。 event.preventDefault() 阻止事件的默认动作。 event.result 包含由被指定事件触发的事件处理器返回的最后一个值。 event.target 触发该事件的 DOM 元素。 event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 event.type 描述事件的类型。 event.which 指示按了哪个键或按钮。 focus

jQuery事件处理

由 强颜欢笑 提交于 2020-02-07 01:42:47
浏览器的事件模型 DOM第0级事件模型 Event实例 他的属性提供了关于当前正被处理的已触发事件的大量信息。这包括一些细节，比如在哪个元素上触发的事件、鼠标事件的坐标以及键盘事件中单击了哪个键。 事件冒泡 当触发 dom 树中一个元素上的事件时，事件模型会检查这个元素是否已经创建了特定的事件处理器。如果是，就会调用已创建的事件处理器。然后，事件模型会检查目标元素的父元素，看其是否已经为此事件类型创建了处理器。如果是，就调用已创建的处理器，之后检查它的父元素，以及父元素的父元素，以此类推，直到 dom 树的顶部。 DOM第2级事件模型 IE事件模型 jQuery事件模型 使用jQuery绑定事件处理器 <html> <head> <title>jQuery Events Example</title> <script type="text/javascript" src="../scripts/jquery-1.7.1.js"></script> <script type="text/javascript"> $(function () { $('#example') .bind('click', function (event) { alert('BOOM once!'); }) .bind('click', function (event) { alert('BOOM

jQuery 双击事件（dblclick）时，不触发单击事件(click)

由 大城市里の小女人 提交于 2020-02-07 00:55:35
我这是转载的文字 原文地址：http://www.cnblogs.com/wyblog/archive/2011/12/15/2289219.html 万恶的双击事件啊！！ 　　在jQuery的事件绑定中，执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素（如div等），如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时，不会触发双击事件(dblclick)， 执行双击事件(dblclick)时却会触发两次单击事件(click)。 　　 先看一下点击事件的执行顺序： 　　单击(click)：mousedown，mouseout，click； 　　双击(dblclick)：mousedown，mouseout，click ， mousedown，mouseout，click，dblclick； 　　在双击事件(dblclick)，触发的两次单击事件(click)中，第一次的单击事件(click)会被屏蔽掉，但第二次不会。也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。 　　如此这般的话，只需消灭掉多余的一次单击事件(click)，这个问题就解决了。 　

jQuery 双击事件（dblclick）时，不触发单击事件(click)

由 怎甘沉沦 提交于 2020-02-07 00:55:19
在jQuery的事件绑定中，执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素（如div等），如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时，不会触发双击事件(dblclick)， 执行双击事件(dblclick)时却会触发两次单击事件(click)。 　　 先看一下点击事件的执行顺序： 　　单击(click)：mousedown，mouseout，click； 　　双击(dblclick)：mousedown，mouseout，click ， mousedown，mouseout，click，dblclick； 　　在双击事件(dblclick)，触发的两次单击事件(click)中，第一次的单击事件(click)会被屏蔽掉，但第二次不会。也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。 　　如此这般的话，只需消灭掉多余的一次单击事件(click)，这个问题就解决了。 　　setTimeout 　　在jQuery的$(document).ready(function(){})里面直接开写： //定义setTimeout执行方法 var TimeFn =

Jquery

由 偶尔善良 提交于 2020-02-05 01:46:58
了解Jquery 什么是JQuery jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQueryJavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。简单来说，Jquery是简化版的JS Jquery的优点： 因为jq是轻量级别的框架，大小不大30kb 它有强大的选择器，出色的DOM操作封装 有可靠的事件处理机制 完善的ajax 出色的浏览器兼容性 支持链式操作，隐式迭代 行为层(功能)和结构层(页面元素) 的分离，还支持丰富的插件 Jquery的使用 引入Jquery库： 在使用jquery之前，必须要引入jquery库 <script src = "jquery-3.4.1.min.js"></script>"· 声明Jquery变量： [^$ 声明该变量是jq变量 同时$也是JQuery的简写] var $ 变量名 = 赋值内容; 例如： var $ a = 10 ; jq中顶级对象是 $ 或者jQuery关键字 注意： jQuery中的 $ 和 jQuery关键字 本身同为一个对象 Jquery变量与Dom变量的转换： Dom变量转Jquery变量： var oDiv = document

jQuery入门

由 梦想的初衷 提交于 2020-02-05 00:22:59
简介 What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. jQuery是一个快 轻量 丰富的JavaScript库，主要封装了四块内容，分别是：html遍历操作，事件，动画 和Ajax. 并且使用简单，丰富和易于扩展。 官网：www.jQuery.com www.bootcdn.cn 下载jQuery jQuery的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

JQuery this和$(this)的区别及获取$(this)子元素对象的方法

由 允我心安 提交于 2020-02-04 18:12:26
1.JQuery this和$(this)的区别 // this其实是一个Html 元素。 // $this 只是个变量名，加$是为说明其是个jquery对象。 // 而$(this)是个转换，将this表示的dom对象转为jquery对象，这样就可以使用jquery提供的方法操作。 相信很多刚接触JQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？ 首先来看看JQuery中的 $() 这个符号，实际上这个符号在JQuery中相当于JQuery（）,即$(this)=jquery();也就是说，这样可以返回一个jquery对象。那么，当你在网页中alert($('#id'));时，会弹出一个[object Object ]，这个object对象，也就是jquery对象了。 那么，我们再回过头来说$(this)，这个this是什么呢？假设我们有如下的代码： $("#desktop a img").each(function(index){ alert($(this)); alert(this); } 那么，这时候可以看出来： alert($(this)); 弹出的结果是[object Object ] alert(this); 弹出来的是[object HTMLImageElement] 也就是说，后者返回的是一个html对象

jQuery中on()方法用法实例

由 别说谁变了你拦得住时间么 提交于 2020-02-04 11:15:36
本文转载自： https://www.cnblogs.com/jiangxiaobo/p/6548335.html 作者：jiangxiaobo 转载请注明该声明。 这篇文章主要介绍了jQuery中on() 方法 用法,实例分析了on()方法的功能、定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法用法。分享给大家供大家参考。具体分析如下： 此方法可以在匹配元素上绑定一个或者多个事件处理函数。 使用off()方法可以删除on()方法绑定的事件。 语法结构一: $(selector).on(events,[selector],[data],fn) 参数列表: 参数 描述 events 一个或多个用空格分隔的事件类型和可选的命名空间。 selector 可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。 如果选择是空或被忽略，当它到达选定的元素，事件总是触发。 data 可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。 fn 该事件被触发时执行的函数。 false值也可以做一个函数的简写，返回false。 实例代码: 实例一: <! DOCTYPE html > < html > < head > < meta charset =" utf-8" >
订阅 jquery事件