JQuery基礎知識點

1、attr和prop的區別

　　一、prop多用在標籤的固有屬性，布爾屬性值。好比：a的標籤href、class、selected、checked等。

　　二、attr多用在自定義屬性上

　　三、JQuery中用attr獲取布爾屬性且布爾值屬性在標籤體內沒有定義的時候會獲得undefined。

2、JQuery中插入DOM元素的時候、添加配置對象（如：id 、class等）的時候，不起做用，這是調用Zepto.js能夠實現，而且會直接顯示在標籤內，能夠操做，做用域DOM元素。

$(function () {
      $('option').each(function (index, item) {
          //console.log($(this).attr('selected'));
          console.log($(this).prop('selected'))
      });

      $('#btn').on('touchstart', function () {
          console.log(111);
          $(this).prop('disabled', true);
          setTimeout(function () {
              $('#btn').removeAttr('disabled');
          }, 1000)
      })
  });

 

3、關於each

　　在JQuery裏面，$each(collection, function(index, item) { ..... })

　　一、能夠遍歷數組，以index，item的形式。。

　　二、能夠遍歷對象，以key-value的形式

　　三、不能夠遍歷字符串

$(function () {
      var arr = [12, 3, 4, 5];
      $.each(arr, function (index, item) {
          console.log(index, item);
      });
      var obj = {username: 'kobe', age: 39};
      $.each(obj, function (key, value) {
          console.log(key, value);
      });
     /* var str = 'damu';
      $.each(str, function (a, b) {
          console.log(a, b);
      });//這個不可用，會報錯
      */
  });

 而在Zepto.js中

$.each(collection, function(index, item){ ....})

能夠遍歷數組，以index，item的形式

能夠遍歷對象，以key-value的形式

能夠遍歷字符串

遍歷json對象以字符串的形式遍歷

  $(function () {
      var str = 'abed';
      $.each(str, function (a, b) {
          console.log(a, b);
      });
      var objJson = JSON.stringify({username: 'kobe'});
      $.each(objJson, function (a, b) {
          console.log(a, b);
      })
  })

 4、offset()

在JQuery中

　　一、獲取匹配元素在當前視口的相對偏移

　　二、返回的對象包含兩個整形屬性：top 和left。此方法只對可見元素有效。

在Zepto()中

　　返回的對象包含兩個整形屬性：top 、left、width、height（獲取到的width、height、都是包含padding和border的值）

5、width 和 height

在JQuery中

　　width(),height() ---conent 內容區的寬高，沒有單位px

　　.css('width')   ---能夠獲取content內容區的寬高、padding、boder的值，有單位px

　　innerHeight(),innerWidth()  ---outerHeight(),outerWidth()來獲取

  $(function () {
      var $box = $('#box');
      //內容區，不包含單位
      console.log($box.width());
      console.log($box.height());

      //.css()  內容區，有單位
      console.log($box.css('width'));
      console.log($box.css('height'));

      // innerHeight(), innerWidth()  ---outerHeight(), outerWidth()
      console.log($box.innerHeight());   //包含了補白（paading）
      console.log($box.outerHeight());   //補白+邊框
  })

 而在Zepto.js中

　　Zepto中的width(),height()是根據盒模型來取值的，包含補白和border的的值，且不帶單位

zepto中沒有innerHeight(),innerWidth()---outerHeight(),outerWidth()

.css獲取的width，height是內容區的寬高，包含單位。

經過.css()獲取padding，border的值

  $(function () {
      var $box = $('#box');
      console.log($box.width());
      console.log($box.height());

      console.log($box.css('padding'));
      console.log($box.css('width'));
      console.log($box.css('height'));
  })

 6、隱藏元素

　　JQuery能夠獲取隱藏元素的額寬高

　　而Zepto沒法獲取隱藏元素的寬高

    $(function () {
        console.log($('#box').width());
        console.log($('#box').height());   //結果是0
    });