JS基础篇-- body.scrollTop与documentElement.scrollTop

2017-01-10
阅读 2 分钟
46.3k
获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop

jQ基础篇--jQuery插件ajaxfileupload.js源码与使用

2016-12-21
阅读 9 分钟
2.9k
在网页应用中,一般会用到上传文件或者图片什么的到服务器,那么可以用ajaxfileupload.js,但是在使用ajaxfileupload.js时候,当服务器返回的json带有&符号的时候,返回的data数据里面所有的&被转义成了&。下面的ajaxfileupload.js是经过修改的文件上传库。

jQ基础篇--jQuery与JS中的map()方法

2016-12-20
阅读 4 分钟
12.7k
语法:.map(callback(index,domElement))用法:map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。注:由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。

Web前端常用代码笔记整理(02)

2016-12-19
阅读 8 分钟
5k
1.canvas图片预加载及进度条的实现 {代码...} 2.JS实现跨浏览器添加事件与移除事件怎样做才最优? 一般的兼容做法,如下: 跨浏览器添加事件 {代码...} 跨浏览器移除事件 {代码...} 推荐写法 {代码...} 参考地址addEvent() recoding contest entry addEvent() – Follow Up 3.Ajax用jsonp方式跨域发送请求小实例 众所周知...

用grunt搭建web前端开发环境

2016-03-31
阅读 12 分钟
2.7k
Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装吧。安装nodejs非常简单,完全傻瓜式、下一步下一步下一步、的安装方式,这里不再赘述。去 [链接] 上,点击页面中那个绿色、大大的“install”按钮即可。我这儿在百度云盘存放一个,需要的点击下载

JS基础篇--面向对象与原型

2016-03-10
阅读 9 分钟
2.3k
创建对象 {代码...} 这就是创建对象最基本的方法,但是有个缺点,想创建一个类似的对象,就会产生大量的代码。 工厂模式 为了解决多个类似对象声明的问题,我们可以使用一种叫做工厂模式的方法,这种方法就是为了解决实例化对象产生大量重复的问题。 {代码...} 工厂模式解决了重复实例化的问题,但还有一个问题,那就是...

JS基础篇--事件绑定及深入

2016-03-08
阅读 10 分钟
3.4k
事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。

JS基础篇--JS数组常用方法汇总

2016-01-01
阅读 5 分钟
3.2k
所有对象都具有toLocaleString()、toString()、valueOf()方法。其中调用数组的toString方法会返回以数组中的每个值的字符串形式拼接而成的一个以逗号分割的字符串。

JS基础篇--JS的DOM操作 - 你真的了解吗?

2015-12-25
阅读 3 分钟
3.4k
想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题.

CSS基础篇--CSS网页中导入特殊字体@font-face属性详解

2015-12-21
阅读 3 分钟
15.1k
font-family: <YourWebFontName> :自定义字库名称(一般设置为所引入的字库名),后续样式规则中则通过该名称来引用该字库。src :设置字体的加载路径和格式,通过逗号分隔多个加载路径和格式srouce :字体的加载路径,可以是绝对或相对URL。 format :字体的格式,主要用于浏览器识别,一般有以下几种——truetype...

Web前端常用代码笔记整理(01)

2015-10-08
阅读 13 分钟
4.1k
问题表示:在某些场景下,需要将函数的 arguments 参数作为一个数组调用,但是 arguments 是一个奇异对象,所以试着将 arguments 转化为一个数组;

CSS进阶篇--fontAwesome代替网页icon小图标

2015-10-07
阅读 4 分钟
8.1k
黑白的也好,彩色的也罢,如果用传统的“css + 图片”的方式来制作这些icon,我估计你至少得雇佣一个专业的设计师吧。一般的程序猿,包括前端程序猿,估计只能去搜索了,不会自己拿ps画。

JS进阶篇--前端的瑞士军刀Modernizr.js

2015-10-05
阅读 6 分钟
13.4k
作用:从实际操作来看,Modernizr默认做的事情很少,除了(在你选择的情况下)给不支持html5的标签的浏览器,如IE6,7,8追加一点由Remy Sharp开发的html5垫片脚本,使其识别<aside>、<section>等html5元素之外,它主要做的就是浏览器‘功能检测’。因此,它知道浏览器是否支持各种html5和css3特性。下载地址...

H5基础篇--HTML5 audio与video标签实现视频播放,音频播放

2015-09-25
阅读 4 分钟
12.2k
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签。 <audio> 标签属性 {代码...} 当然audio元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式: 再如下面: {代码...} <video> 标签属性 下面先介绍下video标签的一般用法 vid...

CSS基础篇--CSS3 圆角(border-radius)详解

2015-09-23
阅读 4 分钟
5.2k
在做网页的时候,常常需要实现圆角,以前的做法就是切图,现在好了,有了css3的 border-radius 特性之后,实现边框圆角效果就非常简单了。而且其还有多个优点:一是减少网站维护工作量;二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载入速度将变快;三是增加视觉美观性。

