본문 바로가기

HTML/jQuery 기초

 (14)
[jQuery] 해당 스타일 jQuery를 이용하여 변경하기 앞서 해당 스타일에 대한 정보를 읽어오는 예시를 진행했다. 이번에는 해당 스타일에 대한 정보를 변경하는 스크립트를 작성해보자 해당스타일을 바꾸는 방법은 해당객체.css("변경할 속성", "변경할 수치"); 메뉴1 메뉴2 메뉴3 메뉴4
[jQuery] 노드 추가, 수정, 삭제, 이동 실습 여태까지 배웠던 노드에서 할 수 있는 이벤트를 활용하여 실습을 해본다. 1. 처음에 입력 항목을 초기화해야한다. 예를 들어 ul.menu나 ul.menu li, input text에 id : #menuName를 초기화 한다. 2. 그리고 각각의 함수를 작성한다. 아무거나 변경할 수 없기때문에 처음에 해당 노드를 선택하는 이벤트가 존재해야한다. 노드를 선택하는 함수를 작성한다. setfunction setSelectMenu(menuObj) { var $select = $(menuObj); // 이전에 선택한 메뉴에 대해 "select" 클래스 제거 if ($selectedMenu != null) { $selectedMenu.removeClass("select"); } // 신규로 선택한 메뉴에 대해 "se..
[jQuery] 노드 수정하기 해당 노드를 jQuery를 이용하여 수정할 수 있다. Menu#1 Menu#2 Menu#3(class = "select") Menu#4 Menu#5
[jQuery] 노드 삭제하기 노드를 추가한다면 삭제할 수도 있다. 해당 노드를 삭제하거나 전체 노드를 삭제할 수 있다. Menu#1 Menu#2 Menu#3(class = "select") Menu#4 Menu#5
[jQuery] 노드 움직이기 노드를 추가하고 해당 노드가 이미 존재한다면 이동할 수 있다. 해당 노드를 지칭하는 것은 this로 한다. prepend() 맨 앞으로 이동 append() 맨 뒤로 이동 before() 기준 노드보다 앞으로 이동 after() 기준 노드보다 뒤로 이동 Menu#1 Menu#2 Menu#3(class = "select") Menu#4 Menu#5
[jQuery] 노드 추가하기 jQuery를 이용해서 노드를 추가할 수 있다. Menu#1 Menu#2 Menu#3(class = "select") Menu#4 Menu#5
[jQuery] 노드 실습 (1) 탭 메뉴 아이템 개수 출력 (2) 탭 메뉴 인덱스값 출력 (3) 1초에 한 번씩 탭 메뉴 아이템에 select 클래스 적용하기 google facebook pinterest twitter airbnb path
[jQuery] 형제 노드 해당 노드의 앞쪽과 뒷쪽의 노드를 선택할 수 있다. 샘플 페이지(div, id=samplePage, class=page) 헤더 영역(div, id=header) 노드 찾기(div, id=content, class=sample-content) 일반 노드 찾기(ul, class=menu) id로 찾기(li, data-value=1) tag로 찾기(li, class=select) class로 찾기(li, data-value=2) 속성으로 찾기(li, class=test1) 자식 노드 찾기(div, class=content-data) 1. 모든 자식 노드 찾기(p, class=test1) 2. 특정 자식 노드만 찾기(p) 3. 마지막 자식 노드 찾기(p, class=test2) 푸터 영역(div, id=foot..

티스토리툴바