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>')

  • 相关阅读:
    dotnet core 获取 MacAddress 地址方法
    dotnet core 获取 MacAddress 地址方法
    dotnet core 发布只带必要的依赖文件
    dotnet core 发布只带必要的依赖文件
    Developing Universal Windows Apps 开发UWA应用 问答
    Developing Universal Windows Apps 开发UWA应用 问答
    cmd 如何跨驱动器移动文件夹
    cmd 如何跨驱动器移动文件夹
    C++ 驱动开发 error LNK2019
    C++ 驱动开发 error LNK2019
  • 原文地址:https://www.cnblogs.com/nmxs/p/5063331.html
Copyright © 2011-2022 走看看