KOSTA 교육 34일차(JQuery, 선택자, function, array, event, style, animate, DOM)

18.12.14(금)

 

배운 내용

 

1. 함수
2. 배열
3. 이벤트
4. 스타일
5. DOM

---

1. 함수

함수는?
JQuery 기능을 함수를 통하여 사용이 가능하다.

 

함수 종류

• 확장집합의 엘리먼트 개수를 반환한다.

 

• get(index) : 제이쿼리 객체를 자바스크립트 객체로 변환할 수 있다. -> 반대의 경우에는 팩토리 함수에 넣는다. index가 없으면 배열로 생성된다.

• 둘다 함께 선언한다.

 

• add() 메서드를 사용하면 많은 셀렉터를 체인으로 연결 가능
• 다른 클래스를 추가하고 싶을 때 체인식으로 연결

 

• not() 메서드를 이용하여 쉽게 셀렉터를 체인으로 연결해 논리부정 관계 구성

 

• filter() 포함하는 것을 추출
• td의 내용중 match(정규표현식)에 만족하는 내용을 뽑는다.

 

• *is() true or false를 체크
• 셀렉터와 일치하는 엘리먼트가 하나라도 있다면 is() 메서드가 true를 반환(if문에 자주 사용)

 

• each(iterator) 해서 indext 값을 통해각각 순회를 한다. (배열, 태그)
• img가 5개가 있을 때 n은 5회 순회한다.

 

속성 선택자

• val(매개변수) : 매개변수를 입력하면 input태그의 value 속성을 지정, 매개변수를 입력하지 않으면 value 속성을 검사

 

함수 예제

2. 배열

배열은?
JQuery를 사용하여 배열을 선언해 값을 넣고 추출할 수 있다.

 

배열 예제

• 준비가 완료되면 처리할 수 있도록 ready함수를 선언한다.
• 변수를 선언하고 배열 값을 넣는다.
• each를 활용하여 배열의 값을 출력 하기위하여 index값과 item을 선언한다.
• 출력할 변수를 선언하고 item.link와 item.name을 선언하여 클릭시 주소가 나올 수 있도록 <a>태그를 함께 선언한다.
• 그리고 body에 output을 선언하여 넣어준다.

 

3. 이벤트

이벤트는?
JQuery기능 중 이벤트를 사용하여 여러가지의 이벤트를 구현할 수 있다.

 

• 이벤트를 연결하는 방법이다.

 

• 이벤트를 제거하는 방법이다.

 

• 이벤트의 종류들이다.

 

• 이벤트의 커맨드이다.

 

이벤트 예제

• .on()을 통해 click 이벤트를 주고 클릭시 추가 함수를 선언하여 이벤트를 선언할 수 있음
• 주석으로 설명은 달았지만 This의 경우 어려울 수 있음 여기서는 클릭한 버튼을 나타내는 경우가 많음
• 이벤트 핸들러 함수 안에서의 this는 이벤트 대상을 가르킨다.
• 코드 최소화 과정을 통하여 중복된 코드들은 제거하고 통합된 코드를 작성하는 것이 가능함
• hover의 경우는 마우스 오버, 아웃 기능을 나타냄
• step 9의 경우 클릭하면 사라져야 하기 때문에 flag 형식으로 지역 변수를 선언하여 0이면 정지된 상태, 1이면 실행된 상태로 구분
• toggle을 사용해서 스위치 기능을 사용할 수도 있다.
• step 10은 bubbling 방지 예시를 보여준다.
• off()는 이벤트 해제를 실행한다.
• trigger을 사용하면 처음부터 이벤트를 실행한 상태로 진행할 수 있다.

4. 스타일

스타일는?
JQuery의 함수를 통하여 여러가지 스타일을 표현할 수 있다.

 

스타일 종류

 

스타일 예제

• 팩토리 함수도 변수로 선언이 가능하다. 해당 변수(팩토리 함수)로 폰트 사이즈를
  .css(font_Size)로 폰트사이즈를 defaultSize 변수에 담는다.
• 해당 변수를 alert로 출력하면 12px이 출력된다.
• switcher 클래스의 button을 클릭하면, parseInt로 강제 정수형으로 형변환을 시킨다.
• switch문을 이용하여 this.id를 입력했을 때(여기서 this는 클릭한 button을 말함)
  num에 1.2씩을 곱하거나 나누어 글씨 크기를 조절한다.
  디폴트는 사이즈 그대로 둔다.
