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>