🐷전동준(Jeon DongJun)

Go with the flow

[web]jQuery 복습 1

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!


jQuery 복습 1️⃣


jQuery란 무엇인가?

  • 참고 : https://ko.wikipedia.org/wiki/JQuery
  • 제이쿼리는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다.
  • 파이썬의 모듈(Module) 이라고 생각하면 된다.
  • 코드보기, 문서 객체 모델 찾기(DOM), 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인 되어있다.

jQuery Library 불러오기

  • jQuery는 파일을 다운받아서 라이브러리를 적용시키거나, 링크를 가져와서 적용시킬 수 있다.
  • 참고 : 제이쿼리를 불러오지 않으면 콘솔창의 경고에 ‘$ is not defined’라고 뜬다.
  • jQuery 사이트 : https://jquery.com/download/

1) 파일을 다운 받고 해당 경로 적어주기

  • 위의 사이트로 들어가 library 파일을 다운받아 준다.
  • compressed파일과 uncompressed파일이 존재하는데, compressed파일은 모든 기능을 적용시킬 때 사용하고, uncompressed파일은 기능을 골라서 적용하고 싶을 때 사용한다고 한다.

  • image

  • 나는 초보자이니깐 어떻게 사용하는지 모르기에 compreesed파일을 다운받아서 모든 기능을 적용시켜줄꺼다.
  • 다운 받아서 프로젝트 폴더 내의 resources/js/ 안에 넣어줬다.
  • 그리고 이제 html 문서를 만들고 <script> 태그를 통해 설정을하면 된다.
  • <script src='resources/js/jquery-3.6.0.min.js'></script>
  • 이렇게 하면 해당 문서에서는 jQuery를 사용할 수 있게 되는 것이다.

2) 링크를 복사해와서 경로에 적어주기

  • 저렇게 파일을 다운 받아서 그 파일 경로를 적어주는 방법도 있지만, 링크 주소를 복사해서 적용하는 방법도 있다.
  • 아까와 같이 다운로드 페이지로 가서 다운받을 파일에 마우스 오른쪽을 클릭해서 링크 주소 복사를 해준다.
  • image
  • 그리고 그 주소를 html 문서 내의 <script> 태그의 src 속성에 넣어주면 된다.
  • <script src = 'https://code.jquery.com/jquery-3.6.0.min.js'></script>

  • 이렇게하면 html 문서에 jquery 라이브러리를 적용 완료한 것이다.

  • 이 방식에서 유의해야할 점은 가장 최신 버전의 jquery를 불러온다는 것인데, 이때 회사에서 그들이 일할 때 사용하는 버전이 회사마다 다를 수 있으므로 호환성 문제를 고려해야한다는 점이다.


