一、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');
});