节点操作this

4.1 this触发事件的对象

this在 JS 中表示触发事件的对象
在jquery 中有三个 是不需要加双引号的

$(this)
$(document)
$(window)
//点击某个P,让这个p改变背景色
$("p").click(function(){
  $(this).css("backgroundColor","red")
})

4.2 parent()父节点

parent(): 父节点 , 只会选中亲父亲不会选中爷爷或者曾爷爷

//点击那个p让它的父节点背景色改变
$("p").click(function(){
$(this).parent().css("backgroundColor","blue");
})

4.3 siblings()兄弟节点

siblings() : 兄弟节点

//siblings() : 兄弟节点
$("p").click(function(){
  $(this).siblings().css("backgroundColor","red");
})

4.4 children()儿子节点

children 儿子节点
//children 儿子节点
$("div").click(function(){
  $(this).children().css("backgroundColor","red");
})

4.5不常用的节点操作

next() : 选中下一个兄弟节点
nextAll() : 后面所有的兄弟节点
prev() : 选中上一个兄弟
prevAll() : 前面所有的兄弟
parents() : 祖先节点, 也可以传递参数指定
find() : 会选中所有后代节点 , 可以传递参数指定节点

//点击某个P,让这个p改变背景色
$("p").click(function(){
$(this).css("backgroundColor","red")
})
// //点击那个p让它的父节点背景色改变
$("p").click(function(){
$(this).parent().css("backgroundColor","blue");
})
//siblings() : 兄弟节点
$("p").click(function(){
$(this).siblings().css("backgroundColor","red");
})
//children 儿子节点
$("div").click(function(){
$(this).children().css("backgroundColor","red");
})
//next() : 选中下一个兄弟节点
$("p").click(function(){
$(this).nextAll().css("backgroundColor","red");
})
//nextAll() 后面所有的兄弟节点
$("p").click(function(){
$(this).nextAll().css("backgroundColor","red");
})
//前一个兄弟
$("p").click(function(){
$(this).prev().css("backgroundColor","red");
})
//前面所有的节点
$("p").click(function(){
$(this).prevAll().css("backgroundColor","red");
})
//所有的祖先节点
$("p").click(function(){
  $(this).parents().css("backgroundColor","red");
})
//find() : 会选中所有后代节点 , 可以传递参数指定节点
$("#body").click(function(){
  $(this).find("div").css("backgroundColor","red");
})

连续打点

//连续打点
$("p").click(function(){
  $(this).css("backgroundColor","red")
    .siblings().css("backgroundColor","green")
    .parent().css("backgroundColor","purple")
    .siblings().css("backgroundColor","yellow");
});

分条打点

//分条书写
$("p").click(function(){
  $(this).css("backgroundColor","red")
  $(this).siblings().css("backgroundColor","green")
  $(this).parent().css("backgroundColor","purple")
  $(this).parent().siblings().css("backgroundColor","yellow")
});