21.01.07

1. DOM

- <li>는 <b>의 부모이고 <b>는 <li>의 자식이다
- <div>는 <b>의 조상(ansestor)이다
- <li>간에는 형제(siblings)관계 이다.

1. 부모관계를 이용한 Select 방식

<script>
    console.log($('span').parent()) //지정한 요소의 바로 위 부모를 찾는다.
    //$('span').parent().css({'border':'2px solid red'})
    console.log($('span').parents())//지정한 요소의 위부터 html까지 부모를 찾는다
    //지정한 요소의 바로위 부모부터 선택한 부모요소 제외하고 가져온다
    console.log($('span').parentsUntil('.ancestors'))
    $('span').parentsUntil('.ancestors').css({'border':'2px solid red'})
</script>

- $(태그이름).parent(); : 지정한요소의 바로 위의 부모요소 선택 ( 많이 쓰임 )
- $(태그이름).parents(); : 지정한 요소의 상위요소들을 모두 선택(html까지)
- $(태그이름).parentsUntil('부모요소선택'); : 지정한 요소의 바로 위 부모부터 선택한 부모요소의 전 부모까지 가져온다.

2. 자손관계를 이용한 Select 방식

<script>
   $('.ancestors').children().css({'border-color' :'red'}) //바로밑에 자식
   $('.ancestors').find('span').css({'border-color':'red','color' :'skyblue'},)
</script>

- $('선택요소').childred(); : 선택한 요소의 바로 아래의 요소를 선택(많이 쓰임)
- $('선택요소').find('선택요소의 아무자식') : 선택한 요소의 하위 요소들 중에서 검색해서 찾는다.(많이쓰임)

3. 형제관계를 이용한 Select 방식

<script>
    $('h3').siblings().css({'border-color' : 'red'})
    $('h3').next().css({'border-color' : 'red'})
    $('h3').prev().css({'border-color' : 'red'})
    $('h3').nextAll().css({'border-color' : 'red'})
    $('h3').prevAll().css({'border-color' : 'red'})
    $('h3').nextUntil('p').css({'border-color' : 'red'})
    $('h3').prevUntil('p').css({'border-color' : 'red'})
</script>

- $('선택요소').siblings(); : 자신 빼고 선택한 요소의 모든 형제를 선택
- $('선택요소').next(); : 선택한요소의 한칸 아래의 형제 요소 선택
- $('선택요소').prev(); : 선택한요소의 한칸 위의 형제 요소 선택
- $('선택요소').nextAll(); : 선택한 요소의 아래의 형제 요소 모두 선택
- $('선택요소').prevAll(); : 선택한 요소의 위의 형제 요소 모두 선택
- $('선택요소').nextUntil('형제요소');: 선택한 요소와 요소 사이(아래)
- $('선택요소').prevUntil('형제요소');: 선택한 요소와 요소 사이(위)

4 . Filtering 이용한 Select 방식

<script>
    //배열 arr = [1,2,3,4,5];
    //오브젝트 obj = {f:1,s:2,t:3};
    /*배열개념*/
    $("div p").first().css({'border': '1px solid red'}); //첫번째
    $("div p").last().css({'border': '1px solid red'}); //마지막
    $("div p").eq(2).css({'border': '1px solid red'}); //3번째
    /*필터개념*/
    $('div p').filter('.sel').css({'color':'blue','font-weight':'600'});
    $('div p').not('.sel').css({'color':'hotpink','font-weight':'600'});
</script>

- $('선택요소').first(); : 선택요소들 중에 첫번째 요소
- $('선택요소').last(); : 선택요소들 중에 마지막 요소
- $('선택요소').eq(a) : 선택요소들 중에 a번째 요소 (0번째부터 시작)
- $('선택요소').filter('선택요소2') : 선택요소들 중에서 선택요소2에 부합하는 요소를 가져옴
- $('선택요소').not('선택요소2'): 선택요소들 중에서 선택요소2에 부합하지 않는 요소를 가져옴

2. event

다양한 이벤트 참고 https://api.jquery.com/category/events/

$('#btn').on('click',function(){
	$('body').append('<button id="newbtn" onclick="clickEvt()">click</button>');
});
$('#evtDel').click(function(){
    $('#btn').off('click');
});

