zepto API学习(1)

看到别人说zepto和jQuery很像,那么zepto究竟有什么优势呢?

比较:

1、大小方面 , 压缩后的 zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 可以说非常的小, 但是功能很齐全, 多出来了一些触摸屏的事件 , 它唯一不支持的就是万恶的IE, 不过用它来开发iPhone和Android网页绝对是首选了.

2、jquery主要是用在电脑的网页中了,jquery是目前最流行的javascript框架,以其兼容全部主流浏览器,插件丰富,代码简洁,最关键的是更新快,最好的dom选择器而被广泛被使用。

3、手机wap方面的话,jquery也有 jquery-mobile.js,也很好用

本回答由网友推荐

1、当页面加载完成后调用:

<script>
    Zepto(function($){
        alert("Ready to Zepto!");
    });
script>

2、获取所有标签:

 $("p").css("background-color","red");

3、动态创建标签:

 //创建标签
 var html = '

hello

'
; $(".content").append(html); $("

Hello

"
).appendTo(".content"); $("

", { text:"Hello", id:"greeting", css:{color:'darkblue'} }).appendTo(".content");

打印结果:

hello

Hello

Hello

4、生成驼峰式命名

    Zepto(function($){
       //生成驼峰式命名
        $(".name").find("p").each(function(){
            $(this).text($.camelCase($(this).text()));
        });
    });

打印结果:

helloWorld

helloworld

helloWorld

5、遍历所有元素

//遍历元素
    $.each(['a','b','c'],function(index,value){
        console.log('item %d is: %s', index, value);
        var html = 'item '+index+ ' is:'+ value+'
'
; $(".item").append(html); }); var hash = { name: 'zepto.js', size: 'micro' }; $.each(hash,function(key,value){ var html = 'key: '+key+ ' value:'+ value+'
'
; $(".item").append(html); });

打印结果:

item 0 is:a
item 1 is:b
item 2 is:c
key: name value:zepto.js
key: size value:micro

6、extend

var target = { one: 'patridge' },
    source = {two: 'turtle doves' }

var target2 = { one: 'patridge' },
    source2 = {one:'one',two: 'turtle doves' }
console.log($.extend(target, source));
console.log($.extend(target2, source2));

打印结果:

Object {one: "patridge", two: "turtle doves"}
Object {one: "one", two: "turtle doves"}

7、grep 只返回回调函数返回的内容

Zepto(function($){
        var newItem = $.grep(['a','b','c'],function(item){
            if(item == 'a') return item;
        });
        console.log(newItem);
    })

打印解雇:

a]

8、inArray 判断数组中是否存在某元素

  • ‘a’ 查找的元素
  • [‘a’,’b’,’c’]查找的数组
  • 开始查找的位置
  • 返回值为-1表示没有查找到
console.log($.inArray('a',['a','b','c'],0));

打印结果:

0

9、$.isArray(object) 判断是不是数组

10、$.isFunction 判断是不是function

11、$.isNumeric(value) 判断是不是number

12、$.isPlainObject(object) 判断对象是不是空白的

13、$.isWindow(object) 判断是不是window

14、 .map .grep的区别

var arr = new Array(0,2,3);
var newArr = $.map(arr,function(value){
    return value>0?value+1:null;
});
console.log(newArr);

var newArr2 = $.grep(arr,function(value){
  return value>0?value+1:null;
});
console.log(newArr2);

map和grep的异同:

  • 都是对数组进行操作
  • map对数组进行遍历,返回满足条件的新数组
  • grep 起到筛选的作用,返回满足条件的值

打印结果:

[3, 4]
[2, 3]

15、$.noop 空函数
16、

你可能感兴趣的:(HTML基础)