分类:Javascript /Jquery / Bootstrap / Web

jQuery事件系统详解

我们习惯理所当然的使用jQuery提供的高级事件API,jQuery帮我们处理了事件注册机制在各个浏览器间的兼容性,帮我们实现了高级的事件委托机制,大大的提高了我们的工作效率;然而我从来都不是一个知其然不知其所以然的工程师,你是否一样?如果你同样对其实现细节感兴趣,请仔细阅读本文。本文不涉及jQuery提供的自定义事件。 我将本文组织为如下结构: 1.使用原生API有什么问题 2.大牛是如何解决的 3.jQuery的实现 1. 使用原生API有什么问题 (1) 最原始的方法是直接对dom元素的onclick、onmouseover等属性赋值一个函数: Element.onclick = function(){ //event handler logic }; 然而这种方式一次只能添加一个事件处理函数,不具有通用性。 (2) 对于符合最新W3C标准的浏览器(IE>8,chrome,firefox,android)可以使用element.addEventListener,将事件类型作为一个参数传递。 element.addEventListener(‘click’,function(){… Read More

jQuery: 事件触发器trigger, 事件模型, 默认行为执行顺序, Native click won’t be triggered by jQuery

一般来讲,直接 trigger 一个 a 标签的 click 事件是不被浏览器允许的,正常情况下都是由用户的 click 事件来触发一个「点击动作」,在这个「动作」中,我们可以调用触发其他的 click 事件,就好像用户点在了其他的标签上。按照长期使用 jQuery 的思路,一般就会直接使用下面的方式来触发: $('a').click(); 或者是: $('a').trigger('click'); 很遗憾的是,这样是不行的,jQuery 并不会为 a 标签提供 … Read More

原生替代jQuery, You Don’t Need jQuery

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器。 Query Selector… Read More

jQuery 插件: 识别浏览器, 判断浏览器类型和版本, browser detection

项目地址:https://github.com/gabceb/jquery-browser-plugin CDN下载:https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js 用法: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script> 判断 IE ,返回 true 或者 false,支持所有IE浏览器,包括IE 11 $.browser.msie; 判断 WebKit 浏览器 (Safari, Chrome… Read More

jQuery :使用jquery.gritter.js实现弹框提示信息, 使用JQuery.Gritter做通知

  使用JQuery.Gritter做通知 JQuery.Gritter是一个基于JQuery的类似Growl的通知插件。它很容易使用而且能给用户留下深刻的印象。海鸥使用了它来做网站通知,你也使用把它应用到你的网站上。 官方教程 这里是JQuery.Gritter的Github主页,https://github.com/jboesch/Gritter。 如何使用它 通过Bower来安装JQuery.Gritter。只需要执行bower install jquery.gritter --save就会自动将JS和CSS文件下载到bower_components目录。 如果你不想使用Bower,你可以到它的官方网站下载JS和CSS文件。注意CSS文件也是很重要的,它会为你美化通知窗口。 引入js和css文件 <link rel="stylesheet" type="text/css" href="css/jquery.gritter.css" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script>… Read More

jQuery-jeditable: 点击即编辑, jquery双击编辑内容, jquery实时编辑插件, jQuery 即时编辑插件

实时编辑,就是在原位置直接编辑,不用另打开一个编辑页面。有时候我们只是想修改其中一个属性的值,打开一个完整的编辑页面实在没必要,实际效果就是像phpMyAdmin那样子。 插件官网:http://www.appelsiini.net/projects/jeditable 项目地址:https://github.com/NicolasCARPi/jquery_jeditable/ 在线demo:https://jeditable.elabftw.net/ 在线API:https://jeditable.elabftw.net/api/ 使用方法: 一、导入js文件 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/2.0.3/jquery.jeditable.min.js"></script> 二、基本案例 $('.editable').editable('editable.php',{ type:'textarea',//实时编辑input框的type cancel:'取消',//取消编辑按钮的文字 submit:'确定',//确认提交按钮的文字 indicator:'保存中...',//提交处理过程中显示的提示文字 tooltip:'单击编辑...'//鼠标悬停时的提示信息 });… Read More

jQuery选择什么版本 1.x? 2.x? 3.x?, jQuery各个版本的具体区别和特性

类似标题:jQuery选择什么版本?jquery一般用什么版本?jquery ie8兼容版本。jquery什么版本稳定? 目前jQuery有三个大版本: 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日) 2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日) 3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.3.1(2018年5月20日) 1.X大版本下,细分版本非常多,各个版本的函数都会有一定的差异。网上看到的很多教程大多是1.x版本的。jquery官方手册:http://api.jquery.com/ 维护ie678是意见头疼的事情,一般我们都会额外加载一个css和js单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,电脑端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对ie678的支持。    jquery3.0 新特性: 1. 移除旧的IE工作区 新的最终版最主要的目标是更加快速,更加时尚,因此,那些支持早于IE9版本的相关技术与工作区都被移除了。这意味着如果你想要或者需要支持IE6-8,你必须用回1.12版本,因为甚至是2.X版本都无法完整支持早于IE9的浏览器。 2. jQuery 3.0运行在Strict Mode下… Read More

jQuery: table列序列重排, 上移下移排序, 拖拽排序, 拖拽table列, dragtable table, Visually reorder all your table columns

  1. 拖拽排序 项目地址:https://github.com/akottr/dragtable 官网:http://www.danvk.org/wp/dragtable/index.html 直接下载:dragtable-master.zip 用法: 1. 引入库:jquery和 jquery ui 是必须的,dragtable.css 可以自定义 <link rel="stylesheet" type="text/css" href="//rawgithub.com/akottr/dragtable/master/dragtable.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>… Read More

Javascript: 数字处理, 数字格式化, Numeral.js

项目:https://github.com/adamwdraper/Numeral-js 下载:https://github.com/adamwdraper/Numeral-js/zipball/master 直接下载:Numeral-js.zip 用法 Use it 1. 直接引入,或者CDN引入。 <script src="numeral.min.js"></script> or include from cdnjs.com <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script> 2. In Node.js npm… Read More

Bootstrap: 如何修改Modal长度,Modal如何居中, How to increase Bootstrap Modal Width and be Centered?

上图有错误修改的结果, 解决方案如下: HTML: <a href="#shipping_calculator" title="" data-toggle="modal">TEST</a> <div id="shipping_calculator" class="modal fade" tabindex="-1"> <div class="vertical-alignment-helper"> <div class="modal-dialog vertical-align-center"> <div class="modal-content">

Javascript: Web API中的Blob, 使用URL.createObjectURL创建url对象, Blob 视频地址, 浏览器中创建和下载文件

在一般的Web开发中,很少会用到Blob,但Blob可以满足一些场景下的特殊需求。Blob,Binary Large Object的缩写,代表二进制类型的大对象。Blob的概念在一些数据库中有使用到,例如,MYSQL中的BLOB类型就表示二进制数据的容器。在Web中,Blob类型的对象表示不可变的类似文件对象的原始数据,通俗点说,就是Blob对象是二进制数据,但它是类似文件对象的二进制数据,因此可以像操作File对象一样操作Blob对象,实际上,File继承自Blob。 Blob 实例:点我   Blob基本用法 创建 可以通过Blob的构造函数创建Blob对象: Blob(blobParts[, options]) 参数说明: blobParts:数组类型,数组中的每一项连接起来构成Blob对象的数据,数组中的每项元素可以是ArrayBuffer, ArrayBufferView, Blob, DOMString 。 options:可选项,字典格式类型,可以指定如下两个属性: type,默认值为 "",它代表了将会被放入到blob中的数组内容的MIME类型。… Read More