jQuery+CSS+HTML 공부.
'HeadFirst JQuery' 4장 웹 페이지 조작 예제 따라하기.

'채식주의자용' 버튼을 클릭하면 생선류가 들어간 메뉴는 빼버리고 고기류는 두부로 교체하며 '다진 마늘, 참기름, 후춧가루'은 '양념'으로 교체한다.
'원래 메뉴' 버튼을 클릭하면 원래의 메뉴로 돌아간다.

14/8/16 토

오늘의 jQuery 공부 -DOM조작하기.

* .remove() .detach() .empty() .replaceWith() 메서드:
.remove()는 선택한 요소를 자식요소까지 완전히 제거.
.detach()는 선택한 요소를 DOM에서 제거하긴 하나 요소를 기억하고 있어 나중에 다시 삽입이 가능.
ex) $imsi = $(".className").detach(); 클래스 명이 picture인 요소를 모두 찾아서 $imsi란 변수에 배열로 저장
.empty()는 선택한 요소는 제거하지 않고 요소안의 내용을 제거.
.replaceWith() 선택한 요소의 내용을 다른 요소로 변경.
ex) $(".picture").replaceWith("<img src='filename.jpg'>"); 클래스 명이 picture인 요소를 모두 찾아서 이미지로 변경시킨다.

* .before() .after() 메서드:
.before(): 선택한 요소의 앞에 내용 삽입.
.after(): 선택한 요소의 뒤에 내용 삽입.
ex) $("#idName").after("<img src='filename.jpg'>"); 아이디 명이 idName인 요소의 뒤에 이미지 삽입.

* .wrap() .find() 메서드:
.wrap(): 선택 요소 안의 요소를 래퍼로 감싸기.
ex) $("img#ww").wrap("<a href='http://www.windsworld.co.kr></a>");
.find(): 배열에서 요소 찾기.
ex) var $liArr = $("li");
    $liArr.find("a"); // liArr 배열에서 a 요소 모두 찾기.

* DOM 이동 메서드:
.parent(): 선택한 요소의 상위 요소 선택.
.children(): 선택한 요소의 자식 요소 선택 .
.prev(): 선택한 요소의 왼쪽 형제 요소 선택.
.next(): 선택한 요소의 오른쪽 형제 요소 선택.
.parents(): 선택한 요소의 모든 조상 요소 선택.
.siblings(): 선택한 요소의 모든 형제 요소 선택.
.closest(): 선택한 요소에서 가장 가까운 부모 요소 선택.
ex) $(this).closest(#idName): 현재 요소의 상위 요소중 id가 "idName"인 가장 가까운 요소 선택

* 필터 메서드:
.first(): 선택 요소 중 첫 요소만 남김.
.last(): 선택 요소 중 마지막 요소만 남김.
.eq(): 선택 요소 중 인덱스번호가 괄호안 숫자와 일치하는 요소만 남김.
.slice(): 괄호안에 지정한 2 인덱스 사이의 요소만 남김.
ex) var k = [a,b,c,d,e,f,g];
    k.slice(2); //c,d,e,f,g
    k.slice(2,5); //c,d,e
.filter(): 괄호안에 지정한 선택자와 일치하는 요소만 남김.
.not(): 선택자와 일치하지 않는 요소만 남김.

* 메서드 체인을 이용해 연속 이동도 가능하다.
ex) $(".className").parent().parent(); className의 할아버지 요소 선택.
    $(".className").parent().next().remove(); className의 부모 요소의 오른쪽 형제 요소를 제거.

//jQuery 코드(간략화): 
var v = false;
$("button#vegOn").click(function(){
	if(v==false){
		$f = $('li.fish').parent().parent().detach();
		$(".yangnyum").replaceWith("<li class=ch>양념</li>");
		$(".meat").after("<li class='tofu'><strong>두부</strong></li>");
		$m = $('.meat').detach();
		v=true;
	}
});
$("button#restoreMe").click(function(){
	if(v==true){
		v=false;
		$(".menuEntrees li").first().before($f);
		$(".ch").replaceWith("<li class='yangnyum'>다진 마늘 등</li>");
		$(".tofu").each(function(i){
			$(this).after($m[i]);
		});
		$(".tofu").remove();
	}
});