JQuery基础知识点

一、attr和prop的区别

　　1、prop多用在标签的固有属性，布尔属性值。比如：a的标签href、class、selected、checked等。

　　2、attr多用在自定义属性上

　　3、JQuery中用attr获取布尔属性且布尔值属性在标签体内没有定义的时候会得到undefined。

二、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)
      })
  });

三、关于each

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

　　1、可以遍历数组，以index，item的形式。。

　　2、可以遍历对象，以key-value的形式

　　3、不可以遍历字符串

$(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);
      })
  })

 四、offset()

在JQuery中

　　1、获取匹配元素在当前视口的相对偏移

　　2、返回的对象包含两个整形属性：top 和left。此方法只对可见元素有效。

在Zepto()中

　　返回的对象包含两个整形属性：top 、left、width、height（获取到的width、height、都是包含padding和border的值）

五、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'));
  })

 六、隐藏元素

　　JQuery可以获取隐藏元素的额宽高

　　而Zepto无法获取隐藏元素的宽高

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