JavaScript - Output
2022. 11. 8. 15:07
JavaScript
innerHTML document.write() window.alert() console.log() innerHTML My First Web Page My First Paragraph My First Web Page My First Paragraph. 11 document.write() My First Web Page My first paragraph. My First Web Page My first paragraph. HTML 문서가 로드된 후 document.write()를 사용하면 기존 HTML이 모두 삭제됩니다 . My First Web Page My first paragraph. Try it 11 window.alert() My First Web Page My first paragraph. co..
jQuery - traversing
2022. 11. 8. 10:43
JavaScript/jQuery
parent() parents() parentsUntil() children() find() siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil() jQuery parent() 메서드 parent()메서드는 선택한 요소의 직접적인 부모 요소를 반환합니다. $(document).ready(function(){ $("span").parent(); }); jQuery parents() 메서드 parent()메서드는 선택한 요소의 모든 부모 요소를 반환합니다. $(document).ready(function(){ $("span").parents(); }); $(document).ready(function(){ $("span").parents("..
jQuery - Dimension 메서드
2022. 11. 8. 10:14
JavaScript/jQuery
jQuery - Dimension 메서드 width() height() innerWidth() innerHeight() outerWidth() outerHeight() jQuery width() and height() 메서드 width()메서드는 요소의 너비를 설정하거나 반환합니다(패딩, 테두리 및 여백 제외). height()메서드는 요소의 높이를 설정하거나 반환합니다(패딩, 테두리 및 여백 제외). $("button").click(function(){ var txt = ""; txt += "Width: " + $("#div1").width() + ""; txt += "Height: " + $("#div1").height(); $("#div1").html(txt); }); jQuery innerWidt..
jQuery - Get and Set CSS Classes
2022. 11. 8. 09:58
JavaScript/jQuery
jQuery CSS 조작 addClass()- 선택한 요소에 하나 이상의 클래스를 추가합니다. removeClass()- 선택한 요소에서 하나 이상의 클래스를 제거합니다. toggleClass()- 선택한 요소에서 클래스 추가/제거 사이를 전환합니다. css()- 스타일 속성을 설정하거나 반환 .important { font-weight: bold; font-size: xx-large; } .blue { color: blue; } jQuery addClass() 메서드 $("button").click(function(){ $("h1, h2, p").addClass("blue"); $("div").addClass("important"); }); $("button").click(function(){ $("#..
jQuery - Remove Elements
2022. 11. 8. 09:27
JavaScript/jQuery
요소/콘텐츠 제거 remove()- 선택한 요소(및 해당 하위 요소)를 제거합니다. empty()- 선택한 요소에서 자식 요소를 제거합니다. jQuery remove() 메서드 $("#div1").remove(); jQuery empty() 메서드 jQuery empty()메서드는 선택한 요소의 자식 요소를 제거합니다. $("#div1").empty(); 제거할 요소 필터링 $("p").remove(".test"); $("p").remove(".test, .demo");
jQuery - Add Elements
2022. 11. 8. 09:09
JavaScript/jQuery
새 HTML 콘텐츠 추가 append()- 선택한 요소의 끝에 내용을 삽입합니다. prepend()- 선택한 요소의 시작 부분에 내용을 삽입합니다. after()- 선택한 요소 뒤에 내용 삽입 before()- 선택한 요소 앞에 내용 삽입 jQuery append() 메서드 $("p").append("Some appended text."); jQuery prepend() 메서드 $("p").prepend("Some prepended text."); function appendText() { var txt1 = "Text."; // Create element with HTML var txt2 = $("").text("Text."); // Create with jQuery var txt3 = document..
jQuery - Get, Set Content and Attributes
2022. 11. 7. 16:23
JavaScript/jQuery
콘텐츠 가져오기 - text(), html() 및 val() text()- 선택한 요소의 텍스트 내용을 설정하거나 반환합니다. html()- 선택한 요소(HTML 마크업 포함)의 내용을 설정하거나 반환합니다. val()- 양식 필드의 값을 설정하거나 반환합니다. $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); $("#btn1").click(function(){ alert("Value: " + $("#test").val()); }); 속성 가져오기 - attr() $("button").click(functi..
jQuery - Chaining
2022. 11. 7. 16:19
JavaScript/jQuery
jQuery 메소드 체이닝 jQuery를 사용하면 작업/메서드를 함께 연결할 수 있습니다. 연결을 사용하면 단일 문 내에서 동일한 요소에서 여러 jQuery 메서드를 실행할 수 있습니다. $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
jQuery - Callback Functions
2022. 11. 7. 16:14
JavaScript/jQuery
jQuery 콜백 함수 JavaScript 문은 한 줄씩 실행됩니다. 그러나 효과를 사용하면 효과가 완료되지 않은 경우에도 다음 코드 줄을 실행할 수 있습니다. 이로 인해 오류가 발생할 수 있습니다. 이를 방지하기 위해 콜백 함수를 만들 수 있습니다. 현재 효과가 완료된 후 콜백 함수가 실행됩니다. 콜백이 있는 예 $("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); }); }); 콜백이 없는 예 $("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); });
jQuery - Stop Animations
2022. 11. 7. 16:11
JavaScript/jQuery
jQuery stop() 메서드 jQuery stop()메서드는 애니메이션이나 효과가 완료되기 전에 중지하는 데 사용됩니다. 이 stop()방법은 슬라이딩, 페이딩 및 사용자 지정 애니메이션을 포함한 모든 jQuery 효과 기능에 대해 작동합니다. $(selector).stop(stopAll,goToEnd); 선택적 stopAll 매개변수는 애니메이션 큐도 지워야 하는지 여부를 지정합니다. 기본값은 false입니다. 즉, 활성 애니메이션만 중지되어 대기 중인 애니메이션이 나중에 수행될 수 있습니다. 선택적 goToEnd 매개변수는 현재 애니메이션을 즉시 완료할지 여부를 지정합니다. 기본값은 거짓입니다. $("#stop").click(function(){ $("#panel").stop(); });
jQuery - 효과 Animation
2022. 11. 7. 13:12
JavaScript/jQuery
jQuery 애니메이션 - animate() 메서드 jQuery animate()메서드는 사용자 지정 애니메이션을 만드는 데 사용됩니다. $(selector).animate({params},speed,callback); $("button").click(function(){ $("div").animate({left: '250px'}); }); jQuery animate() - 여러 속성 조작 $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); }); jQuery animate() - 상대 값 사용 상대 값을 정의하는 것도 가능합니다(값은 요소의 현재 값..
jQuery - 효과 Sliding
2022. 11. 7. 13:06
JavaScript/jQuery
jQuery - 효과 Sliding jQuery 슬라이드 메서드는 요소를 위아래로 슬라이드합니다. jQuery SlideDown() 메서드 $(selector).slideDown(speed,callback); $("#flip").click(function(){ $("#panel").slideDown(); }); jQuery 슬라이드업() 메서드 $(selector).slideUp(speed,callback); $("#flip").click(function(){ $("#panel").slideUp(); }); jQuery SlideToggle() 메서드 $(selector).slideToggle(speed,callback); $("#flip").click(function(){ $("#panel").slid..
jQuery 효과 - 페이딩
2022. 11. 4. 13:42
JavaScript/jQuery
jQuery 효과 - 페이딩 jQuery fadeIn() jQuery fadeIn() 메소드를 보여줍니다. jQuery fadeOut() jQuery fadeOut() 메소드를 보여줍니다. jQuery fadeToggle() jQuery fadeToggle() 메소드를 보여줍니다. jQuery fadeTo() jQuery fadeTo() 메소드를 보여줍니다. jQuery 페이드인() 메서드 Syntax: $(selector).fadeIn(speed,callback); 선택적 속도 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다. 선택적 콜백 매개변수는 페이딩이 완료된 후 실행되는 함수입니다. $("button").click(function(){ ..
jQuery 효과 - 숨기기 및 표시
2022. 11. 3. 11:05
JavaScript/jQuery
jQuery 숨기기() 및 표시() hide()jQuery를 사용하면 및 show()메서드 를 사용하여 HTML 요소를 숨기거나 표시할 수 있습니다 . $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); $(selector).hide(speed,callback); $(selector).show(speed,callback); 선택적 속도 매개변수는 숨기기/표시의 속도를 지정하고 "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다. 선택적 콜백 매개변수는 hide()또는 show()메소드가 완료된 후 실행되는 함수입니다(이후 장에서 콜백 함수에 대해 자세히 알아볼 것입니다). ..
jQuery - 이벤트 메서드
2022. 11. 3. 10:56
JavaScript/jQuery
이벤트 메서드 웹 페이지가 응답할 수 있는 모든 다양한 방문자의 작업을 이벤트라고 합니다. 이벤트는 어떤 일이 발생하는 정확한 순간을 나타냅니다. 예: 요소 위로 마우스 이동 라디오 버튼 선택 요소를 클릭 "fire/fired" 라는 용어 는 종종 이벤트와 함께 사용됩니다. 예: "키를 누르는 순간 키 누르기 이벤트가 발생합니다." Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload 이벤트 메서드에 대한 jQuery 구문 $("p").click(f..
jQuery - 선택기
2022. 11. 3. 09:58
JavaScript/jQuery
$("p") jQuery - 선택기 jQuery 선택기를 사용하면 HTML 요소를 선택하고 조작할 수 있습니다. jQuery 선택기는 이름, ID, 클래스, 유형, 속성, 속성 값 등을 기반으로 HTML 요소를 "찾거나 선택"하는 데 사용됩니다. 기존 CSS Selectors 를 기반으로 하며, 일부 고유한 사용자 지정 선택기가 있습니다. jQuery의 모든 선택자는 달러 기호와 괄호 $()로 시작합니다. 요소 선택기 jQuery 요소 선택기는 요소 이름을 기반으로 요소를 선택합니다. 다음과 같이 페이지의 모든 요소를 선택할 수 있습니다 . $("p") #id 선택기 jQuery 선택기는 HTML 태그의 id 속성을 사용하여 특정 요소를 찾습니다.#id id는 페이지 내에서 고유해야 하므로 하나의 고..
jQuery - 구문
2022. 11. 3. 09:51
JavaScript/jQuery
jQuery - 구문 jQuery 구문은 HTML 요소 를 선택 하고 요소에 대한 일부 작업 을 수행 하기 위해 맞춤 제작되었습니다 . 기본 구문은 $( selector )입니다. 액션 () jQuery를 정의/액세스하기 위한 $ 기호 HTML 요소 "쿼리(또는 찾기)"를 위한 ( 선택기 ) 요소에 대해 수행할 jQuery 작업 () $(this).hide()- 현재 요소를 숨깁니다. $("p").hide()- 모든 요소를 숨깁니다. $(".test").hide()- class="test"인 모든 요소를 숨깁니다. $("#test").hide()- id="test"인 요소를 숨깁니다. 문서 준비 이벤트 $(document).ready(function(){ // jQuery methods go here..
jQuery - 기초
2022. 11. 3. 09:42
JavaScript/jQuery
jQuery jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다. (자료출처 : https://ko.wikipedia.org/wiki/JQuery) 제이쿼리를 사용하는 이유는 다음과 같습니다. 페이지 내부 요소에 접근하기 쉽다.제이쿼리를 사용하지 않으면 DOM 트리를 이용해서 요소(element)에 접근해야 합니다. 이는 배우기도 어렵고 불편한데, 제이쿼리를 사용하면 CSS의 선택자를 이용해서 간편하게 접근할 수 있습니다. 페이지의 보여지는 모습을 변경하기 쉽다.동적으로 페이..
Javascript - document.getElementById()
2022. 9. 22. 10:55
JavaScript
document.getElementById() 해당되는 id의 요소에 접근하는 함수이다. 예로 라는 부분이 있을 때 document.getElementById("aaa") 라고 한다면 라는 부분에 접근 가능하다. 접근한 후 의 여러 특성들을 자바스크립트로 바꿀 수 있다. element = document.getElementById(id); 일반적인 형태 Element getElementById(String elementId); 전달인자 elementId : 원하는 엘리먼트의 id 어트리뷰트 값 반환값 지정된 id 어트리뷰트를 가진 문서 엘리먼트를 나타내는 Element 에 해당하는 Element를 찾지 못하면 null 을 반환 HTML javascript var textBox = document.getE..
Javascript - onsubmit
2022. 9. 22. 10:40
JavaScript
onsubmit submit(폼 전송) 이벤트가 발생할 때 실행할 동작을 정의해주는 것이다. 이벤트가 발생하고 리턴값에 따라 submit을 하거나 하지 않거나 함 return의 의미 1. form 전송 이벤트 발생 시 실행할 코드 할당 위와 동일한 코드 form.onsubmit = function() { test(); } 2. form 전송 이벤트 발생 시 코드를 실행하고 결과를 return 위와 동일한 코드 form.onsubmit = function() { return test(); } 정리 return 은 onsubmit 이벤트에 실행할 코드를 할당하는 것과 onsubmit 이벤트에 결과값 true, false 를 리턴 하는 것의 차이다.