简单分享一个jq知识点，值得收藏

has_filter_not

filter   过滤 对已经获取到的元素进行过滤
  not      filter反义词
  has    拥有 直接判断子节点是否拥有符合条件的元素
  eg:
    $("div").has(".box").css("background","blue");

prev_next_prevAll_nextAll

prev  查找当前节点兄弟节点中的上一个
  next  查找当前节点兄弟节点中的下一个
  prevAll  所有的上一个兄弟节点
  nextAll  所有的下一个兄弟节点
  eg:
    $("h3").prev().css("fontSize","50px");
    $("h3").nextAll().css("color","red");

find

 find 查找子节点
  eg:
    $("ul").find(".hello").css("background","red");

eq_index

eq(下标)   通过下标获取到指定的节点  
  index()    获取当前节点在兄弟节点中的下标
  eg:
    const index = $("h1").index();
    $("li").eq(3).css("background","red");

addClass_removeClass

 addClass      添加class类名
  removeClass   移除class类名
  eg:
    $("#div1").addClass("box3 box4");
    $("#div1").removeClass("box1 box3");

attr_prop

attr 设置属性/获取属性
  prop 操作布尔类型的属性
  eg:
    $("#div1").attr("class","world");
    $("#div1").prop("checked",true);

siblings

siblings() 兄弟节点
  eg:
    $(this).addClass("active").siblings().removeClass("active")

width

 width 宽度
  innerWidth 宽度 + padding
  outerWidth 宽度 + padding + border
  eg:
    $("#div1").width()
    $("#div1").innerWidth()

on_off

 on 给函数添加事件
  off 取消事件
  eg:
    $("#div1").on("click",function () {} 给一个事件添加一个函数
    $("#div1").on("click mouserover",function () {} 同时给多个事件添加函数
    $("#div1").off() 取消掉所有的事件
    $("#div1").off("click"); 取消单个事件类型
    $("#div1").off("click", show); 取消事件类型下的具体的函数
    $("#div1").on("click","li.aaa",function () {} 事件委托

before_after_append_prepend

 insertBefore()    before() 插入到前面
  insertAfter()    after() 插入到后面
  appendTo()      append() 插入到末尾
  prependTo()      prepend() 插入到首位
  remove() 移除
  eg:
    $("<span>111</span>").insertBefore("p") 在每个<p>元素前插入一个 <span> 元素
    $("p").before("<p>Hello world!</p>") 在每个 p 元素前插入内容

scrollTop

scrollTop 获取距离顶部高度
  eg:
    $(window).scrollTop()

offset_margin_position

 offset 直接获取当前元素距离最左/最上的距离 可以获取 可以设置
  margin 不计算在内
  position 当前元素距离第一个有定位父节点的距离 只读 margin计算在内
  eg:
    $("#div2").offset().left 获取
    $("#div2").offset({top: 100,left: 200}) 设置
    $("#div2").position() 获取

val_size_each

val()  获取/设置表单元素的值
  size()  获取元素的个数
  each()  遍历
  eg:
    $("input").val() / $("input").val("hello")
    $("input").size()
    $("input").each(function (index,item) {})

特效函数

hover(funOver,funOut) 鼠标移入移出
  共同点：都是去控制元素的显示隐藏
  不同点：
    hide()  show()修改display none/block
    slideDown() slideUp() 修改的高度
    fadeIn() fadeOut() 修改的透明度
  hide()  隐藏
    第一个参数：效果持续的毫秒数
    第二个参数：回调函数 效果结束之后的时候执行
  【注】左上角收起左上角展开
  show()  显示
  slideDown()
  slideUp()  卷闸效果（展开/收起）
  fadeIn()  淡入
  fadeOut()  淡出
  fadeTo(时间, 透明度, 回调函数)
  animate
    第一个参数：轨迹
    第二个参数：时间
    第三个参数：执行的效果
    第四个参数：回调函数
  eg:
    $("#div1").hover(function () {
      // 鼠标移入
      $(this).html("移入");
      $("#div2").hide(2000,function () {
        $("#div1").html("2消失了");
      });
      $("#div2").slideUp(2000,function () {
        console.log("收起");
      });
      $("#div2").fadeOut(2000);
      $("#div2").fadeTo(300, 0.1);
    }, function () {
      // 鼠标移出
      $(this).html("移出");
      $("#div2").show(2000);
      $("#div2").slideDown();
      $("#div2").fadeIn(2000);
      $("#div2").fadeTo(300, 1);
    })
    //动画实例
    $("#div1")
      .animate({left: 800},3000)
      .animate({top: 400})
      .animate({width: 800})
      .animate({height: 800})
      .animate({top: 100})
      .animate({left: 100})
      .animate({width: 100,height: 100})

remove_detach_empty

remove() 删除元素节点
【注】不会保留这个节点上的事件行为
detach() 删除元素节点
【注】会保留这个节点上的事件行为
empty() 清空子节点  eg:
$("ul").find(".hello").css("background","red");

$冲突

$.noConflict() 将$使用权释放出来
  eg:
    var Ning = $.noConflict();// 将$使用权释放出来
    Ning("#box").click(function () {
      console.log("123");
    })

切换

slideDown() slideUp() slideToggle() 展开 收起 切换
  fadeIn() fadeOut() fadeToggle() 淡入 淡出 切换
  show() hide() toggle() 显示 隐藏 切换
  $("div").toggleClass("active") 切换类