- 제이쿼리의 이벤트 등록 방법은 두가지가 있다
	1. $('선택요소').on('click',function); -> off로 삭제가능
	2. $('선택요소').click(function)
- $('선택요소').append('추가요소'): 선택요소에 요소 추가

/*id=newbtn은 클릭시 생기기 때문에 이 코드를 읽을때 없다고 판단하여 이벤트가 걸리지 않는다.*/
// $('#newbtn').click(function(){
//     alert('click!!');
// });

//새로 생긴 요소에 이벤트 거는 방법
//1.onclick활용
     function clickEvt(){
         alert('click!!!');
     }
//2.버튼 추가 후 바로 이벤트 걸어주는 방법
     $('#btn').on('click',function(){
         $('body').append('<button class="newbtn">click</button>');
         $('.newbtn').click(function(){
             alert('click');
         });
});

- 이벤트로 요소를 새로 만들었을 경우에 아래에 새로 만든 요소에 관한 이벤트를 원래대로 걸면 거릴지 않는다.
- 새로만든 요소는 어떤 동작시 생기기 때문에 이 코드를 읽을 때 없다고 판단하기 때문이다.
- 새로 생긴 요소에 이벤트 거는 방법은 두가지가 있다.
	1. 새로 만든 요소 안에 이벤트를 넣어주고 밖에서 함수처리(많이씀)
	2. 요소를 새로 만드는 함수 안에 바로 이벤트를 걸어주기

1. 이벤트 종류

$('p').on('click',function(){
	$(this).css({'color':'red'});
});
$('p').dblclick(function(){
	$(this).css('color','blue');
});
$('#mousezone').mouseenter(function(){
	$(this).css({'background-color':'red','color':'white'});
	$(this).html('마우스가 들어 왔어요!');
});
$('#mousezone').mouseleave(function(){
	$(this).css({'background-color':'blue','color':'white'});
    $(this).html('마우스가 나갔어요!');
}); 

- click : 클릭 했을 때
- dbclick : 더블 클릭 했을 때
- mouseenter : 마우스가 영역안으로 들어왔을 때
- mouseleave : 마우스가 영역밖으로 나갔을 때

$('#mousezone').on({
  mouseenter:function(){
	$(this).css({'background-color':'red','color':'white'});
    $(this).html('마우스가 들어 왔어요!');
  },
  mouseleave:function(){
    $(this).css({'background-color':'blue','color':'white'});
    $(this).html('마우스가 나갔어요!');
  },
  mousedown:function(){
    $(this).css({'background-color':'yellow','color':'black'});
    $(this).html('마우스누른상태!');
  },
  mouseup:function(){
    $(this).css({'background-color':'skyblue','color':'black'});
    $(this).html('마우스뗀 상태!');
  }
});

- 요소하나에 on으로 여러이벤트를 한번에 넣을 수 있다.(잘 안씀)
- mousedown : 마우스를 누른 상태
- mouseup : 마우스를 뗀 상태

$('mousezone').off();//모든 이벤트 삭제
$('mousezone').off('mouseup');//마우스업이벤트 삭제

- on으로 만든 이벤트는 off로 제거가능하다.

$('#overzone').hover(function(){
    $(this).css({'background-color':'red','color':'white'});
    $(this).html('마우스가 들어 왔어요!');
},function(){
    $(this).css({'background-color':'blue','color':'white'});
    $(this).html('마우스가 나갔어요!');
});

- hover : mouseenter + mouseleave
- function()을 두개 넣는데 첫번째가 mouseenter, 두번째가 mouselever이다.

$('input').focus(function(){
	$(this).css('background-color','pink')
});
$('input').blur(function(){
	$(this).css('background-color','white')
});

- focus() : 포커스가 들어왔을 때 (클릭)
- blur() : 포커스를 잃었을 때 (다른 곳을 클릭 했을 때) , 웹 접근성 상 사용금지

*퀴즈(내가 구매하고 싶은 아이템 클릭하면 숫자가 올라가게)

- 내가 구매하고 싶은 아이템 클릭하면 숫자가 올라감

$('div.item').click(function(){
	var cnt = $(this).find('.cnt').html();
   	cnt++;
    $(this).find('.cnt').html(cnt); 
});

- this의 활용 중요!