jQuery2

一、offsetParent() 定位父节点

$("button").click(function(){
  console.log($("#p").offsetParent());
})

二、parents、closest

//parents  找到元素嵌套的直接父级
//closest  找到元素本身以及嵌套的直接父级
console.log( $('p').parents('.box1') );
console.log( $('p').closest('p') );

三、before、after、append、prepend、replaceWith
before 在元素之前添加
after 在元素之后添加
append 在元素子节点后添加
prepend 在元素子节点前添加
replaceWith 把元素替换

var $boxSec =$(".box").eq(1);
var $newBox = $("<div />", {
  css:{
    width:"100px",
    height:"100px",
    backgroundColor:"pink"
  }
});

$boxSec.before($newBox);
$boxSec.after($newBox);
$boxSec.append($newBox);
$boxSec.prepend($newBox);
$boxSec.replaceWith($newBox);

四、html:添加内容

<p></p>
$("p").html(123);

五、remove、empty、removeClass、addClass
remove：消除本节点以及所有的子节点
empty：消除本节点的内容
removeClass/addClass：移除/添加类名

$(".wrap").remove()
$(".wrap").empty()
$("wrap").removeClass().addClass("newClass");

last().after() 最后的元素的后面
clone() 克隆
当clone的值为true则克隆事件
当clone的值为false则不克隆事件

console.log($(".wrap").clone());
$(".wrap2").last().after($(".wrap1").clone(true));

六、hover

$(".box").hover(function(){
  //移入事件
  $(this).css("background", "black");
}, function(){
  //移出事件
  $(this).css("background", "");
});

七、事件监听

//onclick
//onmouseenter/onmouseleave
//onload
$(".box").on("click", function(){
  console.log(123);
});
$(".box").click(function(){
  console.log(456);
})
//off解绑事件
$(".box").on("click", function(){
  console.log(123);
  $(this).off();
})