Html5总结

首先在需要的页面加入如下js和css，就可以使用了。

<!--viewport的meta标签将屏幕的宽度设置为了与设备的宽度相同--> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../style/jquery.mobile-1.0.1.min.css" /> <script src="../js/jquery.js"></script>

<script src="../js/jquery.mobile-1.0.1.min.js"></script> <script src="../js/traffy.js"></script>

<script>

这里是你的js代码

</script>

功能代码介绍

1)定义变量

Var bianliang;或者var bianliang=null;

2)文档开始语句

$(document).ready(function(){

这里写你的js代码

});

3)定义函数

function click_function(){

你的函数代码

}

4)元素选择（）里面的为解释 #id .class element(p、h1)

5) 元素选择组合 E1,E2,E3(p,h1,li)

E1 E2(E1下的所有E2)

E1>E2(选择E1下的子E2,不包含E2下满足的元素)

E1+ E(选择E1后紧相邻的E2) 等价$(E1).next(E2)

E1~ E2(选择E1之后的所有E2) 等价$(E1).nextAll(E2)

6)基本过滤

:first :last :not(E1) :even(所有偶数，从0开始) :odd(所有奇数) :eq(index) :gt(index) :lt(index) :header(所有标题元素h1~h5)

7)内容过滤器

:contains(text) :empty :has(E1) :parent(拥有该元素的所有div)

8)属性过滤器

:hidden(包括：<input type=“hidden”/>,<div style=“display:none”>和<div style=“visibility:hidden”>等，如果只选择<input>元素，则可以使用 $(“input:hidden”)

)

:visible

9)可见性过滤器

[attribute](有这个属性的) [attribute=value]

[attribute!=value] [attribute^=value](选择以value开始的所有)

[attribute$=value](以value结束的元素) [attribute*=value](选择所有有value的元素) [A1][A2]??[An](复合选择)

10)子元素选择器

:nth-child(index/even/odd/equation)(选择每个父元素下的相应元素)

:first-child :last-child($(“ul li:last-child”)选择每个ul下的最后一个<li>)

:only-child ($(“ul li:only-child”)在<ul>中选取是惟一子元素的<li>)

11)表单选择器

:input(匹配所有<input> <textarea> <select> <button>元素)

:text :password :radio :checkbox :submit :image :reset :button :file :hidden

12) 给按钮绑定点击事件

$("#down_page").bind("click",function(){

这里写点击事件处理

}) ;

13)事件绑定方法

One bind【unbid】 live【die】(不存在也绑定) delegate

【undelegate】(不存在也绑定) 优先 on【off】 (不存在也绑定)

14)事件

Blur focus/focusin/focusout load/unload resize scroll click /dbclick mousedown change select submit keydown/keypress/keyup error ??

15)DOM操作分析

查找节点 var $li=$(“ul li:first”); var $p=$(“p”); 创建元素和文本节点

var $li_new=$(“<li>新列表项</li>”);

$(“ul”).append($li_new);

var $li_new=$(“<li title=‘新内容’>内容<li>”); $(“ul”).append($li_new);

16)插入节点方法

Append() eg: $(“p”).append(“<b>Hello</b>”); AppendTo() eg: $(“<b>Hello</b>”).appendTo(“p”);

结果：<p><b>Hello</b></p>

Prepend() prependTo(),内容前添加

After() insetAfter(),元素后添加

Before() insetBefore() ,元素前添加

17)删除节点

Remove() empty()

18)复制节点

clone()方法

$(“p”).clone().appendTo(“body”); 可以实现复制节点，但该方法所生成的节点不会触发相应的事件。

clone(true)方法

实现复制节点，使用新复制的节点具有原节点相同的事件。

19)替换节点

replaceWith()

$(“p”).replaceWith(“<b>hello world!</b>”);

将页面中的所有p元素替换为<b>hello world!</b>，注意是每一个匹配的p都会被替换。

replaceAll()

$(“<b>Hello World!</b>”).replaceAll(“p”)

将页面中的所有p元素用<b>Hello World!</b>替换。同样也是每一个匹配项都会被替换。

20)包裹节点

wrap()

$(“strong”).wrap(“<b></b>”);结果：<b><strong></strong></b> wrapAll()

将所有匹配的元素包裹

如：<p>1</p><p>2</p>

$(“p”).wrapAll(“<b></b>”);

则结果为：<b> <p>1</p><p>2</p></b>

wrapInner()

将指定元素内容包裹

<p>1234</p>

则：$(“p”).wrapInner(“<b></b>”);

结果为：<p><b>1234</b></p>;

21)属性设置

