複習 | 重溫jQuery和Zepto的API

時間 2019-12-01

標籤複習重溫 jquery zepto api 欄目 JQuery 简体版

原文原文鏈接

　　jq和zepto很類似有許多共同的api，zepto也出了不少與jq不同的api，總的來講，二者更類似，可是zepto更輕量一點，正好公司也在用，複習這兩個沒錯javascript

　　jq中的zepto的事件和ajax我沒有整理，由於以前有專門的文章去詳細的寫了ajax和事件綁定的區別php

　　再學ajax--第一天css

　　再學ajax--次日 | 基於php+mysql+ajax的表單註冊、登陸、註銷html

　　JS進階 | 分析JS中的異步操做java

　　面試 | 螞蟻金服面試經歷也講到了js中的綁定事件的區別bind、on、delegate，以及事件綁定事件委託的區別等node

　　jquery複習

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style >
  *{
    margin:0;
    padding: 0;
  }
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  /* jQuery([selector,[context]]) */
  console.log($('div>p'));
  $(document.body).css("background","black");
  // 在文檔的第一個表單中，查找全部的單選按鈕
  console.log($('input:radio',document.forms[0]))
  /*jQuery(html,[ownerDocument])*/
  $(function(){
    $('<div>hello world</div>').appendTo('.test');
    // 動態建立一個 div 元素（以及其中的全部內容），並將它追加到 body 元素中
    $('<div>',{
      "class":"test_valid",
      text:"click me",
      click:function(){
        $(this).toggleClass("test2");
      }
    }).appendTo(".test")
    // 建立一個 <input> 元素，同時設定 type 屬性、屬性值，以及一些事件。
    $('<input>',{
      type:'text',
      val:"text",
      focusin:function(){
        // alert("focusin");
      },
      focusout:function(){
        // alert("focusout");
      }
    }).appendTo(".test");
  })
    /* jQuery(callback)*/
    $(function(){
      // do something
      // 等價於$(document).ready()
    })
    /* jQuery.holdReady(hold) */
    // 延遲就緒事件，直到已加載的插件。
    // $.holdReady(true);
    // $.getScript("plugin.js",function(){
    //   $.holdReady(false)
    // })
    /* each(callback) */
     $(function(){
       $('.test > span').each(function(i){
         // console.log(this);
         // console.log($(this));
         this.innerHTML="span"+i;
         // $(this).toggleClass("span"+i);
         // $(this).text("hello");
         // 跳出遍歷
         // return false;
       })
     })
    /* size() */
    // jQuery 對象中元素的個數
    console.log($("div").size());
    console.log($('div').length);
    /* selector、context 、get([index]) 、index([selector|element]) */
    $(function(){
      $("ul")
      // 返回傳給jQuery()的原始選擇器
        .append("<li>"+$('ul').selector+"</li>")
      // 返回傳給jQuery()的原始的DOM節點內容，即jQuery()的第二個參數。那麼context指向當前的文檔(document)。
        console.log($('ul').context)
        console.log($('ul',document.body).context)
        console.log($('.innerTest>span').get(0));
        // 選擇文檔中全部圖像做爲元素數組，並用數組內建的 reverse 方法將數組反向。
        console.log($('.innerTest>span').get().reverse());
        //傳遞一個DOM對象，返回這個對象在原先集合中的索引位置
        console.log($('.innerTest>span').index(document.getElementById('bar')));
        //傳遞一個jQuery對象
        console.log($('.innerTest>span').index($('#bar')));
        //傳遞一組jQuery對象，返回這個對象中第一個元素在原先集合中的索引位置
        console.log($('.innerTest>span').index($('.innerTest>span:nth-child(2)')));
    })
    /*數據緩存data*/
    $(function(){
      // 沒什麼卵用
      $('.data').data("div-data","data");
    })
    /*queue(element,[queueName])*/
    $(function(){
      $("#show").on('click',function(){
        var n = $(".queue").queue("fx");
        // 顯示在匹配元素上執行的函數隊列的個數
        console.log(n.length);
      })
      function resuIt(){
        $('.queue').show("slow");
        $('.queue').animate({left:"+=200"},2000);
        $('.queue').slideToggle(1000);
      }
      resuIt()
    })
    /*queue(element,[queueName]) jQuery.extend(object)*/
    $(function(){
      // 給選擇器提供新方法
      jQuery.fn.extend({
        check:function(){
          return this.each(function(){this.checked=true})
        },
        uncheck:function(){
          return this.each(function(){this.checked=false})
        }
      })
      // 擴展jQuery對象自己
      jQuery.extend({
        min:function(a,b){return a<b?a:b},
        max:function(a,b){return a>b?a:b}
      })
      $(".innerTest>input[type=checkbox]").check();
      $(".innerTest>input[type=radio]").uncheck();
      console.log(jQuery.min(1,2));
      console.log(jQuery.max(3,4));
    })
    /*屬性相關*/
    $(function(){
      // attr
      console.log($('.innerTest>input').eq(1).attr('type'))
      $('.innerTest>span').eq(2).attr({class:"innerSpan","data-span":"innerSpan"})
      // class的值爲innerHTML的值
      $('.innerTest>span').eq(2).attr("class",function(){return this.innerHTML})

      // removeAttr
      $('.innerTest>span').eq(0).removeAttr("class");
      // prop 獲取在匹配的元素集中的第一個元素的屬性值。
      console.log($(".innerTest>input[type='checkbox").prop('checked'));
      // 禁用全部checkbox
      $(".innerTest>input[type='checkbox']").prop('checked',function(i,val){
          return !val;
      })
      // addClass
      $(".innerTest>span:nth-child(5)").addClass("span5 span_5")
      // 加上不一樣的class
      $(".innerTest>span").addClass(function(){
        return "span_"+$(this).index();
      })
      // removeClass
      $(".innerTest>span").eq(0).removeClass('span_0');
      // 刪除最後一個元素與上面重複的class
      $(".innerTest>span:last").removeClass(function(){
        return $(this).prev().attr('class');
      })
      // toggleClass 若是存在（不存在）就刪除（添加）一個類。
      // 點擊三下添加一個類
      let count = 1;
      $('.innerTest>span').eq(5).on('click',function(){
        $(this).toggleClass("highlight",count ++ % 3==0)
      })
      // 根據父元素添加類
      $('.innerTest>span').eq(5).toggleClass(function(){
        if($(this).parent().is(".innerTest")){
          return "span_6"
        }
      })
      // html和text
      $(".innerTest>p").html(function(n){
        $(this).text(n);
        // 下面二者等價
        $(this).each(function(i){
          console.log($(this)[i].innerHTML)
        });
          console.log($(this).text())
      })
      // val 元素必需要有value
      $('.innerTest>input').eq(0).val(function(){
        return $(this).val() + "...";
      })
    })
    /*css相關*/
    $(function(){
      // css
      $(".innerTest>span").eq(0).css({'font-size':'24px','color':'red'})
      // 點擊時自動變大，用到了定時器的this指向，採用閉包解決
      $('.innerTest>span').eq(1).on('click',function(){
          let count = 1.2;
          var _this = $(this);
          setInterval(function(){
            count++;
          _this.css({
               'font-size':parseFloat(15)*count +'px'
          })
          },500)
      });
      // offset 獲取匹配元素在當前視口的相對偏移。
      let offset_1 = $('.innerTest>span').eq(0).offset();
      console.log(offset_1.left);
      console.log(offset_1.top);
      // position 獲取匹配元素相對父元素的偏移。
      let offset_2 = $('.innerTest>span').eq(0).position();
      console.log(offset_2.left);
      console.log(offset_2.top);
      // scrollTop獲取匹配元素相對滾動條頂部的偏移。
      console.log($('.innerTest>span').eq(0).scrollTop());
      // scrollLeft獲取匹配元素相對滾動條左側的偏移。
      console.log($('.innerTest>span').eq(0).scrollLeft());
      // height.width
      console.log($('.innerTest>span').eq(0).height());
      console.log($('.innerTest>span').eq(0).width());
      // innerHeight、innerWidth獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）。
      console.log($('.innerTest>span').eq(0).innerHeight());
      console.log($('.innerTest>span').eq(0).innerWidth());
      // outerHeight、outerWidth獲取第一個匹配元素外部高度（默認包括補白和邊框）。
      console.log($('.innerTest>span').eq(0).outerHeight());
      console.log($('.innerTest>span').eq(0).outerWidth());
    })
    /*選擇器相關(就不寫基本的或者簡單的選擇器了)*/
    $(function(){
      // 空格：在給定的祖先元素下匹配全部的後代元素
      // >：在給定的父元素下匹配全部的子元素
      // +：一個有效選擇器而且緊接着第一個選擇器
      // ~ ： 匹配元素以後的全部兄弟元素
      // :first          ：獲取第一個元素
      // :last           ：獲取最後一個元素
      // :not(selector)  ：反向選擇器
      // :even           ：匹配全部索引值爲偶數的元素，從 0 開始計數
      // :odd            ：匹配全部索引值爲奇數的元素，從 0 開始計數
      // :eq(index)      ：匹配一個給定索引值的元素
      // :gt(index)      ：匹配全部大於給定索引值的元素
      // :lt(index)      ：匹配全部小於給定索引值的元素
      // :header        ：匹配如 h1, h2, h3之類的標題元素
      // :animated     ：匹配全部正在執行動畫效果的元素
      // :contain(text)   : 匹配包含給定文本的元素
      // :empty()         : 匹配全部不包含子元素或者文本的空元素
      // :has(selector)   : 匹配含有選擇器所匹配的元素的元素
      console.log($('.data:has(p)').text())
      // :parent()        : 匹配含有子元素或者文本的元素
      // :hidden 匹配全部不可見元素，或者type爲hidden的元素
      console.log($('.innerTest>h1:hidden'))
      // :visible 匹配全部的可見元素
      // [attribute]  匹配包含給定屬性的元素。
      console.log($('div[class]'))
      // [attribute=value]
      console.log($("input[type='button']"))
      // [attribute!=value] 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素。
      console.log($("input[type!='button']"))
      // [attribute^=value] 匹配給定的屬性是以某些值開始的元素
      console.log($("span[class^='span']"))
      // [attribute$=value] 匹配給定的屬性是以某些值結尾的元素
      console.log($("span[class$='_2']"))
      // [attribute*=value] 匹配給定的屬性是以包含某些值的元素
      console.log($("span[class*='_']"))
      // [selector1][selector2][selectorN] 複合屬性選擇器，須要同時知足多個條件時使用。
      console.log($("input[class][name='radio']"))
      // :first-child 匹配第一個子元素 注意和+號的區別
      console.log($('ul li:first-child'))
      // ':last'只匹配一個元素，而此選擇符將爲每一個父元素匹配一個子元素
      console.log($('ul li:last-child'))
    })
      /*文檔處理*/
      // appendTo：把選擇器的內容追加到appendTo裏面的內容中和append:把append裏面的內容追加到選擇器中
      // prepend(content)：向每一個匹配的元素內部前置內容。
      $(function(){
        // after(content|fn)
        // before(content|fn)
        console.log($("p:nth-child(1)").after("<b>hello</b>"))
        console.log($("p:nth-child(1)").before("<b>hello</b>"))
        // insertAfter(content) 前者插到後者後面
        $(".123").insertAfter(".456");
        // insertBefore(content) 後者插到前者前面
        $(".101112").insertBefore(".789");
        // wrap(html|ele|fn) 把全部匹配的元素用其餘元素的結構化標記包裹起來。
        $("b:nth-child(1)").wrap("<div class='pchild'></div>")
        // replaceWith(content|fn)
        $(".replaceP").replaceWith("<b>replaceP</b>")
        // empty()  刪除匹配的元素集合中全部的子節點。
        $(".emptyAll").empty()
        // remove([expr]) 從DOM中刪除全部匹配的元素
        $(".remove").remove();
        // filter
        $(".filter").filter(function(idx){
          console.log($(this));
          return $("ol",this).length==0;
        })
        // is(expr|obj|ele|fn)
        console.log($(".innerTest2").is("div"));
        // find(expr|obj|ele|fn)
        console.log($(".innerTest2").find("li"))
        // add() 返回一個數組，包含添加過的元素
        console.log($(".innerTest2").add("<p>---</p>"));
      })
        /* 動畫 */
        $(function(){
          // show
          $(".innerTest2 li").eq(0).show("slow");
          // hide
          $(".innerTest2 li").eq(1).hide("slow");
          $(".innerTest2 li").eq(2).slideDown("slow");
          $(".innerTest2 li").eq(2).fadeOut("slow");
          $(".innerTest2 li").eq(2).fadeIn("slow");
        })
