使用前先引入zepto.min.js
1.当页面ready的时候,执行回调
Zepto(function($){
})
2.创建带有属性的元素
var p1=$("<p />", { text:"Hello", id:"greeting", css:{color:'darkblue'} });
3.将字符串转化为驼峰法命名的新字符串
$.camelCase()
4.检查父节点是否包含给定的dom节点,如果两者是相同的节点,则返回 false。
$.contains(parent, node)
5.遍历数据
$.each(collection, function(index, item){ ... })
6.拷贝
$.extend(true, target, [source, ...])
默认情况下为,复制为浅拷贝(浅复制)。如果第一个参数为true表示深度拷贝(深度复制)。
7.$fn
Zepto.fn是一个对象,它拥有Zepto对象上所有可用的方法,如 addClass(), attr(),和其它方法。在这个对象添加一个方法,所有的Zepto对象上都能用到该方法。
8.$grep
$.grep(items, function(item){ ... }) ⇒ array
获取一个新数组,新数组只包含回调函数中返回 ture 的数组项。
9.$.inArray
$.inArray(element, array, [fromIndex]) ⇒ number
$.inArray("abc",["bcd","abc","edf","aaa"]);//=>1
返回数组中指定元素的索引值(愚人码头注:以0为基数),如果没有找到该元素则返回-1。
10.$.inArray
$.isArray(object) ⇒ boolean
如果object是array,则返回ture。
11.$.inFuncton
$.isFunction(object) ⇒ boolean
如果object是function,则返回ture。
12.$.isPlainObject
$.isPlainObject(object) ⇒ boolean
测试对象是否是“纯粹”的对象,这个对象是通过 对象常量("{}") 或者 new Object 创建的,如果是,则返回true。
13.$.isWindow
$.isWindow(object) ⇒ boolean
如果object参数是否为一个window对象,那么返回true。这在处理iframe时非常有用,因为每个iframe都有它们自己的window对象,使用常规方法obj === window校验这些objects的时候会失败。
14.$.map
$.map(collection, function(item, index){ ... }) ⇒ collection
通过遍历集合中的元素,返回通过迭代函数的全部结果,(愚人码头注:一个新数组)null 和 undefined 将被过滤掉。
15.$.parseJSON
$.parseJSON(string) ⇒ object
原生JSON.parse方法的别名。(愚人码头注:接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript 对象。)
16.$.trim
$.trim(string) ⇒ string
删除字符串首尾的空白符。类似String.prototype.trim()。
17.$.type
$.type(object) ⇒ string
获取JavaScript 对象的类型。可能的类型有: null undefined boolean number string function array date regexp object error。
对于其它对象,它只是简单报告为“object”,如果你想知道一个对象是否是一个javascript普通对象,使用 isPlainObject。
18.add
添加元素到当前匹配的元素集合中。如果给定content参数,将只在content元素中进行查找,否则在整个document中查找。
$('li').add('p').css('background-color', 'red');
addClass添加类名
after插入到元素之后 外部插入
insertAfter 方式相反
before插入到元素之前 外部插入
insertBefore 使用方式相反
append插入到元素之后 内部插入 appendto
prepend插入到元素之前 内部插入 prependto
children获取匹配元素的直接子元素
clone克隆
19.concat
添加元素到一个Zepto对象集合形成一个新数组。如果参数是一个数组,那么这个数组中的元素将会合并到Zepto对象集合中。(这是一个Zepto提供的方法,不是jquey的API 。)
20.contents
获得每个匹配元素集合元素的子元素,包括文字和注释节点。
21.css
读取或设置DOM元素的css属性。
22.data
读取或写入dom的 data-* 属性
23.each
$('form input').each(function(index){
console.log('input %d is: %o', index, this)
})
24.empty
清空对象集合中每个元素的DOM内容。
25.eq
从当前对象集合中获取给定索引值(愚人码头注:以0为基数)的元素。
26.filter
过滤对象集合,返回对象集合中满足css选择器的项。如果参数为一个函数,函数返回有实际值得时候,元素才会被返回。在函数中, this 关键字指向当前的元素。
27.find
在当对象前集合内查找符合CSS选择器的每个元素的后代元素。
28.first
获取当前对象集合中的第一个元素。
last
获取对象集合中最后一个元素。
29.forEach
遍历对象集合中每个元素,有点类似 each,但是遍历函数的参数不一样,当函数返回 false 的时候,遍历不会停止。(这是一个Zepto提供的方法,不是jquery的API。)
30.get
从当前对象集合中获取所有元素或单个元素。当index参数不存在的时,以普通数组的方式返回所有的元素。当指定index时,只返回该置的元素。这点与eq不同,该方法返回的是DOM节点,不是Zepto对象集合。
31.has
判断当前对象集合的子元素是否有符合选择器的元素,或者是否包含指定的DOM节点,如果有,则返回新的对象集合,该对象过滤掉不含有选择器匹配元素或者不含有指定DOM节点的对象。
hasClass
检查对象集合中是否有元素含有指定的class。
32.height
获取对象集合中第一个元素的高度;或者设置对象集合中所有元素的高度。
33.hide()
通过设置css的属性display 为 none来将对象集合中的元素隐藏。
34.html
获取或设置对象集合中元素的HTML内容。
35.index
获取一个元素的索引值(愚人码头注:从0开始计数)。
36.indexOf
在当前对象集合中获取一个元素的索引值(愚人码头注:从0开始计数)。
(这是一个Zepto的方法,不是jquer的api。)
37.next
获取对象集合中每一个元素的下一个兄弟节点(可以选择性的带上过滤选择器)。
prev
获取对象集合中每一个元素的前一个兄弟节点,通过选择器来进行过滤。
38.offset
获得当前元素相对于document的位置。返回一个对象含有: top, left, width和height
offsetParent
找到第一个定位过的祖先元素,意味着它的css中的position 属性值为“relative”, “absolute” or “fixed”
39.parent
获取对象集合中每个元素的直接父元素。如果css选择器参数给出。过滤出符合条件的元素。
parents
获取对象集合每个元素所有的祖先元素。如果css选择器参数给出,过滤出符合条件的元素。
40.attr读取或设置属性
prop
读取或设置dom元素的属性值。它在读取属性值的情况下优先于 attr,因为这些属性值会因为用户的交互发生改变,如checked 和 selected。
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
remove removeAttr removeClass
replaceWith
scrollLeft 获取或设置页面上的滚动元素或者整个窗口向右滚动的像素值。
scrollTop 获取或设置页面上的滚动元素或者整个窗口向下滚动的像素值。
show
siblings获取对象集合中所有元素的兄弟节点。
size获取对象集合中元素的数量。
toggle显示或隐藏匹配元素。
toggleClass在匹配的元素集合中的每个元素上添加或删除一个或多个样式类。如果class的名称存在则删除它,如果不存在,就添加它。
val()获取或设置匹配元素的值。
width
事件
用on
$("#btn").on("click",function(event){
console.log(event);
})
one
只执行一次事件
Ajax请求
type(默认: “GET”):请求方法 (“GET”, “POST”, or other)
url (默认: 当前地址):发送请求的地址
data (默认:none):发送到服务器的数据;如果是GET请求,它会自动被作为参数拼接到url上。非String对象将通过 $.param 得到序列化字符串。
processData (默认: true): 对于非Get请求。是否自动将 data 转换为字符串。
contentType (默认: “application/x-www-form-urlencoded”): 发送信息至服务器时内容编码类型。 (这也可以通过设置 headers)。通过设置 false 跳过设置默认值。
mimeType (默认: none): 覆盖响应的MIME类型。 v1.1+
dataType (默认: none):预期服务器返回的数据类型(“json”, “jsonp”, “xml”, “html”, or “text”)
jsonp (默认:“callback”): JSONP回调查询参数的名称
jsonpCallback (默认: “jsonp{N}”): 全局JSONP回调函数的 字符串(或返回的一个函数)名。设置该项能启用浏览器的缓存。 v1.1+
timeout (默认: 0): 以毫秒为单位的请求超时时间, 0 表示不超时。
headers: Ajax请求中额外的HTTP信息头对象
async (默认:true): 默认设置下,所有请求均为异步。如果需发送同步请求,请将此设置为 false。
global (默认:true): 请求将触发全局Ajax事件处理程序,设置为 false 将不会触发全局 Ajax 事件。
context (默认:window): 这个对象用于设置Ajax相关回调函数的上下文(this指向)。
traditional (默认: false): 激活传统的方式通过$.param来得到序列化的 data。
cache (默认: true): 浏览器是否应该被允许缓存GET响应。从v1.1.4开始,当dataType选项为 "script" 或 jsonp时,默认为false。
xhrFields (默认: none): 一个对象包含的属性被逐字复制到XMLHttpRequest的实例。 v1.1+
username & password (默认: none): HTTP基本身份验证凭据。 v1.1+
beforeSend(xhr, settings):请求发出前调用,它接收xhr对象和settings作为参数对象。如果它返回 false ,请求将被取消。
success(data, status, xhr):请求成功之后调用。传入返回后的数据,以及包含成功代码的字符串。
error(xhr, errorType, error):请求出错时调用。 (超时,解析错误,或者状态码不在HTTP 2xx)。
complete(xhr, status):请求完成时调用,无论请求失败或成功。
触摸事件
tap —元素tap的时候触发。
singleTap and doubleTap — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击,使用 tap 代替)。
longTap — 当一个元素被按住超过750ms触发。
swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向)