Jquery-활용(1)

1) 초기화 코드: $(f_initial); / f_initial()

역할

• DOM 로드(ready) 후 f_initial() 실행
• 각 버튼 클릭 이벤트를 개별 함수에 바인딩

핵심 API

• $(fn) = $(document).ready(fn)
• $("selector").click(handler)

동작

• button:nth-of-type(1~9) → f_go ~ f_go9 연결
• div button:nth-of-type(1)(div 안 버튼) → f_go10 연결

2) 배열(객체) 생성 + $.each()로 링크 목록 출력

역할

• 링크 정보 {name, link}를 담은 배열을 만들고
• <ul><li><a ...> 형태로 HTML 생성 후 #here에 출력

핵심 API

• arr.push()
• $.each(array, function(index, item){...})
• $("#here").html(output)

결과

• #here에 “구글/네이버/다음” 링크 리스트 표시

3) each()로 DOM 순회 + 텍스트/속성 읽기

역할

• 현재 문서의 ul li a 요소들을 순회하며 콘솔 출력

핵심 API

• $("ul li a").each(function(index, item){...})
• $(item).text()
• $(item).attr("href")

결과

• 콘솔에 인덱스, 링크 텍스트, href가 출력됨
• 전제: f_go()로 링크가 먼저 만들어져 있어야 의미 있음

4)선택자 + 클래스 추가(addClass)

역할

• 짝수 번째 p 요소에 클래스(high-light)를 추가해 강조 표시

핵심 API

• $("p:nth-of-type(2n)")
• .addClass("high-light")

결과

• p2, p4…에 노란 배경/굵은 글씨/큰 글씨(정의된 CSS 적용)

5) 객체 병합($.extend) + 객체 순회 출력

역할

• obj, obj2를 합치고(address도 추가)
• key/value를 <p>로 출력

핵심 API

• $.extend(target, source1, source2, ...)
• $.each(object, function(key, value){...})
• $("#here").html(output)

결과

• menu/price/phone/address가 key/value 형태로 화면 출력

6) filter() 활용(짝/홀/조건 필터)

역할

1. 짝수 번째 p → 빨강
2. 홀수 번째 p → 파랑
3. 전체 p 중 “인덱스 기준 3의 배수”만 점선 테두리

핵심 API

• $("p:nth-of-type(even)")
• $("p").filter(":nth-of-type(odd)")
• $("p").filter(function(index){ return index % 3 == 0; })

결과

• 색상과 테두리가 조건에 따라 적용됨

주의

• index는 0부터 시작이므로 index%3==0은 p1, p4, p7…에 적용됨

7) 체이닝 + end()의 의미

역할

• h2 전체 배경색 적용 후
• 짝수 번째/홀수 번째에 서로 다른 스타일을 체이닝으로 적용

핵심 API

• 체이닝: $("h2").css(...).filter(...).css(...).end().filter(...).css(...)
• end() = 직전 filter 적용 전 컬렉션으로 복귀

결과

• 모든 h2: 배경 오렌지
• 짝수(h2 even): 글자 빨강
• 홀수(h2 odd): italic

8) 위치 기반 선택 (eq, first, last)

역할

• 첫 번째/마지막 p를 각각 다른 방식으로 선택해 스타일 적용

핵심 API

• .eq(0) : 첫 요소
• .eq(-1) : 마지막 요소
• .first(), .last()

결과

• 첫/마지막 p에 색/배경 스타일 적용

9) XML 문자열 파싱 ($.parseXML) + 탐색

역할

• 문자열로 작성된 XML을 Document로 변환 후
• 특정 노드를 찾아 이름/전화번호 출력

핵심 API

• $.parseXML(xmlStr)
• $(xmlDoc).find("...").each(...)
• .text()

현재 코드에서 중요한 포인트(정확성)

• XML은 <friends> 태그를 사용하고 있는데,
• 코드는 find("friend")를 찾고 있습니다.
  → 태그명이 불일치하면 each()가 돌지 않아 출력이 안 나옵니다.

10) fetch로 공공 XML 읽기 + 파싱 + 데이터 추출

역할

• XML 파일을 fetch()로 읽어온 후
• $.parseXML()로 파싱하고
• DATA_RECORD별로 SUBJECT, DATA_COMMNET 텍스트 추출

핵심 API

• fetch(...).then(response => response.text())
• $.parseXML(xmlString)
• $(xmlDoc).find("DATA_RECORD").each(...)
• .find("SUBJECT").text()

결과

• 콘솔에 subject/info 출력

주의(환경)

• 로컬(file://) 실행 시 fetch가 막힐 수 있어 서버 환경에서 실행하는 것이 일반적

11) 토글 UI (this/parent/find 활용)

역할

• div 안 버튼 클릭 시 “활성/비활성” 상태를 토글
• 버튼 텍스트, 부모 배경색, span 텍스트를 함께 변경

핵심 API

• $(this).text()
• $(this).parent()
• $(this).parent().find("span")

결과

• 활성화 상태: 배경 lightgreen, span/버튼 문구 변경
• 비활성화 상태: 배경 pink, span/버튼 문구 변경

참고

• 코드에 "비활성화기" 문구가 있어 의도한 텍스트와 다르면 UX가 어색할 수 있음(오타 가능)