🌞 Day 032 

 🌟 4-1. 문서 객체의 속성 추가 

• attr() 메서드 사용

• 3가지 형태로 사용

1) $(selector).attr(name, value);

• 속성의 적용에 인덱스 적용이 안되어 있다면 '모든' 동일한 문서 객체에 적용된다.
  

2) 익명함수를 이용한 개별 속성의 값 추가
: $(selector).attr(name, function(index){});

[참고]

3) 익명함수 이용 & 객체를 활용한 속성 추가
: $(selector).attr(object);

 🌟 4-2. 문서 객체의 속성 제거 

• removeAttr(name) : 문서 객체의 속성을 제거해주는 메서드
  $(function(){ $('img:eq(0)').removeAttr('width'); })

 🌟 6. 문서 객체의 스타일 검사 

• css() : 스타일과 관련된 모든 기능을 수행

/* CSS */ 
  .item_1 {background:red; color:white}
  .item_2 {background:pink; color:white}
  .item_3 {background:orange; color:white}

<!-- HTML -->
  <h1 class="item_1">Header-0</h1>
  <h1 class="item_2">Header-1</h1>
  <h1 class="item_3">Header-2</h1>

• jQuery
  

• h1태그의 css속성 값을 구해서 텍스트노드로 만들고 그 텍스트노드를 내용으로 넣은 새로운 h1태그를 생성하여 body태그 안에 넣었다.

• 속성을 추출할 때에는 attr : src, size, width, height

• 스타일을 추출할 때는 css : background, color, border

 🌟 7. 문서 객체의 스타일 추가  

사용형태 3가지

1) 단순 스타일 추가 : $(selector).css(name, value);

2) 익명함수를 이용해서 인덱스 별로 다른 스타일 적용
: $(selector).css(name, function(index){ });

3) 객체 형식으로 두가지 이상 css를 동시에 적용
: $(selector).css(object);

 🌟 8. 문서 객체의 내부 검사 - 추출 

• 기존 자바스크립트에서 문서 객체의 innerHTML 속성과 관련된 jQuery 메서드

1) html() : 문서 객체 내부의 글자와 관련된 모든 기능을 수행

2) text() :

• 문서 객체 내부의 글자와 관련된 모든 기능을 수행

• 선택자로 선택한 문서 "모든" 객체의 글자를 가져와 출력

 🌟 9. 문서 객체의 내부 추가  

1) $(selector).html(value); ➡ HTML 태그를 인식해 문자열 삽입
    $(selector).text(value); ➡ HTML 태그를 인식하지 않음

⏬

2) 익명함수를 이용해서 태그 내부의 내용을 수정, 추가
$(selector).html(function(index, html){});
$(selector).text(function(index, html){});

 🌟 10. 문서 객체의 내부 제거  

1) remove(): 특정 문서 객체를 제거

2) empty(): 특정 문서 객체의 후손을 모두 제거

 🌟 11. 문서 객체의 생성(1)  

• document.createElement() , document.createTextNode()
  : “자바스크립트”에서 사용하던 문서객체 생성함수이다.

• 제이쿼리에서 문서 객체를 생성하는 방법

  • $(): 문서객체 생성.
  • $() 함수의 매개 변수에 HTML 태그자체를 “문자열”로 넣기만 하면 해당 태그의 문서 객체가 생성된다.
  • 생성한 문서 객체를 body채그에 추가하는 방법 #1.
    

 🌟 12. 문서 객체의 생성(2)  

• 텍스트노드를 갖지 않는 문서 객체를 생성하는 방법
  

 🌟 13. 문서 객체의 삽입(1)  

•  $(A).appendTo(B)  : A를 B의 뒷부분(자식요소)에 추가 한다.
•  $(A).prependTo(B)  : A를 B의 앞부분(자식요소)에 추가한다.
•  $(A).insertAfter(B)  : A를 B의 뒤(형제요소)에 추가
•  $(A).insertBefore(B)  : A를 B의 앞(형제요소)에 추가

 🌟 14. 문서 객체의 삽입(2)  

•  $(A).append(B)  : B를 A의 뒷 부분에 추가
•  $(A).prepend(B)  : B를 A의 앞 부분에 추가
•  $(A).after(B)  : B를 A의 뒤에 추가
•  $(A).before(B)  : B를 A의 앞에 추가 (A 밖에)

 🌟 13, 14 예시 1  

• 13과 14는 대칭.. 같은 순서 == 같은 기능
  전달내용과 목적지의 순서만 다름

1. $(selector).append(content, content, ... , content);

• 추가할 대상들은 한 개 이상 여러 개의 대상을 한 번에 추가할 수 있다.

 🌟 13, 14 예시 2 

: $(selector).append(function(index){});

• html
  • 

 🌟 15. 문서 객체의 이동  

• 움직이는 img태그들

• HTML
  : img태그 6개가 공백없이 이어져 있음

• jQuery
  

