本文主要是介绍jq: dom的查询，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
父元素
parent(selecor) --> 直接父元素
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>dom的查询</title>
</head>
<body><div><ul><li>li1</li><li>li2</li><div><span>span1</span></div><li>li3</li><li>li4</li><li>li5</li><span>span2</span></ul></div><script src="http://code.jquery.com/jquery-3.4.1.js"></script><script>console.log( $('span').parent() )</script>
</body>
</html>
可以传css选择器指定:
console.log( $('span').parent('div') )
提醒: 在下面的元素中，我已经把ul中的子元素span去掉了。
parents(selecor) --> 祖先元素
console.log( $('span').parents() )
默认选择当前元素的所有祖先，传参css选择器可以指定。
closest(selecor|jQuery Object|element) -->最近的selector元素(必选)
选择当前元素的最近的指定父元素(可以越级)。
console.log( $('span').closest('div') )
offsetParent() --> 查找最近有定位的附近元素，无参数
console.log( $('span').offsetParent() )
子元素
children(selector) --> 找子元素(不包括后代)，可传参指定
console.log( $('ul').children() )
console.log( $('ul').children('.item') )
find() --> 找后代元素
console.log( $('ul').find('.span1') )
我们发现jq对象中还有一个prevObject属性，这是上一级(这里的上级是ul)的节点，由其我们可以在继续调用ul下的子元素
$('ul').find('li:eq(3)').css('color', 'red').prevObject.find('li:eq(2)').css('color', 'blue')
这个方法已经被封装在end()方法中，可以使用end()操作。
end() --> 回退功能
$('ul').find('li:eq(3)').css('color', 'red').end().find('li:eq(2)').css('color', 'blue').end().find('li:eq(1)').css('color', 'pink')
add() --> 同级添加到jq对象中的
可以传select选择器 element元素 jq对象 html
如果我们要写这样两行代码:
$('li:first').css('background', 'orange');
$('li:last').css('background', 'orange');
可以使用add()使用链式方式:
$('li:first').add('li:last').css('background', 'orange');
addBack() -> 在链式调用的时候返回加上前一个元素。
比如给第二个设置一个样式，第三四个设置一个样式，现在想把第二三四设置另一个样式。
$('li:eq(1)').css('background', 'orange').nextAll().css('background', 'pink').addBack().css('color', '#fff');
这篇关于jq: dom的查询的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
