Category: Javascript /Jquery / Bootstrap / Web

JQuery: 操作数组 each、map、grep、filter, 循环数组, 编辑数组

Jquery中对数组的操作大致有一下几种形式: 1、$.each( collection, callback(indexInArray, valueOfElement) ) $.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字),这个函数返回所遍历的对象,也就是这个函数的第一个参数,注意这里还是原来的那个数组,这是和map的区别。 其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。 下面举个例子: var mem = ['a','b','c']; var returnvalue = $.each(mem, function(index) { alert(index);… Read More

Javascript: 程序员装X必备—19个JS简写技巧,让你写代码速度翻倍!!

代码精炼是每个有追求的程序所向往的,本文总结了19个JavaScript的简写技术,其中包括三元操作符、短路求值简写方式、声明变量简写方法等等,希望对你有帮助。 1.三元操作符当想写if…else语句时,使用三元操作符来代替。 简写: 也可以嵌套if语句: 2.短路求值简写方式当给一个变量分配另一个值时,想确定源始值不是null,undefined或空值。可以写撰写一个多重条件的if语句。 或者可以使用短路求值方法: 3.声明变量简写方法 简写 4.if存在条件简写方法 简写: 只有likeJavaScript是真值时,二者语句才相等 如果判断值不是真值,则可以这样: 简写 5.JavaScript循环简写方法 简写 也可以使用Array.forEach: 6.短路评价给一个变量分配的值是通过判断其值是否为null或undefined,则可以: 简写 7.十进制指数当需要写数字带有很多零时(如10000000),可以采用指数(1e7)来代替这个数字: 简写… Read More

jQuery: 如何编写 jQuery 插件

译自 jQuery Plugins / Authoring   创建插件 看来 jQuery 你已经用得很爽了,想学习如何自己编写插件。非常好,这篇文档正适合你。用插件和方法来扩展 jQuery 非常强大,把最聪明的功能封装到插件中可以为你及团队节省大量开发时间。 开始 要编写一个 jQuery 插件,需要为 jQuery.fn 对象增加一个新的函数属性,属性名就是插件的名字 jQuery.fn.myPlugin =… Read More

添加holiday假日到fullcalendar ,Add Holiday Calendars to Full Calendar

如果你使用fullcalendar,添加holiday假日的方法如下: googleCalendarApiKey : 'PUT-YOUR-GOOGLE-API-HERE', // google api key eventSources: [ {url:'https://www.google.com/calendar/feeds/en.usa#holiday@group.v.calendar.google.com/public/basic',cache:true}, // us holiday {url:'https://www.google.com/calendar/feeds/zh.china#holiday@group.v.calendar.google.com/public/basic',cache:true}, // china holiday //'https://www.google.com/calendar/feeds/en.christian#holiday@group.v.calendar.google.com/public/basic', //… Read More

改造FullCalendar增加节气、节日和农历显示, add lunar for FullCalendar

网上看了FeiFei些的《fullCalendar改造计划之带农历节气节假日的万年历》文章,按照他的方法改造发现他用的是老版本的插件,新版本代码结构变动很大,无奈自己重新读源码改造之,记录下来,给有需求的朋友一点参考。 FullCalendar官网(https://fullcalendar.io/) 改造使用新的版本,v 3.0.1。 首先看下改造成功后的预览图吧: 一、汉化 现在插件已经自带了本地化文件,所以直接加载插件包中的locale/zh-cn/js即可。 二、增加农历,节气,节假日显示 关于直接调用Google Calendar的订阅我就不说了,墙的厉害。 下面说说直接修改源文件,这个就麻烦点,不过自定义程度很高,缺点就是插件更新麻烦。 按照FeiFei的方法,使用hao123的js库(点击下载lunar.js),这个库包含了农历、节气和节假日。 直接将lunar.js内容拷贝到fullcalendar.js里放在头部或者单独加载这个js都可以,看个人习惯。这里我是直接放在fullcalendar.js里,然后修改插件生成日期单元格的内容部分: 先搜索fc-day-number,查找到以下代码: if (this.view.dayNumbersVisible) { html += this.view.buildGotoAnchorHtml(date,… Read More

JQuery: 提交表单数据,转换表单数据为json,values of Form to Json (jquery.serializeJSON)

项目:https://github.com/marioizquierdo/jquery.serializeJSON 下载:jquery.serializeJSON-master jquery.serializeJSON 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交。 而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常麻烦。接下来介绍的插件将解决这个问题。 使用jquery.serializeJSON,可以在基于jQuery或者Zepto的页面中,调用 .serializeJSON() 方法来序列化form表单的数据成JS对象。 安装 Install with bower bower install jquery.serializeJSON, or npm npm install jquery-serializejson,… Read More

JavaScript 日期处理类库: Moment.js 写法示例(详解)

主页:http://momentjs.cn/ 文档:http://momentjs.cn/docs/ 项目地址:https://github.com/moment/moment/ 下载:moment-develop 引用: http://sources.ikeepstudying.com/js/moment-2.10.6.js  (未压缩) http://sources.ikeepstudying.com/js/moment.min-2.18.1.js (压缩版) http://sources.ikeepstudying.com/js/moment-with-locales-2.10.6.js (支持多语言) 1. 安装 bower install moment --save # bower npm… Read More

Javascript: JS函数节流与防抖 throttle,debounce

throttle 与 debounce 都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。 概念 throttle:连续的时间间隔(每隔一定时间间隔执行callback)。 debounce:空闲的时间间隔(callback执行完,过一定空闲时间间隔再执行callback)。 电梯超时 想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应。假设电梯有两种运行策略 throttle 和 debounce ,超时设定为15秒,不考虑容量限制。 throttle 策略的电梯。保证如果电梯第一个人进来后,15秒后准时运送一次,不等待。如果没有人,则待机。 debounce 策略的电梯。如果电梯里有人进来,等待15秒。如果又人进来,15秒等待重新计时,直到15秒超时,开始运送。 <div id="switcher"> <div… Read More

jQuery:sumoselect 插件实现select下拉复选框

主页:http://hemantnegi.github.io/jquery.sumoselect/ 项目:https://github.com/HemantNegi/jquery.sumoselect 下载:jquery.sumoselect-master DEMO: http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html 简单介绍 jquery.sumoselect是一款跨设备、跨浏览器的jQuery下拉列表框插件。该jQuery下拉列表框插件可以单选,也可以多选。它的样式可以通过CSS文件来自定义。它的最大特点是可以跨设备使用,所有设备上功能都是一致的。 该jQuery下拉列表框插件的特点有: 可以进行单选,也可以进行多选。 可以通过CSS文件来自定义样式。 支持绝大多数的设备。 根据设备智能渲染。 在Android、IOS、Windows和其它设备上会自动渲染出该设备原生样式的下拉列表框。 可以自定义提交数据的格式(多选可以通过 csv 或默认形式来提交)。 支持Selected、Disabled和占位文本。 易扩展,开发者可以很容易的创建新的组件。 使用基本方法间隙管理如添加选项、删除选项、禁用、选择等。 该jQuery下拉列表框插件需要使用jQuery… Read More