JS -- jQuery常用方法

• 获取DOM元素

  let $box = $('box')
  $box.children('a')  //获取对应的子元素
  $box.find('a')    //获取对应的后代元素(所有后代)
  $('a').filter('active')   //同级筛选
  $box.prev()
  $box.prev('p')
  $box.prevAll()
  $box.next()
  $box.nextAll('link')
  $box.siblings() //获取所有的兄弟
  $box.index()   //获取索引
  $box.parent()  //获取父元素
  $box.parents()  //获取所有祖先元素
  
  :eq(n)
  :gt(n)
  :lt(n)
  

• DOM增删改

  let str = '<div>xxxxx</div>'
  $('body').append(str)
  $('body').html(str)
  $('body').text()
  $A.insertBefore($B)  //把$A放到$B的前面（注意点: $A, $B都页面中已经存在的元素，对于新增加的元素，把新增加的字符串用$()包起来，相当于创建了一个元素）
  $A.insertAfter($B)   //把$A放到$B的后面
  $A.appendTo($B)  // $B.append($A)
  $A.prependTo($B)  //$B.prepend($B)
  $A.clone()
  $A.remove()
  //操作表单元素
  $input.val()
  $input.val('aa')
  

• 操作自定义属性

  $box.attr('data-index')
  $box.attr('data-index', xxx)
  $box.attr({'type': 1, 'name': 'xxx'}) //批量设置
  $box.removeAttr('data-type')
  //表单元素操作内置或自定义属性一般用prop和removeProp
  $radio.prop('checked')
  $radio.prop('checked', true)
  $radio.removeProp('checked')
  

• 操作css样式（盒子模型属性）

  $box.css('width', 200) //用对象就是批量设置，写的值不加单位
  $box.css('width')  //原理是gertComputedStyle
  $box.addClass('active')
  $box.removeClass('active')
  $box.hasClass('active')
  $box.toggleClass('active')
  $box.offset() //当前元素距离body的左偏移和上偏移
  $box.position() /当前元素距离父参照物的左偏移和上偏移
  $box.width()
  $box.height()
  $box.innerWidth/innerHeight/outerWidth/outerHeight()
  // clientWidth/Height(带边框)   offsetWidth/Height(不带边框)
  //$(document).scrollTop([val])
  //$(document).scrollLeft([val])
  

• 常用工具方法

  $.each([数组、类数组、对象], function(index, item){
  })
  $.toArray()  //转为数组
  $.merge()  //数组合并
  $.makeArray()  //把类数组转为数增速 String.prototype.slice.call()
  $.uniqueSort()   //去重加排序
  $.type() //检测数据类型
  

• 其他方法

  //事件绑定
  $box.on('click', function(){})
  $box.off('click', function(){})
  $box.bind()
  $box.unbind()
  $box.delegate()
  $box.click()
  
  //动画处理
  //.animate([目标样式], [总时间], [运动方式], [运动完做的事情])
  //.stop
  //.finish
  $box.animate({
      top: 100,
      left: 200
  }, 1000, 'linear', function(){})
  
  //ajax请求处理
  $.ajax({
      url: '',
      method: 'GET',
      async: false,
      dataType: 'json',
      success: res => {}
  })
  

把js代码放在body的DOM结构后，可以直接写代码，但是把js代码放在body前或head中，此时DOM结构还没有加载完，有些方法会报错，可以做如下的处理（所以一般把js放在body最后面。如果不需要获取页面中的元素，那么js代码放在哪里都可以）

$(function(){}) //等页面中所有的DOM结构加载完成才会执行这个方法，等同于$(document).ready(function(){})
window.onload = funciton(){}  //等页面中所有的资源（DOM结构、内容、其他富媒体资源等）都加载完成才会执行函数