JQuery （进阶）

jQuery循环

1 each ：没有返回值

• 语法1：$.each(循环对象，function(index,value){})

• 语法2：$(循环对象).each(function(index,value){})

• 循环数组

  //1.循环数组
  var arr = ["a","b","c"];
  $.each(arr,function(index,value){
      console.log(index +"--------------"+value);
  });

• 循环对象

  //2.循环对象
  var teacher = {
      "name":"梁进",
      "age":32,
      "height":175,
      "sex":"男",
      "skill":function(){
          console.log("教三阶段");
      }
  }
  $.each(teacher,function(key,value){
      console.log(key +"----------"+value);
  })

• 循环标签

  //3.循环标签
  var sum = 0;
  $("li").each(function(index,elem){
      console.log(elem);  //<li>9.9</li>
      console.log($(elem));
      sum += Number($(elem).text());
  });
  console.log(sum);

一般使用$().each() 这种语法

2 map：有返回值

• 语法1：$.map(循环对象，function(value,index){})

• 语法2：$(循环对象).map(function(index,value){})

  //$.map:循环有有返回值
  //语法1：$.map(循环对象，function(value,index){})
  //语法2：$(循环对象).map(function(index,value){})
  var arr = ["a","b","c"];
  $.map(arr,function(value,index){
      console.log(index);
  })

jQuery的BOM操作

1 原生js

• location.href :获取或设置当前窗口显示的url地址

• location.seach：快速获取url中搜索内容

• 三大系列

  • client：可视

    • 元素的可视宽高：标签.clientWidth/clientHeight content+padding

    • 屏幕的可视宽高：document.documentElement.clientWidth/clientHeight

  • offset：占位

    • 元素的占位宽高：标签.offsetWidth/offestHeight content+padding+border

    • 元素的位置：标签.offsetTop/offsetLeft 当前元素的顶部到定位父元素的距离，如果没有定位父元素到body的距离

  • scroll：滚动

    • 页面被卷去的高：document.documentElement.scrollTop || document.body.scrollTop

  • onload:页面加载，onresize：窗口大小发生变化 onscroll：滚动条滚动

2 jQuery

• 获取元素宽高

  • 内容宽高：$().width()/height()

  • 可视宽高：$().innerWidth()/innerHeight() content+padding

  • 占位宽高：$().outerWidth().outerHeight() content+padding