SH's 개발일기

jQuery UI 는 JavaScript 와 jQuery 기반 라이브러리로 GUI widget, 각종 애니메이션 효과, 테마 등을 편리하게(?) 사용할수 있도록 제공한다. 공식: https://jqueryui.com/ CDN : https://code.jquery.com/ui/ jQuery 라이브러리 우선 " target="_blank" rel="noopener">https://code.jquery.com/jquery.min.js"> " target="_blank" rel="noopener">https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> jQuery UI 적용 CSS : 종류가 많고 다운로드 받아 커스터마이징 가능 https://c..

$.when() 함수 thenable object들 (다른말로 deferred object)의 이벤트가 끝나면 리턴타입은 Promise 객체 리턴 https://api.jquery.com/jquery.when/ deferred.then() 함수 deferred 들이 다 마무리 되면 콜백 함수 호출 https://api.jquery.com/deferred.then/ $(document).ready(function(){ $("#run").click(function(e){ var $box1 = $(".box1"); var $box2 = $(".box2"); var $box3 = $(".box3"); $box1.animate({left : "200px"}, 1000); $box2.animate({top: "0p..

* jQuery - AJAX jQuery를 사용하는 중요한 이유중 하나가 AJAX를 간편히 구현할수 있기 때문 AJAX를 브라우저 호환성 고민하지 않고 구현할수 있기 때문 실제 JavaScript 만으로 AJAX를 구현할경우, 브라우저 특성별 코드들을 만드는등 복잡한 과정 많음. jQuery는 이를 간편화 하였다. * load() 함수 $(selector).load(URL, data, callback); 서버로부터 데이터를 읽어와서 select된 element 에 넣음 * URL: request 할 url data : 쿼리스트링에 해당하는 데이터 (key-value 쌍으로 이루어짐) callback : load() 완료후 수행할 함수 * Same Origin Policy (동일 출처 정책) 어떤 출처에서..

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

$(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 지정요소 전까지..

outerHeight() - innerHeight + border outerWidth(true) - innerWidth + border + margin outerHeight(true) - innerHeight + border + margin $(document).ready(function(){ $("#btn01").click(function(){ var txt = ""; txt += "width: " + $("#div1").width() + " "; txt += "height: " + $("#div1").height() + " "; txt += "innerWidth: " + $("#div1").innerWidth() + " "; txt += "innerHeight: " + $("#div1").innerH..

* 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"); }); ..

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..

$(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..

거의 대부분의 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(){..