평택코딩부트캠프 11일차

문서 객체 모델 기본 용어

• 요소 노드
• 텍스트 노드 : 화면에 출력되는 문자열
• 정적 생성
• 동적 생성

실행 순서에 따른 문서 객체 사용 오류

• 이벤트 활용하기

window.onload = 

문서 객체를 선택한다

• 이미 존재하는 html 태그를 자바스크립트에서 문서 객체로 변환하는 것

스타일 조작

• 자바스크립트로 css 속성 값을 추가 제거 변경 가능
• -를 넣지 않고 backgroundColor로 변경

Jquery란?

메서드	설명
attr()	문서 객체의 속성 조작

Q. body에서 id 나오면 head에서 무엇을 생각해야 하나요 ?

이벤트 사용

• jQuery 라이브러리를 이용

메서드	설명
show(속도)	문서 객체가 커지며 표시
hide(속도)	문서 객체가 작아지며 사라짐
toggle(속도)	show() 메서드와 hide() 메서드를 번갈아 실행
slideDown(속도)	문서 객체가 슬라이드 효과와 함께 표시
slideUp(속도)	문서 객체가 슬라이드 효과와 함께 사라짐
slideToggle(속도)	slideDown()메서드와 slideDown() 메서드를 번갈아 실행
fadeIn(속도)	문서 객체가 선명해지며 표시
fadeOut(속도)	문서 객체가 흐려지며 표시
fadeToggle(속도)	fadeIn()메서드와 fadeOut() 메서드를 번갈아 실행
delay()	애니메이션을 특정 시간만큼 정지
stop()	애니메이션을 완전히 정지

돌발 퀴즈

• Q1. 큐 ?

• Q2. 스택 ?

     <script>
            $(document).ready(function () {
                $("#box88")
                    .css({
                        width: 300,
                        height: 300,
                        background: "teal",
                    })
                    .animate(
                        {
                            width: 50,
                            height: 50,
                            opacity: 0.5,
                        },
                        2000 // 애니메이션 시간
                    );
            });
        </script>

오늘의 퀴즈

• Q1. jQuery를 사용할 때 가장 기본적으로 활용하는 함수는 $( ) 입니다. ?
• Q2.jQuery로 속성을 조작할 때는 ( ) 메서드를 사용합니다. ?
• Q3.jQuery로 스타일 속성을 조작할 때는 ( ) 메서드를 사용합니다. css()
• Q4.jQuery로 클래스를 조작할 때는 ( ) 메서드를 사용합니다.attr()
• Q5.jQuery 라이브러리의 이벤트 관련 메서드가 아닌 것은?
  ① click ( ) 메서드 ② on( ) 메서드
  ③ bind( ) 메서드 ④ link ( ) 메서드
• Q6.간단한 효과 메서드에서 대상을 사라지게 하는 메서드는?
  ① show( ) ② slideDown( )
  ③ slideUp ( ) ④ fadeOut( )