DOM 내 부모 자식 관계
- 관계를 이용하여 원하는 요소를 가져옴(selector)
부모 관계를 이용한 Select
- $(selector).parent( ); : 선택한 요소의 바로 위의 요소를 선택(한개만)
- $(selector).parents(selector); : 선택한 요소의 상위 요소들중 selector에 해당하는 요소들을 모두 선택
- $(selector).parentsUntil(selector); : 선택한 요소와 지정한 요소 사이의 부모를 모두 선택
<body>
<div class="ancestors">
<div>DIV(greate-grandparent)
<ul>ul(grandparent)
<li>li(parent)
<span>span</span>
</li>
</ul>
</div>
<div>DIV(grand-parent)
<p>p(parent)
<span>span</span>
</p>
</div>
</div>
</body>
<script>
console.log($('span').parent());
//$('span').parent().css({'border':'2px solid blue'});
console.log($('span').parents());
//$('span').parents().css({'border' : '2px solid blue'});
//parentsUntil은 선택요소와 부모 선택요소는 제외
console.log($('span').parentsUntil('.ancestors'));
$('span').parentsUntil('.ancestors').css({'border':'2px solid blue'});
</script>
- $(selector).closest(selector); : 선택한 요소로부터 부모 요소들 중 가장 먼저 발견한(가장 가까운) 요소를 반환
<body>
<div class="ancestors">
<div>
<ul>
<li>
<span id="item">SPAN</span>
</li>
</ul>
</div>
</div>
</body>
<script>
//parents : 특정 부모값들을 올라가면서 찾는다.(전부다)
console.log($('#item').parents('div'));
//closest : 특정 부모값 중 가장 먼저 검색되는 요소를 찾는다.(1개만)
console.log($('#item').closest('div'));
</script>
자손 관계를 이용한 Select
- $(selector).children( ); : 선택한 요소의 바로 아래의 요소를 선택(자식은 많을 수 있어 child가 아닌 children임)
- $(selector).find(selector); : 선택한 요소의 하위 요소들 중에서 selector에 해당하는 요소들 선택 (*많이 사용*)
<body>
<div class="ancestors">
<div>DIV(greate-grandparent)
<ul>ul(grandparent)
<li>li(parent)
<span>span</span>
</li>
</ul>
</div>
<div>DIV(grand-parent)
<p>p(parent)
<span>span</span>
</p>
</div>
</div>
</body>
<script>
//children() : 바로 한칸 아래 자식들
var elem = $('.ancestors').children();
console.log(elem);
//find() : 자식요소 중 특정한 내용을 찾아줌
elem = $('.ancestors').find('span');
console.log(elem);
</script>
형제 관계를 이용한 Select
- (selector).siblings( ); : 선택한 요소의 동일선상 요소들을 모두 선택
- $(selector).next( ); : 선택한 요소의 다음 요소를 선택*
- $(selector).nextAll(selector); : 선택한 요소의 다음 요소들 중 selector에 해당하는 요소들 선택
- $(selector).nextUntil(selector); : 선택의 요소와 지정한 요소 사이 요소들을 선택
- $(selector).prev( ); : 선택한 요소의 이전 요소를 선택*
- $(selector).prevAll(selector); : 선택한 요소의 이전 요소들 중 selector에 해당하는 요소들 선택
- $(selector).prevUntil (selector); : 선택한 요소와 지정한 요소 사이 요소들을 선택
<body>
<div class="siblings">
<p>ELEMENT 1</p>
<span>ELEMENT 2</span>
<span>ELEMENT 3</span>
<span>ELEMENT 4</span>
<h3>ELEMENT 5</h3>
<h4>ELEMENT 6</h4>
<h5>ELEMENT 7</h5>
<h6>ELEMENT 8</h6>
<p>ELEMENT 9</p>
</div>
</body>
<script>
//나를 제외한 동일선상 형제 요소들 선택
//siblings()에 두번째 셀렉터를 지정하면 동일선상 중 선택요소를 찾아냄(parents와 같음)
//$('h3').siblings().css({'border-color':'red'});
//next() : 선택요소의 바로 다음(한 칸 아래)
//$('h3').next().css({'border-color':'red'});
//prev() : 선택요소의 바로 이전(한 칸 위)
//$('h3').prev().css({'border-color':'red'});
//nextAll : 선택한 다음요소 모두
//$('h3').nextAll('h6').css({'border-color':'red'});
//prevAll : 선택한 이전요소 모두
//$('h3').prevAll('span').css({'border-color':'red'});
//nextUntil
$('h3').nextUntil('p').css({'border-color':'red'});
//prevUntil
$('h3').prevUntil('p').css({'border-color':'red'});
</script>
Filtering을 이용한 Select
- $(selector).first( ); : 선택한 요소들 중 첫 번째 요소 선택
- $(selector).last( ); : 선택한 요소들 중 마지막 요소 선택
- $(selector).eq( num ); : 선택한 요소들 중 n번째(배열개념) 요소 선택
- $(selector).filter(selector); : 선택한 요소들 중 지정한 요소 선택
- $(selector).not(selector); : 선택한 요소들 중 지정한 요소만 빼고 선택
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<style>
</style>
</head>
<body>
<div style="border:ipx solid black">
<p>첫번째 요소</p>
<p class="sel">두번째 요소</p>
<p>세번째 요소</p>
<p class="sel">네번째 요소</p>
</div>
<div style="border:ipx solid black">
<p>다섯번째 요소</p>
<p class="sel">여섯번째 요소</p>
<p>일곱번째 요소</p>
<p class="sel">여덟번째 요소</p>
</div>
</body>
<script>
//div 자식 p 요소만 가져오기
//var elem = $('div').find('p');
var elem = $('div p');
console.log(elem);
//배열 개념
//첫번째 인덱스 가져오기
elem = $('div p').first();
console.log(elem);
//마지막 인덱스 가져오기
elem = $('div p').last();
console.log(elem);
//n번째 인덱스 요소 가져오기
elem = $('div p').eq(3);
//elem = $('div p')[3];
console.log(elem);
//필터 개념(두번째 셀렉터로 걸러냄)
elem = $('p').filter('.sel'); //p.sel
console.log(elem);
//not() : filter에 걸리지 않는 조건을 가져옴
elem = $('p').not('.sel'); //p.sel
console.log(elem);
</script>
Event 등록
<body>
<button id="btn">버튼생성</button>
<button id="evtDel">이벤트 삭제</button>
</body>
<script>
//$(selector).on('이벤트',실행함수);
$('#btn').on('click',function(){
$('body').append('<button onclick="clickEvt()">click</button>');
$('body').append('<button class="newBtn2">click2</button>');
});
//$(selector).이벤트(실행함수);
$('#evtDel').click(function(){
//$(selector).off('이벤트');
$('#btn').off('click');
});
/*.newBtn2에 클릭 이벤트 걸기
//존재하지 않는 상태의 요소에 이벤트를 걸 수 없다.
$('.newBtn2').click(function(){
alert('click');
});
*/
//나중에 생기는 요소에 이번트 걸기 1
function clickEvt(){ //onclick="" : 강력한 방법
alert('click!!');
}
//나중에 생기는 요소에 이번트 걸기 2
$(document).on('click','.newBtn2',function(){
alert('click');
})
</script>
<body>
<div id="ex1">
ID : <input type="text" name="userId"/>
<br/>
PW : <input type="password" name="userPw"/>
<button>로그인</button>
<p>
<br/>
<span></span>
</p>
</div>
</body>
<script>
$('input').on({
focus:function(evt){
//console.log('focus');
$(evt.target).css({'background-color':'pink'}); //.target==this
},
blur:function(){
//console.log('blur');
$(this).css({'background-color':'white'});
}
});
$('#ex1').hover(function(){ //다른 요소에도 적용되지 않도록 id와 find로 지정
//console.log('login');
$(this).find('span').text('로그인해주세요');
},function(){
console.log('blur');
$(this).find('span').text('');
});
</script>
Attribute(member) 가져오기
- J-Query에서도 JS와 같이 속성을 다룰 수 있음
<body>
<input type="text" value="some text"/>
<p>문자가 쓰여진 <b>강조된</b> 영역</p>
<fieldset>
<legend>숫자 입력</legend>
RANGE (0~100) :
<input id="point" type="range" min="0" max="100" value="30" step="1"/>
당신이 선택한 값 : <span id="msg">30</span>
</fieldset>
<fieldset>
<legend>라디오 버튼</legend>
<input type="radio" name="front" value="HTML"/>HTML<br/>
<input type="radio" name="front" value="CSS"/>CSS<br/>
<input type="radio" name="front" value="JS"/>JS<br/>
<input type="radio" name="front" value="JQUERY"/>J-QUERY<br/>
<span id="selected">선택값 없음</span>
</fieldset>
</body>
<script>
//value 가져오기
var val = $('input').val();
console.log(val);
//attribute 가져오기
var attr = $('input').attr('type');
console.log(attr);
//innerHTML or innerTEXT 가져오기
var html = $('p').html();
var txt = $('p').text();
console.log(html);
console.log(txt);
/*
//1.원하는 요소 가져오기
console.log($('#point'));
//2.이벤트 걸기
$('#point').on('mouseup',function(){
//console.log('up');
//3.가져올 속성
console.log($(this).val());
//결과값을 어떻게 할 것인지(요소 -> 속성)
$('#msg').text(val);
});
*/
//range가 움직일 때 값을 보여주기
//2.어떤 이벤트를 거는가?
$('#point').on('mousedown',function(){ //눌러진 상태에서...
//마우스가 움직일때
$(this).on('mousemove',function(){
//3.어떤 속성을 건드리는가?
var val = $(this).val();
//4.결과값을 어떻게 할 것인가?(요소 -> 속성)
$('#msg').text(val);
});
});
$('#point').on('mouseup',function(){
$(this).off('mousemove');
});
//1.원하는 요소 가져오기
//console.log($('input[type="radio"]'));
console.log($(':radio'));
var $radio = $(':radio');
//2.이벤트 걸기
//제이쿼리 객체는 변수에 넣을 수 있다.
//다만 제이쿼리 객체가 들었다는 표시로 변수 앞에 $를 추가해준다(약속)
$radio.click(function(){
//3.가져올 대상 지정, 원하는 속성 다루기
var val = $(this).val();
//4.표현할 위치 지정(요소 -> 속성)
$('#selected').text(val);
});
</script>
