首页 专题 H5案例 前端导航 UI框架

JS中的call、apply、bind方法

在JavaScript中,call、apply和bind 是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向。

call、apply、bind方法的共同点和区别:
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文(函数的每次调用都会拥有一个特殊值——本次调用的上下文(context)——这就是this关键字的值。);
apply 、 call 、bind 三者都可以利用后续参数传参;
bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。
阅读 670 · 评论 0 · 喜欢 1 阅读全文

JS节点的属性及方法

一、属性

Attributes   存储节点的属性列表(只读)

childNodes   存储节点的子节点列表(只读)

dataType     返回次节点的数据类型

documentElement  返回文档的根元素(可读写)

firstChild   返回当前节点的第一个子节点(只读)

lastChild    返回当前节点最后一个子节点(只读)

nextSibling  返回当前节点的下一个兄弟节点(只读)

nodeName     返回节点的名字(只读)

nodeType     返回节点的类型(只读)(9代表Document节点、1代表Element节点、3代表Text节点、8代表Comment节点、11代表DocumentFragment节点)

nodeValue    返回节点的文本(可读写)

ownerDocument 返回包含此节点的根文档(只读)

parentNode   返回父节点(只读)

previousSibling  返回此节点的前一个兄弟节点(只读)

Text         返回此节点及其后代的文本内容

firstElementChild 返回第一个Element节点

lastElementChild  返回最后一个Element节点

nextElementSibling  返回下一个兄弟Element节点

previousElementSibling 返回上一个兄弟Element节点

childElementCount  子元素的数量

阅读 141 · 评论 0 · 喜欢 1 阅读全文

React入门教程

一、简介
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
ReactJS官网地址:http://facebook.github.io/react/
阅读 208 · 评论 0 · 喜欢 1 阅读全文

JavaScript在浏览器上的调试技巧

在网站开发中,我们难免会遇到各种bug,这时,我们就需要去调试我们的JavaScript脚本找出问题,然后去修改代码。那我们如何去调试呢?

最简单的就是alert()方法,不过,alert 弹出窗口会中断程序, 而且如果要在循环中显示信息,就会弹出多个弹窗,你不点击alert框的确定按钮下一个alert就不会出现,另外alert 显示对象永远显示为[object ],所以alert()方法只适合小程序。

第二种是断点调试
1.在源码上使用debugger
阅读 217 · 评论 0 · 喜欢 1 阅读全文

仿Material UI框架的动画特效

Material UI 是一款功能非常强大,界面却十分清新简洁的CSS框架,Material UI利用了Google的Material Design 全新设计语言,并且让每一个UI组件都变得非常独立,因此开发者使用Material UI也会比较简单。和Bootstrap类似,Material UI提供了很多常用的UI组件,除了最基本的菜单、按钮、滑动杆、进度条、单选框/复选框外,它还提供了一个非常有趣的日历组件,另外还提供了一些很有趣的图标。

不过,这里我并不打算介绍Material UI的使用,而是介绍如果实现Material UI内的动画特效,比如点击按钮会出现波浪扩散的动画效果、表单获取焦点动画等等。

注意:要使用下面的动画效果,必须引入jQuery。

一、点击按钮会出现波浪扩散的动画效果

为了效果,我这里特意将波浪的颜色加深。
先看效果:

阅读 643 · 评论 0 · 喜欢 1 阅读全文

图片的一扫而过的闪影

在一些网站上,其logo采取了这种效果,比如:自主学习网

我们来看看它是如何实现的?

div布局:

<div class="banner">

    <img src="logo.png" />

</div>

阅读 192 · 评论 0 · 喜欢 1 阅读全文

Web移动端Fixed布局的解决方案

特别声明:本文转载于EFE的《Web移动端Fixed布局的解决方案》。如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。

一、iOS下的 Fixed + Input BUG现象
让我们先举个例子,最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局,可能使用如下布局(以下仅示意代码):
阅读 154 · 评论 0 · 喜欢 1 阅读全文

SVG入门指南

SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。SVG是一个基于XML并可以在SVG对象中描述不同形状和路径的文件。每一个形状和路径都由一系列的点、位置、长度、半径,等等的来组成。

SVG特点:
SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
阅读 168 · 评论 0 · 喜欢 1 阅读全文

关于bootstrap IE8的兼容性问题

现在越来越多的网站都使用了Bootstrap,到现在,Bootstrap3是使用率较为高的,在chrome,firefox,safari,opera,360浏览器(极速模式)、搜狗浏览器等浏览器下均没有问题,不过,在ie8下的时候,还是出现了很多让人头疼的坑,现在我将解决方法总结一下:

  • ie8不支持media

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->

阅读 165 · 评论 0 · 喜欢 1 阅读全文

图片轮番详解

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。
下面,我将介绍一种实现图片轮番的方法。

首先是div:

<div class="swiper-container"> 

   <div class="swiper-wrapper"> 

      <div class="swiper-slide" style="background:red;">index1</div> 

      <div class="swiper-slide" style="background:yellow;">index2</div> 

      <div class="swiper-slide" style="background:green;">index3</div> 

   </div> 

</div>

我们先定义一个class名为swiper-container的外层,然后是内层swiper-wrapper(这一层也是我们轮番的层),最后是每一页,我在这里命名为swiper-slide。
阅读 232 · 评论 0 · 喜欢 1 阅读全文

HTML5中的Blob对象的使用

HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型。

直接上例子:

<a download="data.csv">


var getData= "\ufeff" + "填写数据abc";

var blob = new Blob([getData], { type: 'text/csv,charset=UTF-8' }); document.querySelector("#getData").href = URL.createObjectURL(blob);

阅读 249 · 评论 0 · 喜欢 1 阅读全文

图片懒加载其实并不难!

为了节约网络带宽和提高了初次加载的速度,现在各大网站里都使用了图片懒加载方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片。 光知道逻辑并不行,还需要用代码去实现,如何去实现呢?其实并不复杂,下面我会具体分析说明。 既然是图片懒加载,当然需要显示图片的img,不过我们不能直接添加src,而是给img设置一个新属性data-src,然后赋值为图片真正的地址,当然,你也可以定义任意合法的属性名。
阅读 216 · 评论 0 · 喜欢 1 阅读全文

autocomplete属性失效的解决方法

当我们做一个登陆页面时,如果用户选择了浏览器弹出的记住密码,那么,每次进登陆页面的时候,表单都会自动注入内容,但是,我们有些时候并不需要这样,那我们如何去禁止表单中注入内容呢?


很多人都会使用autocomplete属性,可是在chrome浏览器下,这个属性完全失效,真是让人头疼。

下面介绍两种方法:

1. 加一个隐藏input

<input name="a" autocomplete="off"> <input type="password" style="display:none"> <input type="password" name="b">

阅读 180 · 评论 0 · 喜欢 1 阅读全文

程序员,请对自己好一点!

阅读 328 · 评论 0 · 喜欢 1 阅读全文

物体对象

在前面的《用户交互》和《动画》两章中,我们分别介绍了用户交互事件,包括:鼠标事件,触摸事件和键盘事件,还有如何加载多张图片,如何用window.requestAnimationFrame()来执行动画。

接下来,我们介绍一下在动画中的一个重要角色:物体。要使用物体对象,我们就必须捕获到物体对象。

不过,在canvas中,我们不能像在DOM中那样进行操作,为什么呢?

因为在Canvas里,所有图形都绘制在帧上,绘制方法不会将绘制好的图形元素作为一个返回值输出,所以JavaScript也无法获取到已经绘制好的图形元素。
阅读 80 · 评论 0 · 喜欢 1 阅读全文