JS 관련/JQuery

[jQuery] 엘리먼트 제거( remove(), empty(), detach() )

엘리먼트 제거 remove empty detach ​ ​ ​ ​ $("p:eq(0)").click(function(){ // remove : 삭제 $(this).remove(); }); remove는 말그대로 삭제입니다. ​ ​ ​ ​ $("p:eq(1)").click(function(){ // empty : 내부요소 삭제 $(this).parent().empty(); }); empty는 내부요소 삭제입니다. (this) 자신의 parent() 부모의 내부요소니까 형제요소들을 전부 삭제하겠죠? ​ ​ ​ ​ $("p:eq(2)").click(function(){ // detach : 잘라내기 var ele = $(this).detach(); $("h1").append(ele); }); detach는 잘라..

[jQuery] wrap(), wrapInner(), wrapAll()

국비지원 훈련검색 기관검색 질문답변 과정후기 a b c d e ​ ​ ​ ​ var $box = $("").addClass("box"); $(".sub_menu:first").wrap($box); $(".sub_menu").click(function(){ $(".sub_menu").each(function(){ if($(this).parent().is(".box")){ $(this).unwrap(".box"); } }); $(this).wrap($box); }); 페이지가 시작되면 sub_menu class중 가장 첫번째에 box class를 만듭니다. 다른 class를 클릭하면 해당 클래스에 빨간 박스가 생깁니다. 그리고 클릭된 영역 이외에 있던 빨간 박스는 unwrqp()로 인해 사라집니다. ​ ​ ..

[jQuery] 외부 삽입 메서드( after(), insertAfter(), before(), insertBefore() )

after insertAfter before insertBefore 외부 삽입 메서드 ​ ​ ​ $("button:eq(0)").click(function(){ $("#base").after("새로운 엘리먼트(after)"); }); 외부 삽입 메서드라는 text를 감싸고있는 태그는 id가 base인 div태그가 감싸고 있습니다. 첫번째 버튼을 누르게 되면 div영역 뒤에 새로운 엘리먼트가 생성됩니다. ​ ​ ​ ​ $("button:eq(1)").click(function(){ $("새로운 엘리먼트(insertAfter)").insertAfter("#base"); }); 해당 함수도 div태그 뒤에 새로운 엘리먼트를 생성합니다. ​ ​ ​ ​ $("button:eq(2)").click(function(..

[jQuery] append()와 toggleClass()

오늘 공부 뭐하지? start ​ ​ ​ ​ setInterval(function(){ var div = $("#menu"); $(".active").first().appendTo(div); }, 50); 해당 한수는 클래스가 active인것들의 첫번째를 div의 가장 마지막으로 보냅니다. 하지만 모든 img에는 class가 없습니다. $("button").click(function(){ $("img").toggleClass("active"); if ($("button").text() == "start"){ $("button").text("stop"); } else { $("button").text("start"); } }); 버튼을 클릭하게 되면 toggleClass메서드로 인해 active라는 클래스..

[jQuery] prepend(), append()

$("selector").prepend : selector의 자식요소 맨 앞에 추가 $("selector").append : selector의 자식요소 맨 뒤에 추가 prepend append html text 내부 삽입 1 내부 삽입 2 ​ ​ ​ $("button:eq(0)").click(function(){ $("div").prepend($("").addClass("prepend").text("prepend"+(cnt++))); }); $("")는 createElement("p");와 같은 의미입니다. 태그를 생성하여 태그의 가장 앞에 추가합니다. ​ ​ ​ $("button:eq(1)").click(function(){ $("div").append($("").addClass("append").te..

[jQuery] replaceWith(), replaceAll()

DOM 대체 바꾸기 (replaceWith) 바꾸기 (replaceAll) ​ ​ $("button:first").click(function(){ $("p").replaceWith("replaceWith"); }); 첫번쨰 버튼을 누르면 태그 영역을 replaceWith로 대체합니다. ​ ​ ​ $("button:last").click(function(){ $("replaceAll").replaceAll("p"); }); 두번째 버튼을 누르면 replaceAll로 대체합니다. ​

[jQuery] toggleClass(), hasClass(), removeClass(), addClass()

image on/off ​ ​ ​ ​ 처음 실행되었을때는 모든 이미지에 class속성이 없습니다. 하지만 버튼을 누르게 되면 이미지가 사라지면서 class 속성이 생깁니다. ​ $("#btn").click(function(){ $("img").toggleClass("onOffImg"); }); 우선 버튼을 클릭하면 이런 함수가 실행이 됩니다. toggleClass()라는 메서드로 인해 함수가 실행이 될때마다 class속성이 생겼다가 없어졌다가 합니다. ​ $("img").click(function(){ if($(this).hasClass("addSize")){ $(this).removeClass("addSize"); } else{ $(this).addClass("addSize"); } }); 또 이 함수..

[jQuery] 메뉴 숨기기 보이기( 이펙트 메서드 활용 )

메뉴 만들기 css선택자 tag로 선택 id로 선택 class로 선택 parent로 선택 parent > child로 선택 :nth-child(n/odd/even) :first-child :last-child 속성선택자 [attr] [attr=value] [attr!=value] 폼선택자 input:type 사용자정의선택자 :eq(n) :first :last :even :odd :parent ​ ​ ​ $(function(){ $("b").click(function(){ $(this).next().slideToggle().parent().siblings().find("ul").slideUp(); }); }); 이 간단해 보이는 함수 하나로 인해서 태그로 감싸져 있는 텍스트를 클릭하면 이벤트가 발생을 합니..

[jQuery] 이펙트 메서드( animate() )

Run 해당 코드는 animate 효과를 순차적으로 줘서 애니메이션처럼 움직이는 코드입니다. ​ ​ 사각형이 움직여요!

jQuery] 이펙트 메서드( slide, fade, animate )

이펙트 메서드 hide() show() toggle() slideUp() slideDown() slideToggle() fadeOut() fadeIn() fadeTo() fadeToggle() animate() ​ ​ ​ ​ $("b").click(function(){ $("p").toggle(); $("p").each(function(i){ $(this).animate({ "top": 50 * (i + 1) + "px" }, 1000); }); }); div영역은 숨겨져 있습니다. 하지만 위의 코드로인해 이펙트 메서드라는 텍스트를 클릭하면 다시 보이게 됩니다. ​ 이제 각각의 이펙트 메서드들의 효과를 하나씩 볼까요? if(ele.is("p:contains(hide)")){ $("img").hide();..