如何禁止 iPhone Safari video标签视频自动全屏?

2015-09-22
阅读 1 分钟
7.5k
最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签)。如: {代码...} 在iPhone safari 点击视频会弹出播放器进行全屏播放。 在网上看了看别人给出的答案,引用如下: 可以在 video 标签上加一个 “webkit-playsinline” 属性 ,如下: {代码...} 我想说这能...

jQ基础篇--attr和prop的区别

2015-09-21
阅读 1 分钟
3.3k
在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined。如果你要去恢复或者改变DOM状态值,类似checked,selected,disabled等表单元素的状态,最好使用.prop()方法。

H5进阶篇--实现微信摇一摇功能

2015-09-15
阅读 2 分钟
10.6k
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态、加速度等数据(另还有deviceOrientation事件提供了设备角度、朝向等信息)。而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果。

CSS进阶篇--CSS select样式优化 含jquery代码

2015-09-15
阅读 2 分钟
5.5k
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: {代码...} css样式: {代码...} jquery代码: {代码...} 这儿只是提供一种方法而已,当然前面文章中已经写过用css3模拟select样式效果更好。 如果您觉得本文对您的学习有所帮助,请多支持与鼓励。

CSS基础篇--CSS3之多列布局columns详解

2015-09-15
阅读 3 分钟
5.2k
columns语法:columns:[ column-width ] || [ column-count ] 设置或检索对象的列数和每列的宽度: [ column-width ]:设置或检索对象每列的宽度; [ column-count ]:设置或检索对象的列数。 css代码: {代码...} html代码: {代码...} 结果如图所示: 以下列出column运用的相关属性1.column-width:<length> | a...

CSS基础篇--如何解决inline-block元素的空白间距

2015-09-15
阅读 3 分钟
4.7k
早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧。

CSS基础篇--CSS3之box-flex属性的使用

2015-09-14
阅读 3 分钟
2.7k
语法: {代码...} 其中number取值:使用浮点数指定对象所分配其父元素剩余空间的比例。设置或检索伸缩盒对象的子元素如何分配其剩余空间。(伸缩盒最老版本) html代码: {代码...} css代码: {代码...} 得到的结果如图所示: 注:其实上面的css代码中-ms-box-flex与box-flex可以省略,为什么这么说呢,IE6-IE11的浏览器不...

CSS进阶篇--Normalize.css的使用(重置表)

2015-09-14
阅读 3 分钟
3.3k
Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

CSS基础篇--css reset重置样式有那么重要吗?

2015-09-14
阅读 2 分钟
6.7k
在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: {代码...} } 但是最近在网上看了看网络文章,也感觉有些重置是没有用的。为什么呢? 重置的作用究竟是什么? CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准,而这个基准更多的就是“清零”! 有时候看到别人网站站的一些重置是这...

CSS进阶篇--CSS让浮动元素水平居中

2015-09-14
阅读 1 分钟
14.1k
对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中。 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。如下: HTML 代码: {代码...} CSS 代码: {代码...} 这样就解决了浮动元素水平居中了; 父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素...

js立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( )) 有区别?

2015-09-14
阅读 1 分钟
5.2k
在SF上看到这样一个问题,我觉得问得很好,所以弄成文章收集了。 没有区别。 你需要明白 IIFE 的原理,我简单说一下: {代码...} IIFE 并非必须,传统一点可以这么写: {代码...} 那么为什么要 IIFE? 传统的方法啰嗦,定义和执行分开写; 传统的方法直接污染全局命名空间(浏览器里的 global 对象,如 window) 于是,...

JS 基础篇--闭包和引用

2015-09-14
阅读 3 分钟
6k
Javascript 中一个最重要的特性就是闭包的使用。因为闭包的使用,当前作用域总可以访问外部的作用域。因为Javascript 没有块级作用域,只有函数作用域,所以闭包的使用与函数是紧密相关的。

JS基础篇--函数声明与定义,作用域,函数声明与表达式的区别

2015-09-14
阅读 3 分钟
3.9k
Scoping & Hoisting 例: {代码...} 上面这段代码在运行时会产生什么结果? 尽管对于有经验的程序员来说这只是小菜一碟,不过我还是顺着初学者常见的思路做一番描述: 创建了全局变量 a,定义其值为 1 创建了函数 foo 在 foo 的函数体内,if 语句将不会执行,因为 !a 会将变量 a 转变成布尔的假值,也就是 false 跳...

CSS进阶篇--div中的内容垂直居中的五种方法

2015-09-14
阅读 2 分钟
45.7k
一、行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: {代码...} 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距(padding)法 另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直...

CSS基础篇--你知道的display的值有多少?用了多少?

2015-09-14
阅读 3 分钟
4.8k
display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group |run-in |box | inline-box | flexbox | inline-flexbox | flex | inline-flex