분류 전체보기 133

jQuery - filter

이미 select 된 element 에 대해 추가적으로 또 select 하는 (필터링) 하는 함수 배열 처럼 인덱스(index)를 사용하여 선택하는 함수도 있고 요소의 속성값으로 선택하는 함수도 있다. ~ .first() : ~ 의 첫번째 요소만 선택 $(" ~ :first") 와 동일 결과 ~ .last() : ~ 의 마지막 요소만 선택 $(" ~ :last") 와 동일 결과 ~ .eq(i) : ~ 의 i번째 요소만 선택 $(" ~ :eq(i)") 와 동일 결과 ~ .filter(selector) : ~ 중 selector 지정요소만 선택 ~ .filter(callback) : ~ 중 callback 결과가 '참' 인것만 선택 ~ .not(selector) : : ~ 중 selector 지정요소를 제외..

Javascript 2022.03.15

jQuery - DOM

$(selector)의 결과에는 '선택된 element(들)' 이 담겨 있다. 이 선택된 element 에서 다시 DOM 구조내의 원하는 element 들로 이동/선택할수 있는 다양하고 편리한 메소드들이 제공된다. Iteration ~ .each(function) : select된 각element 에 대한 동작 수행. https://api.jquery.com/each/ * Traversing Up: ~ .parent() : ~ 의 부모 선택 ~ .parents() : ~ 의 상위 요소(들) 모두 선택 ~ .parents(selector) : ~ 의 상위 요소(들) 중 selector 지정요소들만 선택 ~ .parentsUntil(selector) ~ 의 상위 요소(들) 중 selector 지정요소 전까지..

Javascript 2022.03.15

jQuery - CSS

* jQuery CSS 동적으로 CSS 스타일 적용하는 것은 결국 결국 class를 추가/제거하는 형태로 구현합니다. jQuery 는 이를 간단히 구현하는 함수들 제공 addClass() removeClass() toggleClass() $(document).ready(function(){ $("#btn01").click(function(){ $("h1, h2, p").addClass("blue"); $("div#d01").addClass("important"); // 동시에 복수개 클래스 추가 가능 $("div#d02").addClass("important blue"); }); $("#btn02").click(function(){ $("h1, h2, p").removeClass("blue"); }); ..

Javascript 2022.03.15

jQuery - HTML

jQuery HTML 다루기 1. Get text() - HTML 요소의 content 리턴 html() - HTML 요소의 content 리턴 (HTML 태그 포함) val() - 폼 요소의 value 리턴 attr() - Attribute 값 리턴 css() - css 값 리턴 2. Set text(string) - HTML 요소의 content 변경 html(string) - HTML 요소의 content 변경 (HTML 태그 포함) val(value) - 폼 요소의 value 값 변경 attr(name, value) - Attribute 값 변경 css(property, value) - css 값 변경 $(document).ready(function(){ 1. Get $("#btn11").clic..

Javascript 2022.03.15

jQuery - Effect : stop()

$(selector).stop(stopAll,goToEnd); - stopAll : 애니메이션 queue가 clear 되는지 여부, 디폴트값은 false, 즉 중간에 stop 되면 현재 애니메이션만 중단되고 다음 애니메이션이 진행 - goToEnd : stop() 될때 곧바로 애니메이션의 끝 상태로. 디폴트 값은 false $(document).ready(function(){ * #start 버튼을 누르면 다음 애니메이션이 '차례대로' 진행 1. 사각형이 오른쪽으로 100px 움직이고 (5초) 2. 글자 크기가 3em 으로 커지게 하기 (5초) $("#start").click(function(){ $("div").animate({left: '100px'}, 5000); $("div").animate({f..

Javascript 2022.03.15

jQuery - Effect : animate()

거의 대부분의 CSS property 에 대해 애니메이션이 가능하다. 그러나 property 이름은 camel notation으로 되어야 한다. 즉 CSS 에서 padding-left 는 jQuery 애니메이션에서는 paddingLeft 이어야 한다 또한, 기본적은 jQuery 라이브러리에선 color 애니메이션은 없다. color 애니메이션을 하려면 추가적인 plugin을 포함해야 한다 http://plugins.jquery.com/ * animate() 함수: CSS property에 대해서 animation 수행 $(selector).animate({params},speed,callback); $(document).ready(function(){ $("#btn01").click(function(){..

Javascript 2022.03.15

jQuery - event

* 다양한 이벤트 함수들 1. 마우스 관련 이벤트 - click ( ↓,↑ / 왼쪽 버튼만) - dblclick (왼쪽 버튼만) - mousedown (↓ 모든 버튼) - mouseup (↑ 모든 버튼) - mouseenter 마우스 올려놓으면 - mouseleave 마우스 올려져 있다가 나가면 2. 키보드 관련 이벤트 - keydown - keypress (keydown과 비슷: ALT, CTRL, SHIFT, ESC 등의 키에는 동작 안함 ) - keyup 3. 폼 관련 이벤트 - submit - change - focus - blur 4. Document/Window 관련 이벤트 - load - resize - scroll - unload * 대부분의 jQuery '이벤트 함수'들이 위 DOM 이벤..

Javascript 2022.03.15

jQuery - Selector

jQuery 란? JavaScript 라이브러리 중 하나입니다. JavaScript 의 프로그래밍을 혁신적으로 단순화 시키고 편리하게 제작가능케 함 가장 널리 쓰이고, 가장 오래 쓰여온 JavaScript 라이브러리로 오늘날 주요 웹사이트는 거의다 jQuery를 사용함. 주요기능) - HTML DOM을 쉽게 다룰수 있다 - CSS를 쉽게 다룰수 있다. - HTML 이벤트 등도 쉽게 다룰수 있다 - 다양한 이펙트와 애니메이션도 쉽게 다룰수 있다. - AJAX를 쉽게 다룰수 있다. - 코드 보안성(?) 쉽게 다룰수 있다 (?) 공식사이트: http://jquery.com/ 모토: write less, do more 일본어: ジェイクエリー 다운로드시 2가지 버젼) 압축된 버젼 : jquery.min.js (배..

Javascript 2022.03.15