기본 문법

  • jQuery는 DOM의 선택자를 표현하는 식으로 코드를 적어준다.
  • jQuery('selector').method(); 이런 구조인데 실제로 사용하는 코드로는
  • $('selector').method(); 이렇게 사용할 수 있다. $(달러) 표시로 jQuery를 표현할 수 있는 것이다.
  • 예를 들어보자면, p태그를 선택해서 css style 속성 중에서 글씨색을 빨간색으로 바꾸는 명령어는 다음과 같다.
  • $('p').css('color', 'red');
  • 누구는 기존의 js가 편하다는 사람도 있고, 누구는 j쿼리가 편하다고 하는데 나도 처음으로 배우는 단계여서 아직은 js의 문법이 더 와닿는 것 같다.
  • 이번에는 기능구현을 할 때, 일반적인 자바스크립트 언어를 이용하면 onload=function(){} 이런 식으로 적어야 한다. 하지만, jQuery에서는
  • $(function)(){});
  • `$(document).ready(function(){});
  • 이렇게 두 가지 방식으로 사용할 수 있다.
  • 실제 코드를 사용해보며 jQuery에서 제공하는 기본적인 메소드들과 문법을 알아보자.

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분
    • 나는 기존에 VSC를 이용하지만, 블로그 포스팅을 위해서 codpen을 사용중하고 있다.
    • 그래서 코드펜에서 제이쿼리를 이용하기 위해서는 HTML 부분에 jQuery 라이브러리를 호출해줬다.
    • <h1> 태그를 사용해서 제목을 적어줬다.
    • 버튼 5개를 만들어 줬고 각 버튼의 textContent에 그 버튼을 누르면 적용될 함수의 설명이 적혀있다.
    • 그리고 <div>로 다른 영역을 만들어 그 안에 이미지를 불러왔다.
  • CSS style
    • 이미지의 크기를 200px * 200px로 정해줬다.
  • JS
    • $(function(){});
      • jQuery를 사용해 바로 기능구현을 했다.
      • 첫 번째 click me 버튼의 id인 test-btn을 선택자로 지정했다. 그리고 클릭을 했을 경우에 ‘클릭했음’이라는 알림창이 뜨도록 만들었다.
      • 그리고 img를 선택해 이미지 자신(this)이 클릭되었을 때 숨겨지는 hide() 메소드를 적용했다.
    • function showImg(){}
      • 위의 기능 구현 함수로 인해 이미지를 누르면 이미지가 숨는다.
      • 그래서 그 숨은 이미지를 다시 보이게 하기 위한 함수다.
      • 이미지 보이기 버튼을 클릭하면 실행되는 함수다.
      • 정말 간단하게 제이쿼리에 img 태그를 넣어주고 show() 메소드만 사용하면 이미지가 보이게 만들 수 있다.
    • function resizeImg(){}
      • 이미지 축소 버튼을 누르면 크기가 100px * 100px 로 적용되게 구현을 했다.
      • 제이쿼리 선택자로 img태그를 선택하고 속성이름인 css를 .뒤에 붙여준다.
      • 그리고 괄호 안에서 속성값을 줄 것인데, 두 개 이상의 속성값(지금은 width와 height)를 적용해 줄때는 괄호 안에 중괄호({}) 안에서 적어준다.
      • 중괄호를 사용하지 않고 속성을 두번 지정해주는 코드는 다음과 같다.
      • $("img").css("width", "100px").css("height","100px")
    • function addImg(){}
      • 이미지 추가 버튼을 누르면 실행되는 함수로, 기존에 있던 이미지와 같은 이미지가 200px * 200px의 사이즈로 추가된다.
      • 여기서 사용되는 메소드는 last()와 after()다.
      • last()는 선택된 요소에서 가장 마지막 요소를 선택해주는 기능
      • after()는 선택된 요소의 뒤에 새 요소를 추가해주는 기능
    • function toggleImg(){}
      • 이미지 숨기기/보이기 버튼을 누르면 실행되는 함수로, 이미지가 사라졌다 나타나는 기능을 구현했다.
      • 사실 아까 위에 적용된 것처럼 hide()와 show()를 이용할 수도 있지만
      • jQuery에서는 이러한 기능을 합쳐놓은 toggle()메소드가 존재한다.
      • 제이쿼리 선택자로 img를 선택해 toggle() 메소드를 적용해줬다.


선택자

  • 이번에는 css에서 사용하는 선택자를 연습해보자.
  • 기본적으로 태그, 아이디, 클래스로 선택도 할 수 있고 부모 자식 관계를 사용해서도 선택을 할 수 있다.
  • 예제를 통해서 정리해보자.

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분

    • 스크립트 태그를 이용해 jQuery 라이브러리 호출
    • 첫 번째 <div> 에는 리스트 태그를 활용해 css 스타일이 적용될 요소들을 만들어 주었다.
    • 각 리스트 요소들의 텍스트 내용이 함수가 실행될때 그 내용을 설명해준다.
    • 두 번째 <div> 에는 9가지 함수를 실행하기 위한 버튼 9개를 만들었다.
    • 그리고 마지막 <div> 안에는 css스타일 적용 함수가 실행될 때 그 코드내용이 나타날 것이다.(id=view)

  • JS

    • $(document).ready(function(){})

      • eq(n) 메소드를 사용해 n+1번째 요소를 선택할 수 있다.
      • 첫 번째 div태그를 선택해 빨간색 1px 굵기의 일반 테두리를 설정, 영역의 크기를 400px * 200px로 설정
      • id가 view인 요소를 선택해 빨간색 1px 굵기의 일반 테두리를 설정, 영역의 크기를 400px * 100px로 설정

    • function selector01(){} : 태그 이름으로 선택

      • 태그선택(span) 버튼을 누르면 실행되는 함수
      • span 태그를 선택해 글씨색을 빨간색으로 적용
      • id가 view인 요소. 즉, 3번째 div에 해당 함수가 스타일을 적용하는 코드가 보여진다.

    • function selector02(){} : id로 선택

      • id선택(t1) 버튼을 누르면 실행되는 함수
      • #t1을 선택해 글씨색을 초록색으로 적용
      • id가 view인 요소. 즉, 3번째 div에 해당 함수가 스타일을 적용하는 코드가 보여진다.

    • function selector03(){} : 클래스 선택

      • class선택(t2) 버튼을 누르면 실행되는 함수
      • .t2를 선택해 글씨색을 바이올렛으로 적용
      • id가 view인 요소. 즉, 3번째 div에 해당 함수가 스타일을 적용하는 코드가 보여진다.

    • function selector04(){} : 부모 자식 선택

      • p c 선택 버튼을 누르면 실행되는 함수
      • li태그의 하위에 있는 모든 span태그를 선택해 배경색을 파란색으로 적용
      • id가 view인 요소. 즉, 3번째 div에 해당 함수가 스타일을 적용하는 코드가 보여진다.

    • function selector05(){} : 부모 > 자식 선택

      • p > c 선택 버튼을 누르면 실행되는 함수
      • li태그의 바로 아래에 있는 span 태그를 선택해 글씨색을 노란색으로 적용
      • id가 view인 요소. 즉, 3번째 div에 해당 함수가 스타일을 적용하는 코드가 보여진다.

    • function selector06(){} : n번째 자식 선택

      • n번째 자식을 골라서 선택할 수 있다.
      • :nth-child()를 사용해서 선택한다.

      • 괄호 안에는 n , odd , even 이 들어갈 수 있으며 순서대로 n번째, 홀수 자식, 짝수 자식을 가져온다.

      • nth-child 선택 버튼을 누르면 실행되는 함수
      • li태그의 홀수(odd) 자식들을 선택해 배경색을 노란색으로 적용
      • id가 view인 요소. 즉, 3번째 div에 해당 함수가 스타일을 적용하는 코드가 보여진다.

    • function selector07(){} : 첫 자식 선택

      • first-child 선택 버튼을 누르면 실행되는 함수
      • li 태그의 첫 자식을 선택해 배경색을 황녹색으로 적용
      • id가 view인 요소. 즉, 3번째 div에 해당 함수가 스타일을 적용하는 코드가 보여진다.

    • function selector08(){} : 마지막 자식 선택

      • last-child 선택 버튼을 누르면 실행되는 함수
      • li 태그의 마지막 자식을 선택해 글씨색을 주황색으로 적용
      • id가 view인 요소. 즉, 3번째 div에 해당 함수가 스타일을 적용하는 코드가 보여진다.

    • function cls(){} : 초기화

      • 위에서 적용했던 모든 스타일을 초기화한다.
      • *(asterisk: 모든 것)을 선택해 글씨색, 배경색을 아무것도 적용치 않는다.
      • 3번째 div의 텍스트 내용을 아무것도 없게 만든다.


input

  • jQuery는 <input> 태그의 type속성들인 텍스트, 버튼, 라디오, 체크박스, 선택 등을 선택하거나 그 속성들의 속성값을 이용해 선택할 수도 있다.
  • 예제를 통해서 정리해보자.

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분
    • <form> 생성
    • 그 안에 <input> 태그를 이용해 텍스트상자, 버튼, 라디오, 체크박스, 선택상자를 만들어줬다.
    • 텍스트상자를 제외한 것들에 value 속성값을 입혀줬다.
    • 버튼, 라디오, 체크박스를 클릭할 경우 각각 다른 함수가 실행된다.
    • 선택상자는 <form> 태그 안의 <div> 안에 따로 위치해있다. <div>의 id는 a
  • JS
    • function inputText(){}
      • 버튼을 누르면 실행되는 함수
      • 제이쿼리로 input:text (텍스트 타입의 인풋태그)를 선택하고 val() 메소드를 사용해 텍스트상자의 값을 txt라는 변수에 저장해준다.
      • 여기서 val()은 자바스크립트의 value()와 같다.
      • 버튼을 누르면 txt의 내용이 알림창에 출력된다.
    • function inputRadio(){}
      • 라디오버튼을 누르면 실행되는 함수
      • 제이쿼리($)로 input:radio (라디오 타입의 인풋태그)를 선택하고 val() 메소드를 사용해 라디오가 가지고 있는 value값을 radioVal이라는 변수에 저장해준다.
      • id가 a인 요소(div 영역)을 선택해서 radioVal이 저장하고 있는 내용을 넣어준다.
      • html() 메소드는 JS의 DOM 메소드인 innerHTML과 같다.
    • function inputCheck(){}
      • 체크박스를 누르면 실행되는 함수
      • 제이쿼리($)로 input:checkbox를 선택해 val() 메소드를 사용해 체크박스가 가지고 있는 value값을 checkVal이라는 변수에 저장
      • id가 a인 요소(div 영역)을 선택해서 checkVal이 저장하고 있는 내용을 넣어준다.
    • $(function(){})
      • 선택상자를 바꿔주면 실행되는 함수
      • 제이쿼리($)로 선택상자(select)를 선택하고 변화(change)하는 이벤트가 생겼을 때 또 다른 함수가 발동되는데
      • 그 함수의 내용은 이렇다.
      • 선택상자 하위의 속성 option의 속성값 selected인 것을 선택해 option이라는 변수에 저장
      • option의 value값을 알림창에 띄워준다.
      • 그리고 선택상자에서 몇 번째에 위치하는지 인덱스값을 알림창에 띄워준다.


checkbox

  • 체크박스의 checked 속성값을 이용한 예제다. checked 속성도 jQuery를 이용해 선택이 가능하다.
  • 체크박스로 책을 선택해 선택한 책들의 가격을 합하여 표현해보자.

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분
    • <form> 을 하나 생성한다. action 속성은 뺐는데, 코드펜을 사용하기 때문에 submit을 값을 적지 않은 상태로 누르면 페이지오류가 발생한다.
    • 첫 div 안에 클래스가 label인 span 생성
    • 이어서 클래스가 infobox이고 이름이 userid인 텍스트 상자를 생성
    • 클래스가 error인 span을 생성, hidden속성을 이용해 평상시에는 보이지 않게 만들었고 텍스트의 글씨색상을 빨간색으로 지정
    • 첫 div 바로 아래에는 submit(전송) 버튼을 만들어 준다.
    • 콘텐츠의 내용을 바꾸기 위해 (구분하기 위해 선을 그음) <hr> 사용
    • filedset을 가로 300px 크기로 생성하고 그 안에는 legend(범례) 하나와 체크박스 4개, 버튼 1개와 스팬태그 1개, 책 합산 가격을 명시할 div 영역 한개를 만들어 줬다.
    • 전체 선택을 위한 첫 체크박스를 제외하고 나머지 체크박스에는 책 제목을 뜻하는 textcontent와 책 가격을 뜻하는 value값을 가지고 있다. 그리고 이것들의 name은 chk 이다.
  • JS
    • 첫 즉시실행 함수
      • 아이디가 signal인 선택자는 form 태그를 가리킨다. 그리고 클래스가 infobox인 텍스트 상자의 내용이 null값이거나 비어있다면 클래스가 error인 span태그의 show()메소드 때문에 hidden속성이 풀려 보이게 된다.(유효성 검사)
      • 아이디가 confirm인 선택자를 누르면 처음에는 아이디가 result인 div영역이 비워진다.
      • 우선 책의 가격을 더하기 위해 값이 0인 total 변수를 생성해준다.
      • 그리고 체크박스 중 체크가 되어있는 요소들을 가지고와 .each()를 사용해 해당 요소들의 가격을 가져온다. 여기서 each()는 파이썬의 map() 함수랑 비슷하다.
      • 여기서 book 변수의 chk.next().text()의 이유는 책의 이름들이 <input>태그 뒤의 <b> 태그 안의 텍스트이기 때문이다.
      • <input>태그들의 value값을 price에 저장했으면 이 값들은 문자형이기때문에 parseInt로 숫자형으로 변환해준 뒤 total에 더해준다.
      • 그리고 마지막으로 id가 result인 <div> 영역에 책 가격의 합계가 출력될 것이다.
    • fucntion allChk(bool){}
      • 전체선택 체크박스를 누르면 나머지 체크박스도 그에 따라 체크되고 풀리게 만들어주는 함수다.
      • 전체선택 체크박스를 제외한 체크박스(name=chk)를 변수 chks에 저장한다.
      • chks의 길이만큼 반복하여 chks의 checked 속성들을 전체선택 체크박스의 bool값과 동일화 시켜준다.
    • 두번째 즉시실행 함수
      • 3개의 체크박스가 체크상태면 전체선택 체크박스도 체크가되고, 하나라도 체크가 풀리면 전체선택 체크박스도 풀리게 해주는 함수
      • name=chk인 체크박스를 클릭할 때
      • 체크된 체크박스가 3개라면 전체선택 체크박스의 checked 속성값을 true로 (체크)
      • 그게 아니라면 checked 속성값을 false로 (체크 풀림)
      • 여기서 중요한 점은 객체에 prop() 메소드를 이용해 속성값을 먹여줄 수 있다.


DOM

  • jQuery는 DOM의 엘리먼트들을 손쉽게 선택할 수 있는 것이 가장 큰 장점인 라이브러리다.
  • 여러가지 예제들을 통해 연습해봤다.

예제 1(필터링 메서드)

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • jQuery에는 다양한 메소드를 사용해 선택한 엘리먼트들 기준으로 다른 엘리먼트들을 선택할 수 있다.

    • eq() : 선택한 엘리먼트 중에 인덱스로 엘리먼트를 탐색
    • slice() : 선택한 엘리먼트 중에 인덱스의 길이로 엘리먼트를 탐색
    • first() : 선택한 엘리먼트 중에 첫번째 엘리먼트를 탐색
    • last() : 선택한 엘리먼트 중에 마지막 엘리먼트를 탐색

  • HTML 바디태그 부분

    • <pre> 태그(적은 형식 그대로 반영) 안에 위에도 적어놓은 메소드 관련 설명들을 <b>태그 안에 작성했다.
    • <div> 요소를 만들어 메소드 4개의 내용이 담겨져있는 <p> 요소 4개를 만들어 줬다.

  • JS

    • 별도로 함수 이름을 정의 하지 않고 즉시 실행 함수를 이용해 기능들을 구현했다.

    • 첫 번째 기능

      • div 태그 바로 하위의 p 요소 중 index=0인 요소를 클릭하면, pre 태그 하위의 b태그 중 index=0인 요소가 toggle()기능이 생긴다.(toggle 기능은 사라졌다 생겼다 하는 기능)

    • 두 번째 기능

      • div 태그 바로 하위의 p 요소 중 index=1인 요소를 클릭하면, pre 태그 하위의 b태그 중 index= 1(slice(1,2)는 1이상 2미만이라는 뜻)인 요소가 toggle() 기능이 생긴다.

    • 세 번째 기능

      • div 태그 바로 하위의 p 요소 중 index=2인 요소를 클릭하면, pre태그 하위의 b태그 중 첫번째(first()) 요소의 글자색상을 빨간색으로 변화시키고 세번째(eq(2)) 요소에는 토글 기능이 생기게 한다.

      • 여기서 end() 메소드는 $(요소)로 명령어를 다시 보내줘서 다음 명령어를 실행할 수 있게 만들어 준다.

      • 즉, end()를 사용하면 한 문장에서 동일 요소에 대해 여러 명령이 사용 가능하다.

      • 한 문장에 담긴 명령어를 나누면

      • $("pre b").first().css("color", "red");
$("pre b").eq(2).toggle();
      • 이렇게 표현할 수 있다.

    • 네 번째 기능

      • div 태그 바로 하위의 p요소 중 index=3인 요소를 클릭하면, pre태그 하위의 b태그 중 마지막 요소에 배경색을 skyblue로 적용하는 기능

예제 2(트리 탐색 메서드)

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • 이번 예제는 이벤트 기능 없이 jQuery를 사용해 바로 style이 적용이 된다.
  • 이번에도 다양한 메소드를 통해 선택한 엘리먼트 기준으로 다른 엘리먼트들을 탐색할 수 있다.
    • find("selector") : 선택한 엘리먼트의 자손들 중에 탐색
    • children("selector") : 선택한 엘리먼트의 자식들 중에 탐색
    • parent() / parents("selector") : 선택한 엘리먼트의 부모 / 조상 탐색
      • 여기서 조상이란 바로 위의 부모를 포함한 그 부모, 그 부모.. 그 부모 까지 가리킨다고 생각하면 된다.
    • next("selector") : 선택한 엘리먼트 다음에 따라오는 요소 탐색
  • HTML 바디태그 부분
    • <pre> 태그(적은 형식 그대로 반영) 안에 위에도 적어놓은 메소드 관련 설명들을 <b>태그 안에 작성했다.
    • <div> 태그에 메소드의 기능을 테스트하기 위한 <p>태그 5개를 만들었다.
  • JS
    • $(document).ready(function)(){} : 즉시 실행하는 함수인데, js의 onload= 의 역할을 한다고 보면 된다. $(function(){})로 적어도 똑같이 기능한다.
      • 첫 번째 코드
        • 선택한 div 태그의 하위에 존재하는 태그 중 p태그를 찾아(find) 글씨크기 30px, 글씨색 빨강색을 적용
        • find('태그') 메소드는 자식뿐만 아니라 자손까지 찾는다.
        • 선택자 div p와도 같다고(?) 보면 된다.
      • 두 번째 코드
        • 선택한 div 태그의 자식 태그 중 아이디가 chd인 태그의 텍스트 내용(text)을 “2.children()”으로 변경해준다.
        • children()은 자손이 아닌 바로 하위의 자식 태그들만 찾을 수 있다.
      • 세 번째 코드
        • 선택한 p > b의 바로 상위의 부모를 선택해 배경색이 핫핑크가 되도록 만들어준다.
        • p > b의 부모는 바로 자신을 >로 선택해준 p 태그다. 나머지 p들에는 적용이 되지 않는다.(부모가 아닌 p태그들이기 때문에)
      • 네 번째 코드
        • p > b의 조상 중 div를 선택해 배경색을 노랑색이 되도록 만들어준다.
        • b의 부모는 p, 그 p태그의 부모는 div로 해당 div 영역의 배경색이 노란색으로 전부 변하는걸 확인할 수 있다.
        • 그 와중에 세번째 코드에서 작성한 명령에 우선하지 못해서 핫핑크 부분은 노란색으로 바뀌지 않는다.
      • 다섯 번째 코드
        • 선택한 p의 첫 번째(eq(0)) 요소의 바로 다음 요소에 글씨색상을 파란색으로 바꿔 준다.

예제 3(탐색 메서드)

  • 속성에 대해서 attr과 prop의 차이를 기억해야한다.
    • attr() : HTML의 속성(attribute)
    • prop() : JS의 속성(property)
    • 두 속성의 차이점은 attr은 HTML 문서에 반영이 되고, prop은 script에서 제어하는 것이라 script로 들어간다.
  • 그리고 jQuery의 또다른 메소드를 알아보자
    • add() : 선택한 엘리먼트에 추가적으로 selector 표현식을 작성할 때 사용한다.
    • is() : 선택한 엘리먼트들 중에 구하는 엘리먼트가 있는지 확인할 때 사용한다.
  • 예시를 통해 이해해보자.

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분
    • <div> 영역 생성
    • 그 아래에 p, span, p, b 순서로 요소 생성
  • JS
    • 즉시 실행함수 사용
    • 첫 번째 코드
      • 첫 번째 p태그를 선택하면서 span(add) 태그도 같이 선택하여 글씨색상을 빨간색으로 적용해준다.
      • add() 메소드를 사용하면 부모 자식이거나, 옆에 있지 않아도 같이 선택할 수 있다.
    • 두 번째 코드
      • div 태그의 자식들을 클릭했을 때
        • 그 자식태그의 태그이름이 SPAN 이라면 ‘span tag click’이라는 알림창이 뜨며, 그 클릭한 부분의 요소의 글씨색상이 아쿠아, 타이틀이 ‘abc’로 적용된다.
        • 만약 클릭한 그 자식태그의 태그이름이 p라면 그 배경색을 바이올렛 색상을 적용한다.
    • 세 번째 코드
      • 두 번째 b태그를 클릭한다면, 다른 곳을 클릭하며 적용되었던 css 스타일이 클릭하기 전으로 원상복구 된다.

예제 4

  • handler in & out 기능을 구현해보자.
  • jQuery에서는 hover()라는 메소드를 사용해서 마우스 포인터를 올리거나 내렸을 때의 이벤트를 인식할 수 있다.
    • handler in : hover()를 사용해 마우스 포인터를 엘리먼트 요소에 올리면 나타나게 함(show())
    • handler out : hover()를 사용해 마우스 포인터를 엘리먼트 요소에서 벗어나면 요소를 사라지게 함(hide())
    • handler in&out : hover()를 사용해 마우스 포인터를 왓다갓다하며 엘리먼트 요소를 나왔다 사라지게 할 수 있음(toggle())

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분

    • 포스팅을 작성하며 먹고 싶은 것들을 위주로 작성했다.🍕🍔🍟🌭🍗🥩🍖
    • <div> 영역 3개를 생성, 모두 클래스는 menu이며 각 div의 아이디는 menu1, 2, 3 이다.
    • 그 <div> 영역 안에 순서대로 각각 <div>를 4개, 4개, 2개 생성

  • CSS style

    • 클래스가 menu인 요소들의 너비를 150px, 배경색을 콘플라워블루, 조상 중에 위치 조정 요소가 없기 때문에 컨테이닝 블록을 기준으로 위치한다.
    • 아이디가 menu2인 요소는 왼쪽에서 170px 떨어지게, menu3인 요소는 340px 떨어지게 설정
    • a태그의 텍스트꾸밈을 없앤다.

  • JS

    • 즉시 실행 함수를 사용

      • 클래스가 menu인 하위 div들의 display 속성 값을 none으로 바꿔줬기 때문에 문서에서 공간을 차지하지도 보이지도 않는다.
      • 클래스가 menu인 요소에 마우스 포인터를 올릴 때 그 자식 요소 중 div인 요소들이 나왔다 사라졌다 할 수 있도록 toggle()메서드를 적용한다.


event

  • 각 요소가 서로 포함관계(중첩) 인 경우에 요소 중 하나에 이벤트가 발생하면, 그 중첩된(상위)의 요소들도 이벤트가 전파된다.
  • 그래서 중첩 요소에 이벤트가 전파되는걸 막고싶다면 세가지 방법을 사용할 수 있다.
    • stopPropagation() : 이벤트 요소의 전파를 막는다.
    • preventDefault() : 이벤트에 의한 기본 동작을 막는다.
    • return false : 위의 두가지 기능을 구현할 수 있다.

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분
    • <span>태그 하나 생성
    • <div>태그 두개를 생성하고 둘 다 그 안에 <p> 태그를 두개 생성
    • 그 두가지 <p>태그 중 첫번째요소 안에 <a>태그를 생성
    • 각 div의 a태그에는 각각 네이버, 구글로 연결되는 경로를 적용
    • body태그 마지막에는 ‘요소 추가’라는 텍스트를 담은 버튼을 만든다.
  • CSS style
    • div : 크기 400px * 200px, 테두리는 2px로 빨간 일반 라인테두리, 외부 간격 20px, 흘러 넘치는 부분은 auto로 설정
    • div 하위의 첫p : 왼쪽에서 흐르게하고, 1px 두께의 파란 일반 라인 테두리, 크기 150px * 150px, 텍스트는 가운데 정렬, 줄 높이는 150px
    • div 하위의 마지막 p : 오른쪽에서 흐르게하고, 1px 두께의 파란 일반 라인 테두리, 크기 150px * 150px, 텍스트 가운데 정렬, 줄 높이는 150px
  • JS
    • 즉시 실행함수 사용
    • 첫 번째 기능
      • 첫 번째 a 태그를 클릭하면 ‘a 클릭’이라는 알림창이 뜨게 한다.
    • 두 번째 기능
      • p 태그를 클릭하면 ‘p 클릭’이라는 알림창이 뜨게 한다.
    • 세 번째 기능
      • div 태그를 클릭하면 ‘div 클릭’ 이라는 알림창이 뜨게 한다.
    • 네 번째 기능
      • 이벤트를 엮어서 요소에 저장하는 bind() 메소드를 사용했다.
      • 두 번째 a태그에 마우스를 올리면 글씨 색상을 금색으로, 피하면 기본색으로 바꿔준다.
    • 다섯 번째 기능
      • span태그를 클릭하면 네 번째 기능이 풀린다. unbind()메소드를 사용했다.
    • 여섯 번째 기능
      • 버튼을 클릭하면 바디태그의 마지막 자식위치에 새로운 요소를 추가한다.(이 예제에서는 p태그와 텍스트 콘텐츠)
    • 일곱 번째 기능
      • 여섯 번째 기능에서 생성된 p 엘리먼츠에도 클릭하면 알림창이 뜨는지 확인하기 위함
      • on() 메소드를 사용했다. js에서는 addEventListener()로 구현 가능
  • 여기서 중요한 점은 첫 번째 기능이다.
  • a 태그의 첫번째 요소는 누르면 네이버 홈페이지로, 두 번째 요소는 누르면 구글로 가는데
  • 이것은 앵커 태그들이 갖고 있는 href로 인한 기본 동작 이다.
  • 그리고 첫번째 기능이 실행되면 두번째, 세번째 기능도 동시에 실행되는데, 이는 a 태그는 p태그와 div 태그로 감싸져 있기 때문이다.(포함관계)
  • 그래서 이벤트 전파를 막지 않고 a태그를 눌렀을 때 일어나는 상황은 다음과 같다.
    1. ‘a 클릭’ 알림창(alert)
    2. ‘p 클릭’ 알림창(alert)
    3. ‘div 클릭’ 알림창(alert)
    4. 네이버 홈페이지로 이동
  • 이러한 이벤트 전파를 막기 위해서는 위에 명시해놓은 방법들을 사용하면 된다.
  • 만약 첫번째 기능 부분에서 이벤트 전파를 막아본다 가정하면
    • e.stopPropagation(); : 이 뒤로 이벤트 전파가 되지 않는다.
      1. ‘a 클릭’ 알림창(alert)
      2. 네이버 홈페이지로 이동
    • e.preventDefault(); : 이벤트 전파는 되지만 기존의 href의 동작이 되지 않는다.
      1. ‘a 클릭’ 알림창(alert)
      2. ‘p 클릭’ 알림창(alert)
      3. ‘div 클릭’ 알림창(alert)
    • return false : 반환 값을 거짓으로 반환하면 두 가지 기능이 전부 적용된다.
      1. ‘a 클릭’ 알림창(alert)
  • 그리고 두 번째 기능에서 p 태그를 클릭하면 ‘p 클릭’이라는 알림창을 뜨게 구현해 놓았는데, 여섯 번째 기능으로 만든 p 태그 에서는 해당 기능이 적용이 되지 않을 것이다. 왜냐하면 새로 만든 엘리먼트이기 때문이다.
  • 그래서 일곱 번째 기능의 on() 메소드를 사용해서 새로 생성된 요소에도 p태그를 클릭하면 다른 알림창이 울리게끔 설정할 수 있다.

마치며

현재 시각 오전 3시 50분이다. 무슨 포스팅을 준비하며 복습만 해도 시간이 너무너무 빨리간다.

이게 맞는걸까? … 정말 난 할 수 있을까? 의심이 드는 새벽이다 휴ㅠㅠㅠ 자야겠다.

2022

[web]jQuery 복습 3

2 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 2

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 1

14 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리4

5 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리3

10 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리2

7 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리1

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]CSS 기초 정리

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]HTML 기초 정리

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[Pandas]pandas 연습

3 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑

2021

[Python기초]module

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