zoukankan      html  css  js  c++  java
  • 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>')

  • 相关阅读:
    倒计时功能的实现
    getElementsByClassName
    模拟滚动条
    display:table-cell
    gulp相关知识(2)
    gulp相关知识(1)
    移动端的网页试做
    关于移动端的布局
    伪类before和after
    简单时钟——css3
  • 原文地址:https://www.cnblogs.com/nmxs/p/5063331.html
Copyright © 2011-2022 走看看