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