</script>
<body>
  <div class="test" style="width:500px;heigth:500px;border:solid 1px black">

    <h1>測試區</h1>
    <p>div>p</p>
    <input type="text">
    <br>
    <span></span>
    <span></span>
    <ul></ul>
    <ul class="ul">
      <li>-</li>
      <li>+</li>
    </ul>
    <div class="innerTest">
      <h1 style="display:none">h1</h1>
      <a href=""></a>
      <span id="foo" class="span1" style="border:solid 1px black">1</span>
      <span id="bar">2</span>
      <span>3</span>
      <span class="span4">4</span>
      <span class="span4">5</span>
      <span>6</span>
      <input type="checkbox" value="checkbox1">一
      <input type="radio" name="radio" class="radio">二
      <input type="checkbox">三
      <input type="checkbox">四
      <p></p>
      <p></p>
      <p></p>
    </div>
      <p class="filter">
        <ol>
          <li>hello</li>
        </ol>
      </p>
    <div class="innerTest2" >
        <li style="display:none">1</li>
        <li>2</li>
        <li>3</li>
    </div>
    <p class="replaceP">replaceP</p>
    <p class="emptyAll">empty <b>123</b</p>
    <p class="remove">empty <b>123</b</p>
    <p class="123">123</p><div class="pdiv">456</div>
    <p class="123">789</p><div class="101112">101112</div>
    <div class="data"><p>有p</p></div>
    <input type="button" id="show" value="show">
    <div class="queue">queuequeuequeue</div>
  </div>
  <form action="">
    <input type="radio" value="input:radio">
  </form>
