04jQuery篩選jquery對象02
阿新 • • 發佈：2018-03-06
charset lang htm tor 篩選 html all mts callback 
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 idView Code="info">jQueryjQueryjQueryjQueryjQueryjQueryjQuery</p> <ur> <li class="item-1">item1</li> <li class="item-2">item2</li> <li class="item-3">item3</li> <liclass="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>View Code
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>View Code
04jQuery篩選jquery對象02