1.순회(탐색) 메소드
filtering 메소드
-선택자로 지정한 객체를 기준으로 객체 그룹에서 위치를 기준을 객체 선택하는 메소드
메소드 |
내용 |
$('s').first() |
선택된 요소 중 제일 처음 있는 요소 리턴 |
$('s').last() |
선택된 요소 중 제일 마지막에 있는 요소 리턴 |
$('s').eq(숫자) |
인덱스번호와 일치하는 요소 리턴(0부터 시작함) |
$('s').filter("검색식 | 선택자") |
인자값과 일치하는 요소만 리턴 |
$('s').not() |
인자값과 일치하지 않는 요소만 리턴 |
<body>
<h1>filtering 매소드</h1>
<p>$().first();
$().last();
$().eq();
$().filter();
$().not();
</p>
<h4 class="test">test1</h4>
<h4 class="test">test2</h4>
<h4 class="test3">test3</h4>
<h4>test4</h4>
<h4 class="test">test5</h4>
<div>
<p>나는 p야</p>
<h1>나는 h1</h1>
<h1>나는 h1두번째</h1>
<h1>나는 세번째h1</h1>
</div>
<h1>나는 외부 h1</h1>
<h1>나는 외부 h1 1</h1>
<h1>나는 외부 h1 2</h1>
<script>
$(function () {
console.log($('h4')); //== document.querySelectorAll('h4');
console.log($('h4').first());
//선택자로 선택된 객체들 중에 첫번째 객체
//h4 중에서 제일 처음 생성된 객체
$('h4').first().css('color', 'orange');
//선택자로 선택된 객체들 중에 마지막 객체
//h4 중에서 제일 마지막으로 생성된 객체
$('h4').last().css('color', 'blue');
//h4에서 class가 test3 중에 제일 처음인 객체
$('h4.test3').first().css('color', 'red');
//h4들 중에서 생성된 인덱스 번호가 3인 객체(0부터 시작)
//가장 쉬운 선택자
$('h4').eq(3).css('color', 'aqua');
$('h1').eq(2).css('color', 'blue');
$('h1').eq(3).css('background-color', 'green');
$('h1').eq(5).css('font-size', '1.5em');
console.log($('h1').length);
//jquery문은 선택자를 $() 이렇게 사용하면 그룹이 선택이 되고 .메소드를 사용하게 되면
//그룹에 있는 모든 엘리먼트에 접근하여 처리하게 됩니다.(자동 반복문 느낌)
//배열안에 값은 index번호, value라는 값이 존재
//function을 통해 거르는 방식
//문서상에 존재하는 h1을 배열로 다 받아온 뒤에 function에 넣고
//반복문 돌린다. 인덱스번호가 짝수인 경우를 리턴하고 css의 값을 바꾼다.
$('h1').filter(function (index) {
return index % 2 == 0; //리턴값이 true객체만 다시 필터링함
}).css("background-color", 'aqua');
//h4인 객체를 받아온 다음에 id가 test가 아닌 객체를 찾는것.
$('h4').not('.test').css('font-size', '3em');
});
</script>
2. Ancestors 메소드
-선택된 요소의 상위 요소들을 선택할 수 있는 메소드
메소드 |
내용 |
$('s').parent() |
선택된 요소의 바로 위 상위요소만 리턴 |
$('s').parents([인자]) |
선택된 요소의 모든 상위 요소 리턴, 매개변수가 있으면 매개변수와 일치하는 부모만 리턴 |
$('s').parentsUntil([인자]) |
선택된 요소부터 인자요소전까지 범위의 요소 리턴 |
<style>
div {
width: 300px;
height: 300px;
border: 1px solid rebeccapurple;
}
ul,
li,
span {
border: 1px solid aqua;
}
</style>
<div class="wrap">
div<div class="type">span 증조하부지
<ul>span 하부지
<li>li span 부모<br>
<span>span</span>
</li>
</ul>
</div>
</div>
<script>
$(function () {
//span의 부모가 무엇인지 console로 확인
console.log($('span').parent());
//span의 바로 위 부모의 요소만 바꾼다. 객체 형식으로 여러가지를 동시에
$('span').parent().css({'color':'violet','border':"1px solid blue"});
//본인포함 parents의 조건 요소까지 옵션 변경
$('span').parents('li').css({"color":"green","border":"1px solid blue"});
//위와 같은 맥락으로 확인하는 작업
console.log($('span').parents('li'));
console.log($('span').parentsUntil("div"));
//span부터 제일 가까운 div전까지 옵션변경
$('span').parentsUntil("div").css('color','red');
});
</script>
3. Descendants 메소드
-선택된 요소의 하위 요소들을 선택할 수 있는 메소드
메소드 |
내용 |
$('s').children([인자]) |
선택된 요소의 모든 자손(다음레벨)객체를 리턴, 선택된 요소의 인자와 일치하는 자손(다음레벨)객체 리턴 |
$('s').find(인자) |
선택된 요소의 인자와 일치하는 모든 후손(모든레벨) 객체 리턴 |
children - 자손 요소(직계 자손만!)
find - 후손 요소 (내 밑으로 전부 다~)
<script src="jquery-3.3.1.js"></script>
<style>
.wrap *{
border:1px solid lightblue;
display: block;
padding : 5px;
margin : 15px;
color:lightslategray;
}
.type{
width:500px;
}
</style>
</head>
<body>
<h1>자손탐색(children, find)</h1>
<div class='wrap'>
<div class='type'>div 증조할아버지
<ul>ul 할아버지
<li>li 부모
<span>span</span>
</li>
<li>li 부모
<span>span</span>
</li>
<p>p야</p>
<h1>h1</h1>
</ul>
</div>
<div class='type'>div span2할아버지
<p>p span2부모
<span>span2</span>
</p>
</div>
</div>
<script>
$(function(){
var style = {"color":"red","border":"2px solid red"};
//id값 type을 찾아 직계 자손만 바꿔준다.
$('.type').children().css('border','3px dotted skyblue');
//ul의 직계들 중에 li가 첫 번째인 객체 옵션 변경
$('ul').children('li:first-child').css('border','3px solid red');
//ul의 직계들 중에 p태그를 찾아 옵션 변경
$('ul').children('p').css('border',"3px solid tomato");
//find는 인자값이 필요하다. 그냥은 실행 안돼!
console.log($('.wrap').find('*'));
console.log($('.wrap').find('*').eq(3));
//id값 wrap의 후손들(전체)중에 인덱스번호가 3번째만 옵션 변경
$('.wrap').find('*').eq(3).css('background-color','black');
});
</script>
</body>
</html>
4. Sideways 메소드
-같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드
메소드 |
내용 |
$('s').siblings([인자]) |
선택된 요소와 같은 레벨(형제)에 있는 요소 리턴, 선택된 요소의 같은 레벨(형제)중 인자와 일치하는 요소 리턴 |
$('s').next() |
선택된 요소의 같은 레벨(형제)들 중 선택된 요소 다음의 한개 요소 리턴 |
$('s').nextAll() |
선택된 요소의 같은 레벨(형제)들 중 선택된 요소 다음의 모든 요소를 리턴 |
$('s').nextUntil(인자) |
선택된 요소부터 같은 레벨(형제)들 중 인자까지 범위의 모든 요소를 리턴 *선택된 요소, 인자요소 둘 다 포함하지 않음 |
메소드 |
내용 |
$('s').prev() |
선택된 요소의 같은 레벨(형제)들 중 선택된 요소 이전의 한개 요소를 리턴 |
$('s').prevAll() |
선택된 요소의 같은 레벨(형제)들 중 선택된 요소 이전의 모든 요소를 리턴 |
$('s').prevUntil(인자) |
선택된 요소의 같은 레벨(형제)들 중 선택된 요소 이전의 요소를 리턴 *선택된 요소, 인자요소 둘 다 포함하지 않음 |
$('s').is(인자) | 선택된 요소의 범위내에 인자와 동일한 요소가 있는지 찾아서 있으면 true, 없으면 false 리턴 |
<script src="jquery-3.3.1.js"></script>
<style>
.wrap, .wrap *{
display: block;
border:1px solid lightblue;
color: lightcoral;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div class="wrap">
<p>p</p>
<span>span</span>
<h1>h1</h1>
<h2>h2</h2>
<h4>h4</h4>
<p>p2</p>
</div>
<p>div bro
<span>s2</span>
</p>
<h1>div bro</h1>
<table border="1">
<tr>
<th>여기!</th>
</tr>
</table>
<script>
$(function(){
//span 다음의 한개의 요소의 글자를 바꿈
$('span').next().html('내가 바꿨지');
//나빼고 내 형제들 모두 다(위아래 포함) 옵션 변경
$('h2').siblings().css('background','yellow');
//h2와 같은 형제중에 h4의 글자를 바꾸기
$('h2').siblings('h4').html("총명씨가 골랐어!!");
//변수에 담아서 사용도 가능!
var el = $('h2').siblings('h4');
el.css('border','5px dotted tomato');
//span의 부모로 거슬러 올라간 뒤에 그 이후의 요소들중 table안에 th를 찾아 변경
//위와 같이 복잡하게 찾아야 하는 이유 : 트리 구조이기 때문!
$('span').parent().nextAll('table').find('th').css('background-color','green');
//span의 같은 형제중 이전 요소가 p태그를 찾아서 이벤트를 걸어줌
if($('span').prevAll().is('p')){
$('span').prevAll('p').on('mouseover',function(){
alert('마우스올라갔네.');
});
}
})
</script>
</body>
</html>