</body>
</html>

　　zepto

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.js"></script>
<script type="text/javascript">
  $(function(){
    // 一、駝峯轉換
    console.log($.camelCase("hello-world"))
    // 二、檢查父節點是否包含給定的dom節點，若是二者相同，則返回 false。
    // $.contains = function (parent, node) {
    //  return parent !== node && parent.contains(node)
    // }
    // true
    console.log($.contains($(".parent")[0],$(".child")[0]))
    // false
    console.log($.contains($("body")[0],$("body")[0]))
    // false
    console.log($.contains($(".parent")[0],$(".parent")[0]))
    // 三、each
    $.each(['a','b','c'],function(index,item){
      // 索引
      console.log(index);
      // 內容
      console.log(item);
    })
    var obj = {name:"zepto","size":"micro"};
    $.each(obj,function(key,value){
      console.log(key);
      console.log(value);
    })
    // 四、$.extend
    var target = {"1":"2"}
    var source = {"name":"zepto"}
    $.extend(target,source);
    console.log(target)
    // 五、$.fn
    $.fn.alert1 = function(){
      alert(1);
    }
    $(".parent").alert1();
    // 六、$.grep
    console.log($.grep([1,2,3],function(item){
      return item >1
    }))
    // 七、$.inArray 搜索數組中指定值並返回它的索引（若是沒有找到則返回-1）。
    console.log($.inArray("abc",["abc","123"]))
    console.log($.inArray("abc",["123"]))
    // 八、$.isArray 若是object是array，則返回ture。
    // 九、$.isFunction  若是object是function，則返回ture.
    // 十、$.isPlainObject 測試對象是不是純粹的對象（經過 "{}" 或者 "new Object" 建立的），若是是，則返回true。
    console.log($.isPlainObject(window)); //false
    console.log($.isPlainObject({}));  //true
    // 十一、$.isWindow 肯定參數是否爲一個窗口（window對象），若是是則返回true。 這在處理iframe時很是有用，由於每一個iframe都有它們本身的window對象
    // 十二、$.map
    console.log($.map([-2,1,2,3],function(item,index){
      if(item>1){return item*item}
    }))
    console.log($.map({1:1,2:2,3:3},function(item,index){
      if(item>1){return item*item}
    }))
    // 十二、$.parseJSON 接受一個標準格式的 JSON 字符串，並返回解析後的 JavaScript 對象。
    // 1三、$.trim 刪除字符串開始和末尾的空白符。
    // 1四、$.type 獲取JavaScript 對象的類型。
    // 1五、$.add 添加元素到匹配的元素集合
    console.log($("ul").add("span")); // [ul, span, selector: Array(2)]
    // 1六、addClass 爲每一個匹配的元素添加指定的class類名
    // 1七、after 在每一個匹配的元素後插入內容。
    // 1八、append 在每一個匹配的元素末尾插入內容。
    // 1九、appendTo 將匹配的元素插入到目標元素的末尾（裏面的後面）。
    // 20、before 在匹配每一個元素的前面（外面）插入內容。
    // 2一、children  得到每一個匹配元素集合元素的直接子元素，若是selector存在，只返回符合css選擇器的元素。
    // 2二、$('ol').children('*:nth-child(2n)')
    // 2三、clone 經過深度克隆來複制集合中的全部元素。
    // 2四、concat
    console.log($("li").eq(0).concat([$("li").eq(1)]));
    // 2五、data 讀取或寫入dom的 data-* 屬性。
    console.log($("li").eq(0).data("he"));
    // 2六、each
    $("form input").each(function(index){
      console.log(this,index);
    })
    // 2七、empty 從Zepto對象集合中移除全部的dom子節點。
    // 2八、filter
    console.log($("form input").filter(function(index){
      return index %2==0;
    }))
    // 2九、find
    console.log($("form").find('input,select'));
    // 30、first 獲取當前Zepto對象集合中的第一個元素。
    console.log($("form").first()); // 返回form
    // 3一、forEach
    $("form input").forEach(function(item,index,array){
      console.log(item,index,array)
    })
    // 3二、get
    console.log($("form input").get(0));
    // 3三、has
    console.log($("form").has('input'))
    // 3四、hasClass 是否有元素含有指定的class
    // 3五、height
    console.log($("form").height());
    // 3六、hide  設置display 爲 none 隱藏元素
    // 3七、index
    console.log($("form").index());
    // 3八、insertAfter
    // 3九、insertBefore
    // 40、is() 判斷當前Zepto元素集合中的第一個元素是否符css選擇器。
    // 4一、last() 獲取Zepto集合對象中最後一個元素。
    console.log($("form").last());
    // 4二、pluck
    console.log($("form >*").pluck('nodeName'))
    // 4三、position 相對於第一個定位過的祖先元素
    console.log($("form").position())
    // 4四、prop 它在讀取屬性值的狀況下優先於 attr 多用於checked和selected 用戶交互改變的屬性
    $("form input").eq(3).on("click",function(){
      console.log(1);
      console.log($(this).attr("checked"))
      console.log($(this).prop("checked"))
    })
    // 4五、scrollTop  獲取頁面上的滾動元素或者整個窗口已經滾動的像素值。
    console.log($("form").scrollTop());
    // 4六、toggle 顯示或隱藏匹配元素。 若是 setting爲true，至關於show 法。
    $("form input").toggle($("form input").eq(4).val()=="he");

  })
</script>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
  <ul>
    <li data-he="123">1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <span>hello</span>
  <form action="">
    <input type="text" value="1">
    <input type="text" value="2">
    <input type="text" value="3">
    <input type="checkbox" value="checkbox">
    <select name="" id=""></select>
    <input type="text" value="he" style="display:none">
  </form>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。