• 이미지가 1초마다 옆으로 계속 이동하는 코드

 🌟 16. 문서 객체의 복제 및 이동  

  <h1>HEADER-1</h1>
  <h2>HEADER-2</h2>
  <hr>
  <div></div>
  <hr>

• 이동 & 복제
  - 기존 문서 객체를 선택하고 문서 객체 삽입 메서드를 사용하면,
  문서 객체가 "이동"
  

• clone(): 문서 객체 복제

• $(selector).clone()

• $(selector).clone(Boolean dataAndEvents)

• $(selector).clone(Boolean dataAndEvents, Boolean deepDataAndEvents)

 🌌 Event 

CSS

HTML

 🪐 1. 이벤트 연결 #1 

• 기존 자바스크립트의 이벤트 연결은 태그 안에 onClick 같은 속성을 넣고, 자바스크립트 함수를 연결했지만,

• 제이쿼리는 직접 명령과 선택자로 태그를 선택하고, 그 문서객체에 이벤트 함수를 연결하여 실행

• 사용할 이벤트 함수 : on()

 🌟 사용 형태 

1) $(selector).on( 이벤트이름, 익명함수 );

• 실제 사용 예
  

2) $(select).on(object);
: 두 가지 이상의 이벤트와 그에 따른 실행 함수 지정

 🪐 2. 이벤트 연결 #2  

• hover() : mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결
• $(selector).hover(function(){}, function(){} );

 🪐 3. 이벤트 제거  

[🦜참고🦜]

$('h1').on('click', function(){});

• 위 명령을 아래와 같이 간략하게 사용할 수 있다. onclick에 한해서만...

$('h1').click(function(){});

 🪐 4. 매개 변수 context  

매개변수 context (this 키워드 또는 index, html 등)

• context:selector가 적용하는 범위를 한정

• 특정 부분의 선택자를 선택하고 싶을 때 사용하는 매개변수

• $(selector, context)

• 클릭된 div 안의 h1과 p를 따로 선택자로 쓰고자 할 때...

• 자손 선택자를 사용하고자 하는데 부모가 this 라면... $('this h1')라고 쓰면 안된다.

• this가 ''안에 들어가는 순간 this로 사용이 안되고 그냥 문자('this')로 인식

• HTML
  • 

 🪐 5. 이벤트 강제 발생 

• 사용 형태 : $(selector).trigger(eventName);

• HTML
  : <h1>Start: </h1> <h1>Start: </h1> <h1>TRIGGER: </h1>

 🍳 마우스 키보드 이벤트 정리 

•  click  : 마우스 클릭할 때 이벤트 발생
•  dbclick  : 마우스 더블클릭할 때 이벤트 발생
•  mousedown  : 마우스 버튼을 누를 때 이벤트 발생
•  mouseup  : 마우스 버튼을 뗄 때 이벤트 발생
•  mouseenter  : 마우스가 요소의 경계 외부 → 내부 이동할 때 이벤트 발생
•  mouseleave  : 마우스가 요소의 경계 내부 → 외부 이동할 때 이벤트 발생
•  mousemove  : 마우스를 움직일 때 이벤트 발생
•  mouseout  : 마우스가 요소를 벗어날 때 이벤트 발생
•  mouseover  : 마우스가 요소 안에 들어올 때 이벤트 발생
  
  
•  keydown  : 키보드가 눌러질 때 이벤트 발생
•  keypress  : 글자가 입력될 때 이벤트 발생 (한글지원 X)
•  keyup  : 키보드가 떼어질 때 이벤트 발생

 🪐 6. 마우스 이벤트 

• mouseOver VS mouseEnter

HTML
<div class="outer"> <div class="inner"></div> </div>

 🪐 7. 키보드 이벤트 

HTML

jQuery

• 태그 종류별로 값을 얻거나 추가하는 함수
  • input 태그로 표시되는 대상 : val()
  • 그외 div, span 등의 일방 태그들 : html(), text()

 🪐 이벤트 연습 : select tag 만들기 

< 문제 >

1. title을 클릭하면 dropMenu가 보이게, 다시 클릭하면 안 보이게 코딩 하기

2. dropMenu메뉴가 보이면 각 나라에 마우스가 올라갔을 때 배경색과 글자색이 변하게하고,
   마우스가 빠지면 원래색으로 돌아오게 하기 이 때, class와 css를 이용해도 됨

3. dropMenu중 하나를 클릭하면 선택된 나라의 국가번호가 num에 표시되게 하기 (자바에서 사용하던 substring을 여기서도 사용이 가능함)

• CSS는 JS배울 때 selectTag 만들기와 동일
  html도 거의 동일하나 div의 onclick이벤트를 뺐음

---

HTML

• 문제코드 🔽
  

---

CSS

-문제코드 🔽

• 내가 추가한 부분
  : .revers { background: #888888; color: white;}

---

• .show()와 .hide()를 쓰면 더 간단하게 줄일 수 있다.