JQ节点关系 children()、find()、parent()/parents()、siblings()以及next()、prev()

一、children()

  1、描述：获取当前jq对象的子节点

  2、语法：jq对象.children()

  3、PS：

      ①当children（）不写参数的时候 获取的是所有的孩子

      ②当children（'孩子的选择器'） 获取的是指定的孩子

      ③children（） 只能选择 直接孩子 不能选择 孙子元素

   4、eg：

$('button:first').click(function () {
     //选择指定的孩子
     $('.box').children('.s1').css('background-color','red');
     //选择所有的孩子
     $('.box').children().css('background-color','red');
     })

 二、find()

   1、描述：获取指定的孩子

   2、语法：jq对象.find('孩子的选择器')

   3、PS：

      ①不能空参使用，不能获取所有的孩子

      ②只要是孩子元素，就能使用find（）

   4、eg：

 $('button:first').click(function () {
     console.log('666');
     $('.box').find('.s2').css('backgroundColor','red');
     });

三、parent()/parents()

   1、描述：查找当前jq对象的父节点/所有的父节点直到祖先节点

   2、语法：jq对象.parent()/parents()

   3、eg：

 $('button:first').click(function () {
     //$('.p0').parent().css('background-color','red');
     $('.p0').parents().css('background-color','red');
     });

四、siblings()

   1、描述：获取所有的兄弟节点

   2、语法：jq对象.siblings(选择器)

   3、PS：

        ①不写参数，获取的是所有的兄弟

        ②写参数，获取的是满足选择器要求的兄弟

   4、eg：

 $('button:first').click(function () {
       $('.p0').siblings('.p1').css('background-color', 'red');
 });

 $('p').click(function () {
       $(this).html('很开心').siblings().html('很开心').parent().siblings().children().html('不开心');
  });

五、next()

   1、描述：获取下一个兄弟节点

   2、语法：jq对象.next()

   3、eg：

  $('p').click(function () {
     $(this).next().css('background-color','red');
  })

六、nextAll()

  1、描述：获取后面所有的兄弟节点

   2、语法：jq对象.nextAll()

   3、eg：

 $('p').click(function () {
     $(this).nextAll().css('background-color', 'red');
 });

七、prev()

   1、描述：获取当前节点的前一个兄弟节点

   2、语法：jq对象.prev()

   3、eg：

$('p').click(function () {
     $(this).prev().css('background-color', 'red');
});

八、prevAll()

   1、描述：获取当前节点前面的所有兄弟节点

   2、语法：jq对象.prevAll()

   3、eg：

$('p').click(function () {
    $(this).prevAll().css('background-color', 'red');
});