• 그리고 animate스타일을 이용하여 px을 slow하게 애니메이션 효과를 준다.

• readmore를 클릭하면 글이 숨겨지고 readless를 누르면 글이 숨겨지는 애니메이션을 출력해보려 한다.
• div태그 speech클래스의 eq(1)(2번째)를 hide(slow)시킬 것이고 a태그 more클래스를 클릭했을 때 eq(1) slideToggle을 천천히 효과를 줄것이다.
• 여기서 this는 클릭한 readmore를 나타내고 $link로 변수 선언을 한다.
• $link.text() (텍스트)가 readmore이면 text를 변환 후 readless가 표시되고 아니라면 reamore를 출력하게끔 한다.

5. DOM

DOM은?
속성, 엘리먼트를 생성하고 엘리먼트 구조를 변경한다.

 

엘리먼트 HTML 컨텐츠 수정

 

 

엘리먼트 복사, 이동(부모, 자식 관계)

 

• append, prepend는 앞 부모, 뒤 자식
• appendTo, prependTo는 앞 자식, 뒤 부모

 

엘리먼트 복사, 이동(형동생 관계)

 

• before 앞 본인, 뒤 형 after 앞 형, 뒤 본인
• insertBefore 앞 형, 본인 뒤 insertAfter 앞 본인, 뒤 형

 

DOM 예제

• body의 div, span, b 각각 부모자식, 형동생 엘리멘트 이동을 해보는 예제이다.
• 1번 예시는 div와 b를 이동하는 문제이다. 여기서 append는 부모자식 관계로 앞이 부모, 뒤는 자식이다. 즉 자식이 움직여서 부모로 가야한다.
  div에 b가 들어가야 한다는 것을 알아냈고 append의 특성상 div의 뒤 쪽으로 들어가야 되겠다.(prepend라면 div의 앞으로 들어가면 되겠다.)

 

• 2번 예시는 span과 b를 이동하는 문제이다. prependTo는 부모자식 관계이고 To가 붙어 앞이 자식 뒤가 부모형태가 된다. 때문에 span이 b로 포함이 되어야 할 것이다.
  prependTo의 특성상 앞에 포함이 될 것이기 때문에 b의 앞에 span이 위치할 것이다.
  (appendTo는 b의 뒤에 위치할 것이다.)

 

• 3번 예시는 div와 b를 이동하는 문제이다. before은 형 동생 관계로 포함이 아닌 상하관계가 있다. 앞이 본인, 뒤가 형인 형태가 된다. 그렇다면 b가 div보다 위에 있어야 하기 때문에 div의 위치보다 위로 이동될 것이다.
  (after의 경우 앞이 형, 뒤가 본인이므로 div의 뒤에 b가 위치할 것이다.)

 

• 4번 예시는 b와 span을 이동하는 문제이다. insertBefore은 앞이 형, 뒤 본인의 형태를 가지고 있으며 b가 형, span이 동생이 되겠다. 때문에 b보다 span이 뒤에 있어야 하므로 결과는 밑의 결과와 같다.
  (insertAfter의 경우 span뒤에 b가 위치될 것이다.)

오늘 교육 간 느낀점

오늘은 온전히 jQuery에 대해서만 학습하였다. 어렵긴 하였지만 이벤트 적인 요소가 많은 교육을 받아서 재미는 있었다. 하지만 DOM부분이 너무 헷갈리고 확실한 개념을 잡지 못해서 실전 예제를 풀이하는데 많이 고생을 하였다.

 

그리고 함수의 개념도 너무 많아서 어떤 조건을 구현할 때 무슨 함수를 써야할지 생각이 아직 떠오르지 않아서 부단히 암기하고 활용해봐야 할 것 같다. 월요일에 마지막으로 jQuery를 학습하고 화요일부터 미니프로젝트를 진행할 예정인데 사실 첫 언어였던 Java보다 걱정된다.
팀원에게 민폐끼치지 않도록 열심히 해서 꼭 프로젝트에 기여하도록 열심히 노력해야겠다!