Category: Javascript /Jquery / React / Bootstrap / Web

JavaScript: 文本替换, 替换全部, 正则替换文本, How to replace all occurrences of a string in JavaScript?

一次 replace只能替换一个,例如: var str = 'test test test test' console.log(str.replace('test', 'tester')) 通过正则可以一下替换全部: someString = 'the cat looks like a cat'; anotherString = someString.replace(/cat/g, 'dog'); // anotherString now contains "the dog looks like a dog"     更多参考:http://www.tizag.com/javascriptT/javascript-string-replace… Read More

jQuery事件系统详解

我们习惯理所当然的使用jQuery提供的高级事件API,jQuery帮我们处理了事件注册机制在各个浏览器间的兼容性,帮我们实现了高级的事件委托机制,大大的提高了我们的工作效率;然而我从来都不是一个知其然不知其所以然的工程师,你是否一样?如果你同样对其实现细节感兴趣,请仔细阅读本文。本文不涉及jQuery提供的自定义事件。 我将本文组织为如下结构: 1.使用原生API有什么问题 2.大牛是如何解决的 3.jQuery的实现 1. 使用原生API有什么问题 (1) 最原始的方法是直接对dom元素的onclick、onmouseover等属性赋值一个函数: Element.onclick = function(){ //e… 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 标签提供 native click 事件的触发,而我们想要做这件事情就需要用原生的 DOM element 来做: $('a').get(0).click(); 至于为… Read More

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

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器。 Query Selector 常用的 class、id、属性 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是 document.querySelector 返回第一个匹配的 Element document.querySel… 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/jque… 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,你可以到它的官… 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:/… 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插件不支持这个版本。目… 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.goo… Read More

JavaScript中使用PHP, 超好用的php.js, PHP extensions in JavaScript, phpjs

PHP extensions in JavaScript 项目地址:https://github.com/kvz/locutus   直接下载:php.js   npm 安装 npm install locutus Use vim index.js var sprintf = require('locutus/php/strings/sprintf') var echo = require('locutus/php/strings/echo') var effectiveness = 'futile' echo(sprintf('Resistance is %s', effectiveness)) var strings = require(… 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">&… 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[, op… Read More

jQuery: json美化插件, JSON高亮, JSON Syntax Highlighting & Formatting, rainbowJSON

rainbowJSON is a jQuery based JSON formatting and syntax Highlighting plugin to make your JSON objects & strings collapsible, colorful and more user readable. 项目地址:https://github.com/Stanko/jquery.rainbowJSON 直接下载: jQuery-Plugin-For-JSON-Syntax-Highlighting-Formatting-rainbowJSON 方法1:使用rainbowJSON插件 How to use it: 1.  引入css文件… Read More