首页 专题 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 则是立即调用 。
阅读 4366 阅读全文

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  子元素的数量

阅读 1624 阅读全文

React入门教程

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

JavaScript在浏览器上的调试技巧

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

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

第二种是断点调试
1.在源码上使用debugger
阅读 2282 阅读全文

仿Material UI框架的动画特效

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

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

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

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

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

阅读 2725 阅读全文

图片的一扫而过的闪影

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

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

div布局:

<div class="banner">

    <img src="logo.png" />

</div>

阅读 1218 阅读全文

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

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

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

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

SVG入门指南

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

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

关于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]-->

阅读 3061 阅读全文

图片轮番详解

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

首先是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。
阅读 1224 阅读全文

图片懒加载其实并不难!

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

autocomplete属性失效的解决方法

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


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

下面介绍两种方法:

1. 加一个隐藏input

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

阅读 1317 阅读全文

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

阅读 1843 阅读全文

物体对象

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

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

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

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

canvas入门基础(九):基础动画

实现动画,我们首先想到的肯定是setTimeout和setInterval,这两个在这里就不细说了。

除了这两个外,我们还可以使用window.requestAnimationFrame()这个方法。

requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API

window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。这个方法接受一个函数为参,该函数会在重绘前调用。
注意: 如果想得到连贯的逐帧动画,函数中必须重新调用 requestAnimationFrame()。
阅读 2033 阅读全文