자바스크립트 8일차 - jquery css와 클릭이벤트

저번시간에 이어 jquery에서 css와 이벤트들을 한번 넣어보도록 하겠습니다. 

<div class='ex1'>

<p>1. 선택자 </p>

<p>2. 선택자 </p>

<p class="th">3. 선택자 </p>

</div>

 

마찬가지로 div class를 준비해줍니다.

 

그리고 나서 어제 배운 선택자를 응용해봅니다. 

 

<script>

const ex1 = $('.ex1 p')

이렇게 하면 ex1 에는 p태그들이 선택되었습니다. 

원래 바닐라 스크립트 였다면 아래와 같이 썼었겠죠

ex1.style = "boarder:1px solid #f00"

하지만 jquery와 바닐라 자바스크립트는 혼용되서 쓸 수 없습니다. 

따라서 jquery로 선택된 태그들에는 jquery에 맞는 문법을 사용해야합니다. 

아래와 같이 써주면 됩니다. 

ex1.css({

'border':'1px solid red',

'color': 'blue',

})

css()안에 변경할 대상과 변경 값을 넣으면 되는데요/

괄호 안에 중괄호를 써주면 여러개를 한번에 작성해 줄 수 있습니다.
json형태와 비슷하죠? 

json형태도 { 'key': 'value' } 형태로 쓰이잖아요 

마찬가지에요 

 

만약에 나는 이 p태그들에 클릭이벤트를 넣고 싶다 라고 하면 어떻게 해야될까요?

지난시간에 jquery는 method를 계속 추가하면 된다고 했었죠? 그걸 응용해보겠습니다. 

ex1.css({

'border':'1px solid red',

'color': 'blue',

}).click(function(){console.log(100)})

아까 쓴 코드에 뒷부분에 .click()이벤트를 넣었습니다. 

이렇게 되면 클릭 할 시 console.log(100)이 실행되겠죠?

 

만약 이렇게 쓰면 어떻게 될까요?

ex1.css({

'border':'1px solid red',

'color': 'blue',

})

.eq(1)

.click(function(){console.log(100)})

네, 바로 두번째 p태그만 클릭할 시 이벤트가 발생하게 됩니다. 이처럼 여러개의 메소드를 사용할 수도 있습니다. 

 

다음 예제로 넘어가보겠습니다. 

이번에는 클릭했을때 boarder의 색깔이 변하도록 코딩해보겠습니다. 

 

나머지는 냅두고 script만 변화시키면 되겠죠?

클릭했을때 전부 파란색으로 변화하면 안되므로 eq(0)을 써서 첫번째 놈을 변화시키게 해봅니다. 

ex1.css({

'border':'1px solid red',

'color': 'green',

})

.click(function(){

ex1.eq(0).css({

'border' : '1px solid blue',

})

})

 

이렇게 구현하면 문제점이 있어요

두번째, 세번째 를 클릭해도 전부 첫번째 보더만 변화하게 됩니다. 

아래와 같이 말이죠..

우리가 원하는건 클릭한 놈이 변화하길 원하는거에요. 

다시 짜볼까요?

이럴때 쓰는게 $(this)입니다. 

<script>

const ex1 = $('.ex1 p')

// ex1.style = "boarder:1px solid #f00"

ex1.css({

'border':'1px solid red',

'color': 'green',

})

.click(function(){

$(this).css({

'border' : '1px solid blue',

})

})

</script>

이렇게 $(this)를 쓴다면 이벤트가 발생했을때 그 대상의 객체를 리턴해주는 기능을 가졌습니다. 

우리는 이 객체의 변화를 코딩하면 되는거죠!

 

자 여기서 조금 더 보강해봅시다. 

클릭 안한것들은 초기화를 해주고, 클릭한 것만 solid blue를 줘봅시다.

ex1.css({

'color': 'green',

})

.click(function(){

ex1.css({'border':''})

$(this).css({

'border' : '1px solid blue',

})

})

여기서 추가한 건 ex1.css({'border':''})

이부분이에요. 이 부분은 초기화 하는 부분이라고 생각하면 됩니다. 

 

 

 

마지막 예제도 해봅시다. 

<ul class ='ex3'>

<li>

01. 질문

<p>01. 답변</p>

</li>

<li>

02. 질문

<p>02. 답변</p>

</li>

<li>

03. 질문

<p>03. 답변</p>

</li>

</ul>

자 예제입니다. 

질문과 답변을 아래와 같이 3가지 준비했어요. 

이제 2번 질문을 클릭하면 02. 답변이 나오고, 나머지는 다시 사라지도록 하는 코드를 작성해보겠습니다.

 

스크립트를 준비해주시고, 먼저 li p 를 ex3로 잡아줍시다. 

const ex3= $('.ex3 li')으로 잡으면 되겠죠?

그리고 function을 통해서 해당 li 에 클릭이벤트를 줍시다.  

<script>

$('.ex3 li p').css({

'background':'#eee',

'padding': '30px',

'display': 'none',

})

const ex3 = $('.ex3 li');

ex3.click(function(){

ex3.find('p').css({'display':'none'})

$(this).find('p').css({

'display' : 'block'

})

})

</script>

위와같이 click이벤트들을 넣었습니다. 

p태그들을 전부 display none으로 표시합니다. 

그리고 내가 원하는 p태그만 block으로 바꿔줘야합니다. 

 

내가 원하는 p태그는 무엇일까요?

바로 내가 클릭한 놈이겠죠?

이럴때 쓰는것이 바로 $(this)입니다. 

$(this)를 쓰면 내가 클릭한것에 대한 객체값을 얻을수 있습니다. 

내가 클릭한 li의 p태그를 찾은후에 block으로 변경해주면 됩니다. 

 

완성!