jQ (6) 썸네일형 리스트형 jQ_5강 요소의 관계로 요소 선택 방법 1. 상위 요소 선택 한 단계 위의 요소(부모) : $(selector).parent(); 윗단계 모든 요소(조상) : $(selector).parents(); 선택 요소와 지정 요소 사이의 조상 : $(selector).parentsUntil(other_selector); 예제) div (great-grandparent) ul (grandparent) li (direct parent) span div (grandparent) p (direct parent) span 부모선택 상위요소선택 ...까지선택 2. 하위 요소 선택 한 단계 하위 요소(자식) : $(selector).children(); 자손 요소 : $(selector).find("filter"); 예제) div(.. jQ_4강 style(CSS) 변경 1. $(selector).css("css 속성", "속성값") 2. class로 변경 클래스 추가 : $(selectro).addClass("클래스 속성값"); 클래스 제거 : $("selector).removeClass("클래스 속성값"); 클래스 토글 : $("selector).toggleClass("클래스 속성값"); 예제) 클래스 추가 클래스 삭제 클래스 토글 DIV 요소의 추가/삭제 1. 추가 밑에 추가 : $(selector).append("추가 요소"); 위에 추가 : $(selector).prepend("추가 요소"); 특정 요소 밑에 추가 : $(selector).after("추가 요소"); 특정 요소 위에 추가 : $(selector).before("추가 요소.. jQ_3강 jQuery Effect 1. 기본 effect hide/show : 요소 숨김(display: none)/보임 fade : 서서히 나타나거나 사라지게 하는 효과 slide : 아래에서 위로 사라지거나 위에서 아래로 나타나게 하는 효과 animate : 사용자 정의 애니메이션 효과를 요소에 추가 stop : 동작 중인 effect를 중지시킴 => 모든 effect에는 시간을 설정할 수 있음(밀리초 단위) => callback(콜백) 함수 : 작업 처리 후 호출하는 함수로, effect 함수는 모두 callback 함수를 정의해 effect 처리가 종료되는 시점에서 또다른 작업을 처리하도록 작성할 수 있음 2. Fade In & Out fadeIn(speed, callback) : 서서히 나타나는 효과 f.. jQ_2강 Selector(선택기, 선택자) 태그명, id 속성값(#), class 속성값(.), *(모든 요소 선택), this(이벤트 발생 요소) 이때 this는 버튼일 경우 클릭한 버튼 자체가 되며, 문자열로 넣지 않는다. 조합 선택기) 태그명.클래스값 => ex) $("p.cls") : 태그명.first => ex) $("p:first") : 여러 p 요소 중 첫 번째 기타 선택기) [속성] => ex) $("[href]") : href 속성이 있는 들 태그[속성='값'] => ex) $("a[target='_blank'") : 인 요소들 버튼 타입의 input 태그 : $(":button") $("tr:even") : 테이블 짝수 행 $("tr:odd") : 테이블 홀수 행 CSS의 선택기와 동일 : $(.. jQ_1강 jQuery 구문(작성법) HTML 요소를 '선택(Selecting)'하고, 그 요소에 '동작(Action)'을 수행하도록 한다. 기본 문법 : $(Selector).action(); - Selector(선택자) : HTML 요소를 찾기 위한 키워드 => CSS와 동일 - action() : 요소에 대해 수행할 작업(요소의 동작), 이벤트 처리 등 - 태그명 : 태그 이름 그대로 작성 ex) 무언가 => '.div01' - class/id명 : 각각 '.' 및 '%'과 클래스명 ex) 무언가... => '#d01' ex) $("p").hide() => 모든 태그를 안 보이게 함 기본 js 상태는 아래와 같이 긴 코드로 이루어져 있다. const pelem = document.getElementsByTag.. jQ_0강 jQuery jQuery란 Javascript를 쉽게 사용하기 위한 하나의 라이브러리이다. 특히, DOM 및 이벤트 처리에 용이하다. jQuery 사용 방법 1. 다운로드하여 프로젝트에 포함 jQuery 사이트에서 파일을 다운받는다. jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jqu.. 이전 1 다음
