jQuery文字动画插件Textillate.js

Textillate.js在内部集成了不少css3动画库,利用他可以为你的网站增加非常多的文字动画效果。

Demo

http://textillate.js.org/

主页:

https://github.com/jschr/textillate

使用简介:

1、引用依赖

2、html代码

3、js代码

我们也可以直接使用它的data api

 

部分参数及方法说明

 

事件

start.tlt – textillate开始时触发

inAnimationBegin.tlt – 动画进入开始时触发

inAnimationEnd.tlt – 动画进入结束时触发

outAnimationBegin.tlt –  动画退出开始时触发

outAnimationEnd.tlt – 动画退出结束时触发

end.tlt – ttextillate结束触发

方法

$element.textillate(‘start’) – 手动开始或重启 textillate

$element.textillate(‘stop’) – 手动暂停或停止 textillate

$element.textillate(‘in’) – 当前文字动画进入时触发

$element.textillate(‘out’) – 当前文字动画退出时触发

js extend method

in jquery ,we can use extend method like this to copy object

in javascript ,we should complete it through my own code:

jQuery中时间戳和日期的相互转换

在项目中经常会使用时间戳和日期的相互转换,可以参考如下代码

使用方法也很简单

日期转时间戳

 


时间戳转日期


jQuery基础教程(第4版)读书笔记

  • 书籍名称:《jQuery基础教程(第4版)》(Learning jQuery, 4th Edition)
  • 花费时间:7天
  • 制作工具:Xmind
  • 个人评价:书本内容讲解的比较全面,但是总感觉读起来有点儿生硬,不知道是不是因为翻译的原因,没有那种引人入胜的感觉。

PDF下载  笔记下载

 

jQuery基础教程(第4版)读书笔记
jQuery基础教程(第4版)读书笔记

jQuery中的attr和prop方法的区别对比

attr方法:http://api.jquery.com/attr/

prop方法:http://api.jquery.com/prop/

prop是jQuery1.6新增的方法,他们一个共同的功能就是获取/设置属性,而且他们的使用方法都是相同的,可以设置一条或者多条属性

源码分析

大家可能在想,既然功能相似,为什么还要引入prop功能,为此我们可以从源码上分析入手:

attr源码

prop源码

注意两者代码中的关键设置/获取属性的代码

attr中是elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name ),使用的是DOM中的API方法

而prop是return ( elem[ name ] = value )和return elem[ name ] 相当于document.getElementById(el)[name] = value 获取的是转换为JS对象的属性

代码测试

下面通过实际的代码分析下:

HTML代码

JS代码

  1. el.attr(“style”)输出undefined,因为attr是获取的这个对象属性节点的值,很显然此时没有这个属性节点,自然输出undefined
  2. el.prop(“style”)输出CSSStyleDeclaration对象,对于一个DOM对象,是具有原生的style对象属性的,所以输出了style对象
  3. 至于document.getElementById(“test”).style和上面那条一样

首先用attr方法给这个对象添加abc节点属性,值为111,可以看到html的结构也变了

  1. el.attr(“abc”)输出结果为111,再正常不过了
  2. el.prop(“abc”)输出undefined,因为abc是在这个的属性节点中,所以通过prop是取不到的

我们再接着来:

我们再用prop方法给这个对象设置了abc属性,值为222,可以看到html的结构是没有变化的。输出的结果就不解释了。

使用建议

在遇到要获取或设置checked,selected,readonly和disabled等属性为boolean(布尔值类型的),用prop方法显然更好,而在其他时候仍然使用attr,比如像下面这样:

HTML代码

JS代码

也可以参考官方建议的列表

Attribute/Property .attr() .prop()
accesskey
align
async
autofocus
checked
class
contenteditable
draggable
href
id
label
location ( i.e. window.location )
multiple
readOnly
rel
selected
src
tabindex
title
type
width ( if needed over .width() )

 

另外,同等情况下,prop的性能更高,因为attr需要访问DOM属性节点,访问DOM是最耗时的。

 

参考资料

http://www.javascript100.com/?p=877