zepto 基础知识(1)
1.$() 的用法。 获取元素 $('div') //获取所有页面中的div元素 $('#foo') // 获取ID 为"foo"的元素 创建元素 $("<p>Hellow</p>"") //新的p元素 $("<p/>",{text:"Hellow",id:"greeting",css:{color:'darkblue'}}) //<p id="greeting" style="color:darkblue">Hellow</p> 当页面ready的时候,执行回调:
Zepto(function($){
alert("123")
})
2.camelCase
将一组字符串变成“驼峰”命名法的新字符串,如果该字符串已经是驼峰命名,那么不变。
$.camelCase('hello-there') //“helloThere”
$.camelCass('helloThere') // "helloThere"
3.$.contains()
检查父节点是否包含给定的dome 节点,如果两者是相同的节点,则返回 false. 用法:$.contains(parent,node) 返回 boolean
4.each $.each(collection,function(indx,item){...}) 遍历数组元素或者以key-value 值对方式遍历对象。回调换上返回false 时停止遍历。
$.each(['a','b','c'],function(index,item){
console.log('item %d is: %s',index,item)
})
//item 0 is: a
//ct1.html:18 item 1 is: b
//ct1.html:18 item 2 is: c
var hah = {name:'zepto.js',size:'micro'}
$.each(hash,function(key,vaue){
console.log('%s: %s',key,value)
})
//name: zepto.js
//size: micro
5.$.extend $.extend(target,[source,[source2,...]]) $.extend(true,target,[source,.....]) 通过源对象扩展目标对象的属性,源对象属性将覆盖目标对象属性 默认情况下为,复制为浅拷贝,如果第一个参数为true表示深度拷贝(深度复制)
var target = {one:'patridge'},
source = {two:'turtle doves'}
console.log($.extend(target,source))
//{one: "patridge", two: "turtle doves"}
6.fn Zepto.fn 是一个对象,它拥有Zepto对象上所有的方法,在这个对象上添加一个方法。 所有的Zepto 对象上都能用到这个方法。
$.fn.empty = function(){
return this.each(function(){ this.innerHTML=''})
}
7.grep $.grep(items,function(item){...}) 类型array 获取一个新数组,新数组只包含回调函数中返回true 的数组项
$.grep([1,2,3],function(item){
return item > 1
);
//=>[2,3]
8.inArray $.inArray(element,array,[fromIndex]) 类型:number 返回数组中指定元素的索引值,如果没有找到该元素则返回 -1. [fromIndex] 参数可选,表示从哪个索引值开始向后搜索。
$.inArray("abc",["bcd","abc","edf","aaa"]);
//=>1
$.inArray("abc",["bcd","abc","edf","aaa"],1);
//=>1
$.inArray("abc",["bcd","abc","edf","aaa"],2);
//=>-1
9.isArray $.isArray(object) 类型:boolean 如果object 是array ,则返回true.
var ob = [1,2,3,4];
console.log($.isArray(ob))
//true
10.isFunction $.isFunction(object) 类型 boolean 如果object 是function,则返回true.
var fun = function(){ return 123;}
console.log($.isFunction(fun))
//true
11.$.isPlainObject $.isPlainObject(object) 类型:boolean 测试对象是否是纯粹的对象,这个对象是通过对象常量("{}")或者new Object 创建的,如果是,则返回true.
$.isPlainObject({})
// => true
$.isPlainObject(new Object)
// => true
$.isPlainObject(new Date)
// => false
$.isPlainObject(window)
// => false
12.isWindow $.isWindow(object) 类型;boolean 如果object 参数是否为yige window 对象,那么返回true.这在处理iframe 时非常有用,因为每个iframe都有他自己的window对象,
使用常规方法 obj=== window 验证这些objects时候会失败。
13.$.map $.map(collection,function(item,index){...}) 类型 collection 通过遍历集合中的元素,返回通过迭代函数的全部结果,null和undefined 将被过滤掉。
$.map([1,2,3,4,5],function(item,index){
if(item>1){return item*item;}
});
// =>[4, 9, 16, 25]
$.map({"yao":1,"tai":2,"yang":3},function(item,index){
if(item>1){return item*item;}
});
// =>[4, 9]
14.$.parseJSON $.parseJSON(string) 类型:object 原生 JSON.parse 方法的别名。接受一个标准格式的JSON 字符串,并返回解析后的JavaScript 对象。
15.trim $.trim(string) 类型: string 删除字符串收尾的空白符,类型String.prototype.trim()
16.type $.type(object) 类型:string 获取JavaScript 对象的类型,可能的类型有:null undefined boolean number string function array date regexp object error. 对于其它对象,他只是简单报告为”object“,如果你想知道一个对象是否是一个javascript普通对象,使用isPlainObject.
17.add add(selector,[context]) 类型: self 添加元素到当前匹配的元素集合中,如果给定content 参数,将只在content 元素中进行查找,否则在整个document 中查找。 $('li').add('p').css('background-color', 'red');
18.addClass addClass(name) 类型:self addClass(function(index, oldClassName){....}) 为每个匹配的元素添加指定的class类名。多个class类名使用空格分隔。
19.after after(content) 类型 :self 在每个匹配的元素后面插入内容(外部插入)内容可以为html字符串,dom节点,或者节点组成的数组。 $.('form label').after('<p>A note below the label</p>')
20.append append(content) 类型:self 在每个匹配的元素末尾插入内容(内部插入)。内容可以为html 字符串。dom节点,或者节点组成的数组。 $('ul').append('<li>new list item</li>')
- Hive使用十六进制分隔符异常分析
- 智能家居系统结构
- 一个简单的完全信息动态博弈的解答
- Struts2远程代码执行漏洞S2-052 复现&防御方案
- CENTOS6.5安装CDH5.12.1(二)
- @ControllerAdvice + @ExceptionHandler 处理 全部Controller层异常
- 动态增加表单元素并获取元素的text和value提交
- SpringBoot常用配置
- Json格式String类型字符串转为Map工具类
- spring boot thymeleaf常用方式
- Java工具类- 跨域工具类
- python语言中的AOP利器:装饰器
- 如何使用supervisor管理你的应用
- Manjaro安装配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 《剑指offer》05: 从尾到头打印链表
- 《剑指offer》第六天:重建二叉树
- Android | 《看完不忘系列》之Glide
- Android | 资源冲突覆盖的一些思考
- 如何获取流式应用程序中checkpoint的最新offset
- Spark之离线统计热点城市信息
- 使用OpenCV实现图像增强
- typescript基础篇(4):函数
- 这样的奇技淫巧,劝你不用也罢
- 一文详解设备ID的那些事儿
- Ansible搭建hadoop-3.1.3高可用
- Android | xml和view的那些事
- Android | Glide细枝篇
- 从源代码编译安装 MonoDevelop 记录
- 在 Asp.Net Core WebAPI 中防御跨站请求伪造攻击