day23
通过关系查找jQuery对象的方法
next([selector])向后取同辈元素
nextAll([selector])
nextUntil([selector])
prev([selector])向前取同辈元素
prevAll([selector])
prevUntil([selector])
siblings([selector])取同辈元素的所有集合（不包含本身）
筛选和遍历jQuery对象
添加元素
add(selector)
过滤元素
not(selector)
filter(selector)
也可以用函数
not(funtion(){})
filter(funtion(){})
has(selector)保留带有特定后代的元素
获取子集
slice(0start,end)
转换元素
map(callback)
map(function(index,domElents){return ?;})
遍历元素
each(iterator)
each(function(index,domElents){return ?;})
jQuery对象的其他操作
is(selector)
end()回到破坏性操作前（任何对jQuery对象进行改变的操作）
addBack([selector])
案例：
通过关系查找jQuery对象的方法.html：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title></head><body> ???<div id="box1"> ???????<div id="box2"> ???????????<div id="box3"> ???????????????<p id="info">jQueryjQueryjQueryjQueryjQueryjQueryjQuery</p> ???????????????<ur> ???????????????????<li class="item-1">item1</li> ???????????????????<li class="item-2">item2</li> ???????????????????<li class="item-3">item3</li> ???????????????????<li class="item-4">item4</li> ???????????????????<li class="item-5">item5</li> ???????????????????<li class="item-6">item6</li> ???????????????????<li class="item-7">item7</li> ???????????????????<li class="item-8">item8</li> ???????????????</ur> ???????????</div> ???????</div> ???</div> ???<script src="jquery-3.3.1.js"></script> ???<script> ???????$(function () { ???????????/*console.log($(‘#box3‘)); ???????????console.log($("#box2").children()); ???????????console.log($(‘#box2‘).contents()); ???????????console.log($(‘#box2‘).find(‘#box3‘)); ???????????console.log($(‘#box2‘).parent()); ???????????console.log($(‘#box2‘).parents()); ???????????console.log($(‘#box3‘).parentsUntil(‘#box1‘)); ???????????console.log($(‘#box3‘).closest(‘div‘));*/ ???????????????????????console.log($(‘.item-1‘).next(‘li‘)); ???????????console.log($(‘.item-1‘).nextAll()); ???????????console.log($(‘.item-1‘).nextUntil(‘.item-4‘)); ???????????console.log($(‘.item-4‘).prev(‘li‘)); ???????????console.log($(‘.item-4‘).prevAll()); ???????????console.log($(‘.item-4‘).prevUntil(‘.item-1‘)); ???????????console.log($(‘.item-4‘).siblings()); ???????}) ???</script></body></html>筛选和遍历jQuery对象.html：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title></head><body> ???<div id="box1"> ???????<div id="box2"> ???????????<div id="box3"> ???????????????<p id="info">jQueryjQueryjQueryjQueryjQueryjQueryjQuery</p> ???????????????<ur> ???????????????????<li class="item-1">item1</li> ???????????????????<li class="item-2">item2</li> ???????????????????<li class="item-3">item3</li> ???????????????????<li class="item-4">item4</li> ???????????????????<li class="item-5">item5</li> ???????????????????<li class="item-6">item6 ???????????????????????<ul>q</ul> ???????????????????</li> ???????????????????<li class="item-7">item7</li> ???????????????????<li class="item-8">item8</li> ???????????????</ur> ???????????</div> ???????</div> ???</div> ???<script src="jquery-3.3.1.js"></script> ???<script> ???????$(function () { ???????????//添加 ???????????console.log($(‘.item-1, .item-2‘)); ???????????console.log($(‘.item-1‘).add(‘.item-2‘)); ???????????//过滤 ???????????console.log($(‘li‘).not(‘.item-4‘)); ???????????console.log($(‘li‘).filter(‘.item-4‘)); ???????????console.log($(‘li‘).has(‘ul‘)); ???????????//获取子集 ???????????console.log($(‘li‘).slice(3,6));//index下标 ???????????//转换元素 ???????????console.log($(‘li‘).map(function (index,domElemts) { ???????????????this.title = this.innerText; ???????????})) ???????????//遍历元素 ???????????console.log($(‘div‘).each(function (index,domElemts) { ???????????????this.title = this.id; ???????????})) ???????}) ???</script></body></html>jQuery对象的其他操作.html：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title></head><body> ???<div id="box1"> ???????<div id="box2"> ???????????<div id="box3"> ???????????????<p id="info">jQueryjQueryjQueryjQueryjQueryjQueryjQuery</p> ???????????????<ur> ???????????????????<li class="item-1">item1</li> ???????????????????<li class="item-2">item2</li> ???????????????????<li class="item-3">item3</li> ???????????????????<li class="item-4">item4</li> ???????????????????<li class="item-5">item5</li> ???????????????????<li class="item-6">item6 ???????????????????????<ul>q</ul> ???????????????????</li> ???????????????????<li class="item-7">item7</li> ???????????????????<li class="item-8">item8</li> ???????????????</ur> ???????????</div> ???????</div> ???</div> ???<script src="jquery-3.3.1.js"></script> ???<script> ???????$(function () { ???????????????????????console.log($(‘#box3‘).children().is(‘p‘)); ???????????console.log($(‘#box3‘).find(‘.item-4‘).css(‘color‘,‘red‘) ???????????????.end().find(‘.item-5‘).css(‘color‘,‘red‘) ???????????????); ???????????console.log($(‘li‘).slice(1,3).next().css(‘color‘,‘orange‘).addBack().css(‘color‘,‘blue‘)); ???????}) ???</script></body></html>04jQuery筛选jquery对象02
原文地址：https://www.cnblogs.com/shink1117/p/8513737.html