jQuery - jQeury를 사용해 쿠키 관리하기(읽기, 생성, 삭제, 생명주기)
2022. 12. 30. 14:19
JavaScript/jQuery
쿠키 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일입니다. 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있습니다. [jQuery] 다운로드 및 설치 방법 를 통해 jquery를 다운 받습니다. https://plugins.jquery.com/cookie/ jQuery Cookie 플러그인을 다운 받습니다. 다운로드 받은 js 파일을 페이지에 포함 시킵니다. jquery 플러그인 이므로 jquery 도 있어야 합니다. 쿠키 만들기 // 세션 쿠키 생성 - 브라우저를 닫으면 없으집니다. $.cookie('name', 'value'); // 7일 뒤에 만료되는 쿠키 생성 $.cookie('name', '..
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의 선택자를 이용해서 간편하게 접근할 수 있습니다. 페이지의 보여지는 모습을 변경하기 쉽다.동적으로 페이..
jQuery - .attr() 함수
2022. 9. 4. 15:04
JavaScript/jQuery
함수 사용법 .attr(attributeName) // 속성값 가져오기 .attr(attributeName, val) // 속성값 제어하기 // 속성값 가져오기 //div 요소의 id 속성의 값을 가져옴 $('div').attr('id'); //id 요소가 "test" 인 placeholder 속성 값을 가져옴 $('#test').attr('placeholder'); //body 요소의 class 속성의 값을 가져옴 $('body').attr('class'); //id 요소가 "test1" 인 value 속성 값을 가져옴 $('#test1').attr('value'); //속성값 제어하기 //div 요소의 id 속성의 값을 'Tistory'로 변경하기 $('div').attr('id', 'Tistory'..
jQuery - 양식 제출
2022. 9. 4. 14:55
JavaScript/jQuery
$('form#myForm').submit(); 해당 form 에 action url을 선언 후 .submit() 를 실행하면, 위 소스에서처럼 main/search 라는 컨트롤러를 찾아서 검색을 실행하게 연동할 수 있습니다. url은 언제든 원하는대로 변경해서 호출하면 form을 넘겨서 처리할 수 있습니다!