- 博客(137)
- 资源 (9)
- 收藏
- 关注
RSS订阅
原创 读《ECMAScript 6 入门 —— 阮一峰》（下）
编程风格块级作用域字符串解构赋值对象数组函数Map结构Class模块ESLint的使用本章探讨如何将ES6的新语法，运用到编码实践之中，与传统的JavaScript语法结合在一起，写出合理的、易于阅读和维护的代码。多家公司和组织已经公开了它们的风格规范，具体可参阅jscs.info，下面的内容主要参考了Airbnb的JavaScript风格规范。块级作用域 § ⇧（1）let 取代 varES6提出
2017-09-18 10:29:31
1409
原创 读《ECMAScript 6 入门 —— 阮一峰》（上）
前言ES6的出现是为了提高 javascript 的严谨性，安全性等方面，它代表着js的发展方向。网站开发的人员，无论前后端都必须熟稔 ES6 语法规范。带着问题看书1. ES6 新增的关键词 let 和 var 区别？a. 使用let声明的变量，只在它所在的代码块内有效。即如果使用let，声明的变量仅在块级作用域内有效。b. var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为u
2017-09-18 10:13:19
1936
原创 不要过度依赖JQuery（三）
前言 在不要过度依赖JQuery（一）和不要过度依赖JQuery（二）两篇文章中已经列举了大量的使用原生JavaScript替代JQuery的例子，在本文中将继续列举！ 1、表单 获取焦点$('#test').focus(); $('#test').focus(function(){}); var t = document.getElementById('test');function
2017-09-15 11:22:21
418
原创 不要过度依赖JQuery（二）
前言 为什么说不要过度依赖JQuery呢？从项目方面来讲，一些项目在开发中实际用到JQuery内置功能不多，这样会造成项目臃肿；另一方面，目前的主流已经倾向于原生开发。 而在之前一篇《不要过度依赖JQuery（一）》一文中已经介绍了部分使用原生JavaScript实现JQuery功能的代码，这一章将继续列举。 1、位置 获取相对于文档的位置$('#test').offset() functi
2017-09-15 11:11:10
327
原创 不要过度依赖JQuery（一）
前言 毫无疑问，JQuery是一款非常优秀的JavaScript库，它让我们开发项目变得更加便捷容易。 不过，当你准备在一个项目（特别是移动项目）中使用JQuery时，你真的该好好思考一下，你会用到JQuery的哪些功能，是否真的需要jQuery。因为随着JavaScript的不断改善进化，现在它内置的功能已经非常强大，在很大程度上，已经可以实现以前需要在JQuery中才能实现的技术（如果你的
2017-09-15 11:03:02
481
转载 统一回复《怎么学JavaScript？》
鉴于时不时，有同学私信问我怎么学前端的问题。这里统一回复一下，如下次再遇到问我此问题同学，就直接把本文链接地址发给你了。 首先说句题外话。关于有人管我叫大神的事情。个人感觉这跟你买东西时，人家管你叫帅哥一样，你答应与否都无妨。 正题开始，前端怎么学，应该因人而异，别人的方法未必适合自己。就说说我的学习方法吧。我把大部分时间放在学习js上了。因为这个js的学习曲线，先平后陡。项目实践和练
2017-09-12 13:55:18
783
原创 table表格合并第一列中相同的内容（优化+注解）
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件 console.log(this); return this.each(function(){ console.log(this) var that;//用来保存含 有重复内容的列中的第一个td console.log(that);//
2017-09-06 17:42:17
2175
1
原创 table表格合并第一列中相同的内容！
分享一个简单实用的jquery小插件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .a{ transition:.5s; transform: rotate(-45de
2017-09-06 11:06:35
6087
6
原创 如何自己开发一款js或者jquery插件
引子现在网上关于js和jquery封装的插件很多，我刚刚接触前端的时候，就很敬佩那些自己写插件的大牛们！因为是他们给网站开发更多的便利，很多网页效果，网上很多现成的插件！那么这些插件是如何写的呢？首先是有扎实的js和jquery技术基础，其次还有一些写插件的方法和技巧。关于js和jquery的技术基础，那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧，本文可以略微介绍一下，方便以后写插件的时候
2017-09-05 09:28:14
4057
1
原创 实用插件（七）视频播放插件——ckplayer
ckplayer插件下载地址：http://pan.baidu.com/s/12HYH4（如果不在了，自己找地址下载，下载后添加到网站根目录）******特别提醒：解压后不要忘了把js文件夹也添加到你的网站根目录。这个主要是为了各浏览器的兼容性的，如果不添加，在ie，Firefox上有可能不能用！1，首先在页面头部引入：2，在body部分放一个div：
2017-09-04 15:41:40
13058
原创 实用插件（六）手机日历插件——LCalendar
1、点我下载2、使用方法： <!-- 日历1个css文件--> <link rel="stylesheet" type="text/css" href="../css/LCalendar.css" /> <!-- 日历1个js文件--> <script src="../js/LCalendar.js" type="text/javascript" charset="ut
2017-09-01 10:46:47
9204
1
原创 如何运行vue项目
在师兄的推荐下入坑vue.js ，发现不知如何运行GitHub上的开源项目，很尴尬。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了朦朦胧胧的认知，因此将环境搭建过程分享给大家。 可以看下我的github：https://github.com/padipata ，里面有我自己写的vue项目，喜欢的给个关注呗。 首先，列出来我们需要的东西： node.js环境（npm包管理器）
2017-09-27 11:17:38
9923
1
原创 jquery和vue对比
前言：很多人说jquey和vue没有什么可比的，应该和Angular，React来比吧，我到觉得他们倒没有多大的可比性，都是基于mvvm思想设计的框架，无非就是实现的方式不一样，在不同场景下性能上会有一些差异。然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据上去，难道不是一个根本性的改变吗？ 1.jquery介绍：想必大家都用过
2017-09-26 15:59:03
1892
原创 js基础-JavaScript开发技巧总结
开发技巧1、使用var声明变量如果给一个没有声明的变量赋值，默认会作为一个全局变量（即使在函数内赋值）。要尽量避免不必要的全局变量。2、行尾使用分号虽然JavaScript允许省略行尾的分号，但是有时不注意的省略，会导致不必要的错误。建议在可用可不用行尾分号的地方加上分号。3、获取指定范围内的随机数var getRandom = function(max, min) { min = arg
2017-09-22 09:46:34
299
原创 js基础-常用API总结
常用API合集一、节点1.1 节点属性Node.nodeName //返回节点名称，只读 Node.nodeType //返回节点类型的常数值，只读 Node.nodeValue //返回Text或Comment节点的文本值，只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容，可读写 Node.baseURI //返回当前网页的绝对路径No
2017-09-22 09:44:42
291
原创 js基础-javascript任督二脉-作用域链 ★★★
作用域1.1 作用域几乎所有的编程语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。作用域有全局作用域和局部作用域（一般是在函数内）之分。1.1.1 全局作用域在代码中任何地方都能访问到的对象拥有全局作用域。一般来说，拥有全局作用域有以下几种情况：（1）在最外层的函数和在最外层函数外面定义的变量拥有全局作用域例子：var name = 't
2017-09-22 09:42:27
243
原创 js基础-javascript任督二脉-原型链 ★★★
原型链3.1 原型每一个JavaScript对象（null除外）都和另一个对象相关联，也可以说，继承另一个对象。另一个对象就是我们熟知的“原型”（prototype），每一个对象都从原型继承属性。只有null除外，它没有自己的原型对象。我们可以通过proto（首尾都是双下划线）来获取实例的原型对象。注意：proto连接的是实例与构造函数的原型对象之间，而不是实例与构造函数之间。所有通过对象直接量创建
2017-09-22 09:41:06
241
原创 js基础-this关键字 ★★★
this关键字JavaScript代码都存在于一定的上下文对象中。上下文对象通过this关键字来动态指定，它永远指向当前对象。简单的说，就是返回属性或方法“当前”所在的对象。this的工作原理在5种不同的情况下，this指向的各不相同。（1）全局范围内this 当在全局范围内使用this，它将指向全局对象（2）函数调用function test(){ console.log(this);
2017-09-22 09:34:54
258
原创 js基础-Geolocation API
Geolocation API（地理位置）1、地理位置（Geolocation API）Geolocation接口用于获取用户的地理位置。它使用的方法基于GPS或者其他机制（比如IP地址、Wifi热点、手机基站等）。1.1 检测地理位置是否可用if('geolocation' in navigator){ //地理位置可用 }else{ //地理位置不可用 } 1.2 获取当前定位
2017-09-22 09:31:00
473
原创 js基础-Video/Audio
多媒体（video和audio）一、音频（audio）和视频（video）在HTML5中引入了<audio>和<video>元素，用来在HTML文档中嵌入音频和视频：<audio src="m.mp3"/> <video src="m.mp4" width=320 height=400 /> 由于不同的浏览器对标准音频和视频的编解码支持上并不一致，所以通常需要使用<source>元素来为指定不同
2017-09-22 09:27:21
919
原创 js基础-Blob （结尾有惊喜！有惊喜！有惊喜！）★★
Blob2、BlobBlob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。（以二进制形式保存的较大的对象）比如通过new Blob()创建的对象就是Blob对象.又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象.2.1 生成Blob对象生成Blob对象有两种方法：一种是使用Blob构
2017-09-22 09:19:47
740
原创 js基础-File API ★★★
File API3、文件系统API3.1 File API在HTML5中新增了File API，可以让网页要求用户选择本地文件，并且读取这些文件的信息。选择的方式可以是HTML<input>元素，也可以是拖拽。<input type="file" id="photo">var selectedFile = document.getElementById('photo'); var file = s
2017-09-22 09:05:07
1616
原创 js基础-客户端存储（Cookie、Storage、IndexedDB）
Canvas二、canvasHTML5<canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。<canvas>标签只是图形容器，您必须使用脚本来绘制图形。要使用Canvas API，首先需要新建一个<canvas>网页元素<canvas id="canvas" width="400" height="200"> 您的浏览器不支持canvas！ </canvas>
2017-09-22 08:35:48
1130
1
原创 js基础-canvas
Canvas二、canvasHTML5<canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。<canvas>标签只是图形容器，您必须使用脚本来绘制图形。要使用Canvas API，首先需要新建一个<canvas>网页元素<canvas id="canvas" width="400" height="200"> 您的浏览器不支持canvas！ </canvas>
2017-09-21 10:38:17
388
原创 js基础-富文本编辑器
富文本编辑器1、富文本编辑器简介富文本编辑（WYSIWYG（What You See Is What You GET，所见即所得））。最先的富文本编辑，就是在页面中嵌入一个包含空HTML页面的iframe，然后通过设置designMode属性，这个空白的HTML页面就可以编辑了，编辑对象则是该页面<body>元素的HTML代码。 designMode属性有两个可能的值：“off”和“on”，默认为
2017-09-21 10:30:27
4091
原创 js基础-表单
表单Web表单是开发人员与用户交互的重要控件。1、form1.1 form独有的属性和方法在HTML中，表单是由<form>来表示的，而在JavaScript中，表单对应的是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因此它跟其他HTML元素具有相同的默认属性。<form>也有自己独有的属性和方法：acceptCharset：服务器能够处理的字符集
2017-09-21 10:15:08
2070
原创 js基础-AJAX、file、http进度、同源策略
AJAX超文本传输协议（HyperText Transfer Protocol，HTTP）是用于从WWW服务器传输超文本到本地浏览器的传输协议（transport）。它可以使浏览器更加高效，使网络传输减少。Ajax（Asynchronous JavaScript and XML）描述了一种主要使用脚本操纵HTTP的Web应用架构。Ajax的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不
2017-09-21 09:56:34
611
原创 js基础-引用类型-console对象 ★☆
console对象console对象是JavaScript的原生对象，可以将信息输出在控制台。1、打开控制台不同系统平台打开浏览器的控制台可能有些不一样，下面以chrome浏览器为例，可以使用下列方式打开：按F12鼠标右键里选择“检查”在右上角的菜单中点击“更多工具/开发者工具”打开控制台以后，你可以看到下列不同的面板：Elements：查看网页的HTML源码和CSS代码。 Resources：查
2017-09-21 09:07:07
472
原创 js基础-单体内置对象（Global、Math）
单体内置对象（Global、Math）内置对象也就是我们不必显示地区实例化，直接就可以使用了，因为它们已经实例化了。1、Global 对象Global对象是一个全局对象。所有在全局作用域中定义的属性和函数，都是Global对象的属性，比如：isNaN()、isFinite()、parseInt()以及parseFloat()，实际上都是Global对象的方法，它还包括了其他一些方法：1.1 Glob
2017-09-21 08:59:34
3347
原创 js基础-基本包装类型（Boolean、Number、String ）★☆
基本包装类型（Boolean、Number、String）1、基本包装类型简介ECMAScript提供了三个基本包装类型：Boolean、Number、String。实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能过调用一些方法来操作这些数据。执行步骤如下：创建S提让那个类型的一个实例在实例上调用指定的方法销毁这个实例var s1 = new String
2017-09-21 08:55:27
391
原创 js基础-引用类型-Date对象 ★☆
Date类型在JavaScript中，Date类型是用来保存日期的，它能精确到1970年1月1日之前或之后的285616年。1、创建日期对象要创建一个日期对象，使用new操作符和Date构造函数即可：var now = new Date();//Thu Sep 21 2017 08:41:51 GMT+0800 (中国标准时间) 在调用Date构造函数而不传递参数时，新创建的对象自动获得当前日期和
2017-09-21 08:44:12
329
原创 js基础-引用类型-Array对象 ★★★☆
Array类型ECMAScript数组的每一项可以保存任何类型的数据，也就是说，而且数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。var colors = [1, 'tg', {}]; 在上面的例子中，数组中保存了数值、字符串和对象。1、初始化数组实例创建数组的基本方式有多种：（1）使用Array构造函数当传递一个参数时，如果传递的参数是数值，则会按照该数值创建包含给定项
2017-09-21 08:39:45
199
原创 js基础-引用类型-Object对象 ★★★☆
Object类型1. 实例化对象所有其他对象都继承Object。创建object实例的方式有两种：第一个种是使用new操作符后跟Object构造函数var person = new Object() 注意：O是大写第二种是使用对象字面量：var person = { name: 'tg' }; 访问对象属性使用的是点表示法，也可以用方括号表示法来访问。var person = {
2017-09-21 08:33:14
232
原创 js基础-JSON
JSONJSON（JavaScript Object Notation，JavaScript对象表示法），它是JavaScript的一个严格子集。JSON只是一种简单数据格式，并不是只有JavaScript拥有。1、语法JSON对值的类型和格式有严格的规定：复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。简单类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不
2017-09-20 13:44:05
298
原创 js基础-正则表达式★★★
正则表达式正则表达式（regular expression）是一个描述字符模式的对象。JavaScript的RegExp类表示正则表达式，String和RegExp都定义了方法。1.1 正则表达式的定义正则表达式有两种方法定义：一种是使用正则表达式直接量，将其包含在一对斜杠（/）之间的字符。var pattern = /s$/; 另一种是使用RegExp()构造函数。var pattern = n
2017-09-20 13:35:18
858
原创 js基础-Event 事件★★★
Event 事件客户端JavaScript程序采用了异步事件驱动编程模型。一、相关术语事件流描述的是从页面中接收事件的顺序。事件就是Web浏览器通知应用程序发生了什么事情。事件类型（event type）是一个用来说明发生什么类型事件的字符串。例如，“mousemove”表示用户移动鼠标，“keydown”表示键盘上某个键被按下等等。事件目标（event target）是发生的事件与之相关的对象。当
2017-09-20 12:40:31
1329
原创 js基础-BOM
BOMWindow对象是客户端JavaScript程序的全局对象。11.1 计时器setTimeout()和setInterval()可以用来注册在指定的时间之后单次或重复调用的函数。两者都是客户端JavaScript中的全局函数，也就是Window对象的方法。（1）setTimeout()setTimeout()方法用来实现一个函数在指定的毫秒数之后运行，返回一个值，这个值可以传递给clearTi
2017-09-20 11:33:49
394
原创 js基础-DOM-属性和CSS
DOM–属性和CSS一、属性HTML元素由一个标签和一组称为属性（attribute）的名/值对组成。1、HTML属性作为Element的属性表示HTML文档元素的HTMLElement对象定义了读写属性，它们映射了元素的HTML属性。HTMLElement定义了通用的HTTP属性（如id、标题lang和dir）的属性，以及事件处理程序属性（如onclick）。特定的Element子类型为其元素定义
2017-09-20 11:27:01
461
原创 js基础-DOM
DOM1、DOM文档对象模型（Document Object Model，DOM）是表示和操作HTML和XML文档内容的基础API。当网页被加载时，浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。如下图：上图中的每一个方框是文档的一个节点，它表示一个Node对象，而所有节点组成了节点树（DOM树）。节点有7种类型：
2017-09-20 11:07:25
312
原创 js基础-函数★★★
函数1.函数简介通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用。ECMAScript中的函数使用function关键字来声明，后跟一组参数以及函数体，这些参数在函数体内像局部变量一样工作。function functionName(arg0, arg1....argN) { statements } 函数调用会为形参提供实参的值。函数使用它们实参的值来计算返回值，称为该函数
2017-09-20 10:29:33
393
ckplayer是一款非常好的web网页前台视频播放js插件。
2017-09-04
lCalendar纯原生js日期时间选择纯原生js日期时间选择
2017-09-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人