var p_txt=$(“#pos”).attr(“class”); 获取

$(“#pos”).attr(“class”,”hot”);设置

$(“p”).removeAttr(“class”); 删除

另一种方法：addclass（） 或者css()方法

Toggle（）交替动作 toggleClass()

eg: $(“p”).toggle(function(){alert(‘A’);},function(){alert(‘B’);}) hasClass()判断是否有样式

22) 获取html、文本、值

var tit=$(“p”).html(); 获取

$(“p”).html(“<b>Hello World!</b>”);设置

$(“p”).text();获取

$(“p”).text(“hello world!”); 设置

Val(); 用于获取和设置元素的值

$(“p”).css(“color”);获取

$(“p”).css(“color”,”red”，??); 设置

注意：样式的驼峰式写法如：

font-size、background-color等属性，可以写成

fontSize、backgroundColor的方式。

width()和height()方法获得或设置指定元素的宽度和高度 23)常用方法

offset()获取元素在当前窗体的位置，返回一个offset对象。该对象有两个属性：left和top.分别代表左侧边距和顶部边距。如： 距离.

$(“textarea”).scrollTop(100);//垂直滚动条滚动到指定位置 $(“textarea”).scrollLeft(100);//水平滚动到指定的位置 var pos=$(“p”).offset(); alert(pos.left+”,”+pos.top);

scrollTop()和scrollLeft()获取元素的滚动条距顶端和左侧的

24)Ajax

在jQuery中$.ajax()方法属于最底层的方法 第2层有load()、$.get()和$.post()方法 第3层是 $.getScript()和$.getJSON()方法。

$.ajax(option); 参数以key/value键值形式存在，所有参数都是可选的 参数名称 type url

类型 String String

说明

POST和GET,默认为GET 发送请求的地址 请求超时时间（毫秒） 发送到服务器的数据如:

timeout data

Number

Object或String

{user:”admin”,pass:”123”}

dataType String 预期服务器返回的数据类型:xml,html,script,json,jsonp,text

beforeSend

Function 发送请求前用来修改 XMLHttpRequest对象的函数 请求完成后调用的回调函数 请求成功后的回调函数，有两 complete success Function Function 个参数function(data,textStatus) 请求失败时被调用的函数。有error Function

3个参数，function(XMLHttpRequest,textStatus,errorThrown)

global Boolean 默认为True,表示是否触发全局Ajax事件，设置为false则不会触发全局Ajax事件，AjaxStart或AjaxStop可用于控制各种Ajax事件。

ajaxStart()和ajaxStop()全局事件，提供了全局的在ajax调用开始前结束后的事件接口 eg:

<div id=“loading”>加载中?</div>

$(“#loading”).ajaxStart(function(){

$(this).show();})

$(“#loading”).ajaxStop(function(){

$(this).hide();})

25) 动画特效

Show() hide()

toggle() slideToggle() fadeTo() slideDown() slideUp() fadeIn() fadeOut()

Eg:(减弱至指定透明度)$(“div”).fadeTo(“fast”,”0.2”); 自定义动画animate(params,speed,fun);

$(“#btn”).click(function(){

$(“#pos”).animate({left:”+=20px”},fast);

})累加、累减动画

同时执行多个动画

$(“#pos”).animate({left:”+=20px”,height:”+=20px”},fast); 停止动画

stop()方法：停止阶段性动画。

stop(true)方法：停止当前动画后的所有阶段动画。 判断元素是否处于动画状态

$(“#ele”).is(“:animated”)

说明：

动画是顺序执行的

26)原生调用 phoneagp

27)数据交互

下载：

Ajax请求——>返回JSON数据——>保存到TAFFY数据库中

——>先更新离线数据localStorage——>业务直接操作TAFFY——>可以在localStorage中获取原始数据。（永久保存） 上传：

生成JSON数据——>ajax（）上传——>EOS服务器

LocalStorage操作：

LocalStorage.getItem(key) :获取指定key本地存储的值

：将value存储到key字段 LocalStorage.setItem(key,value)

LocalStorage.removeItem(key) :删除指定key本地存储的值 LocalStorage.length是LocalStorage的项目数

TAFFY操作：

引用：<script src="../js/lib/traffy.js"/>

TaffyDB 是一个免费开源的 JavaScript 库，用于在 Web 上实现一个轻量级的数据访问层，也就是一个简单的数据库。 新建一个数据集：

var datas = new TAFFY([{"id":1,"name":"A"}]);

获取数据：

过滤数据：

修改数据：

插入数据：

删除数据： datas ().get(); datas ({id:1}).get(); datas ().update({name:"B"}); datas ().insert({"id":2,"name":"B"}); datas ().remove();

TAFFY数据过滤：

简单过滤： datas({column:"value"});

is过滤：

!is过滤：

多条件：

或查询：

datas({column:{is:"value"}}); datas({column:{"!is":"value"}}); datas({column:"val",column2:"val"}); datas({column:["value","value2"]); datas([{column:"val"},{column2:"val"}]); 关键字：is、==、===、isnocase、left、leftnocase、isNull等等。

Json数组为下载到的或者自定义的，可以通过data[index].id

获取id的值

符合json格式的字符串为localStroage的存储格式，它存储键

值对，值就为json格式字符串，可用JSON.stringify();获得

Taffy 为数据库格式的存储，所以可以通过函数操作，

New TAFFY(data),存储， get()函数获得数组格式。

28)遍历