더 나은 프로그래머가 되자

jquery - 노드 after,append,last,first,remove 본문

언어/js

jquery - 노드 after,append,last,first,remove

greathuman 2015. 9. 3. 15:19

안녕하세요 초보뺑이입니다

지난시간 설명하지 못했던 몇가지 내용들을 예제로 쉽게 다뤄보겠습니다

 

 

$(function(){
 var i = 0;
 $("#BL .add").click(function(){ 
  if(i==10){return};
  i++;
   $("#BL").append('<li class=li><input type="button" value="' + i +'#"></li>');
 });
 $("#BL .rem").click(function(){   
  if(i==0){return};
  $("#BL li").last().remove();
  i--;  
 });
});

 

 

 

<ul id="BL">
 <li><input class="add" type="button" value="+"> <input class="rem" type="button" value="-"></li>
</ul>

 

 

 

클릭했을때 추가하고 삭제하는 내용인데 어렵지 않습니다

 

append() 이넘은 text() 성격과 다릅니다 html을 그려넣죠

그렇다고 html() 과 ajax() 와는 틀립니다 

쉽게 추가하는것이라 생각하시면 됩니다

비슷한놈중엔 after() 란놈으로 다음자리에 추가시키는 놈이 있습니다

remove() 란 반대 기능을 가진놈도 있습니다

 

 

last() 이놈은 노드의 마지막을 찾아주는 기능입니다

first() 의 반대놈으로 시작점을 찾아주는놈이죠

 

 

음....노드가 무엇일까요 ?

 

중요한 문젠데요...

객체들의 족보입니다

 

이 족보에서 length() 형제가 몇명인지 index() 번호순으로 구할수있고 eq(2) 해당놈을 찾을 수 있습니다

 

또한 쉽게 찾아가서 접근할수도 있습니다

 

현재 자신 $(this)를 중심으로 보고 그림설명해보겠습니다

 

 

 

 

자신의 현재 위치에서

 

자신의 부모노드(parent)

 

자신의 자식노드(child)가 존재할수 있습니다

 

 

parent().parent().parent().parent() 이런식으로 자신의 고조할아버지를 찾아갈수 있고요

 

parent().parent().parent().parent().next() 이런식으로 자신의 고조할아버지 동생에게 접근할수 있습니다

 

고조할아버지와 형제들을 노드라고 생각하시면 됩니다

 

똑같은 방식으로 자신의 손자나 증손자들을 찾아갈 수 있겠죠 ???

 

노드 형제중에 첫째놈이 first() 고 막내놈이 last() 입니다

 

두번째놈은 next().next() 로 구할수있구요 eq(1) 이나 index() 값 2로 구할 수 있습니다

 

형제를 추가하려면 append 를 시키고 형제를 제거하려면 remove 를 하는것이죠

 

직접 호적정리를 해보시면 쉽게 이해하실수있을겁니다

 

 

 

다시한번 말하면 이 모든집합체들을 객체라 하는데

 

이 객체들에겐 id값이나 class값을 줄수 있습니다

 

 

하지만 id값을 중복적으로 사용할 수 없습니다

 

할아버지가 "손오공" 이고 손자가 "손오공" 일수는 없습니다

 

jquery에선 에러가 생깁니다 html에서도 유효성검사에서 에러로 인식하죠

 

 

 

하지만 class는 별명이므로 중복적으로 사용이 가능합니다

 

아시겠죠 ?

 

또...

 

할아버지는 p 태그이고

 

아버지는 span 태그

 

내형제들은 p태그

 

아들은 li 태그

 

손자는 div 태그

 

 

서로 다른 속성이라도 그 노드관계로 잘만 접근한다면 아무 상관없습니다

 

html속에 모든 태그는 한집안으로 생각하시면 됩니다

 

첫번째 노드는 <html>이 되겠죠

 

html 은 시조님정도 되겠네요 ?? 제가 경주최씨니깐 최치원쯤 되겠네요

 

그럼 document는 한글을 만든 세종대왕정도 되겠구요

 

window는 단군쯤 되겠네요 ~~

 

아무튼 <html> 의 자식 노드 형제들은 <head> 와 <body> 가 있습니다

 

그중 <body>놈이 제일 자식을 많이 낫는경우가 많겠네요....

 

이렇게 마크업은 노드 단위로 존재하게 되고 접근할 수 있게 되는겁니다

 

 

jquery는 html 엘레먼트들의 모임? 태그들의 가족관계 ? 객체들의 족보를 노드단위로 접근해

 

쉽게 호적정리를 할 수 있게 해줍니다...

 

 

 

전 이렇게 쉽게 이해하고 싶습니다 흐흐~

 

그럼 단군의 자손 여러분 열심히 공부하시고 좋은정보 많이 공유하시는 한주되세요 ~~  ^^*

 

 

   


 

 

children()

 

 

 

 

 

 

확장 Element의 고유한 자식으로 구성된 확장 집합을 반환한다.

 

 

 

 

 

 

contents()

 

 

 

 

 

 

확장 집합에서 Element의 Contents로 구성된 확장 집합을 반환한다.
여기에는 TextNode도 포함되며 주로 <iframe> Element의 Contents를 얻고자 사용

 

 

 

 

 

 

next()

 

 

 

 

 

 

확장 집합내의 각 확장 Element 바로 다음에 나오는 형제로 구성된

 

 

확장집합 반환.

 

 

 

 

 

 

 

 

 

 

nextAll()

 

 

 

 

 

 

확장 집합내의 각 확장 Element 다음에 나오는 모든 형제로 구성된
확장집합 반환.

 

 

 

 

 

 

parent()

 

 

 

 

 

 

확장 집합내에 있는 모든 확장 Element의 바로 위 부모로 구성된
확장 집합을 반환.

 

 

 

 

 

 

parents()

 

 

 

 

 

 

모든 확장 Element의 조상으로 구성된 확장 집합을 반환한다.
바로 위 부모와 상위의 모든 조상이 포함되지만 문서루트는 미포함.

 

 

 

 

 

 

prev()

 

 

 

 

 

 

확장 집합내의 각 확장 Element 바로 이전에 나오는 형제로 구성된
확장 집합을 반환.

 

 

 

 

 

 

prevAll()

 

 

 

 

 

 

확장 집합내의 각 확장 Element 이전에 나오는 모든 형제로 구성된
확장 집합을 반환.

 

 

 

 

 

 

siblings()

 

 

 

 

 

 

확장 Element의 모든 형제를 포함하는 확장 집합을 반환.

 

 

 

 

 

 

 

 

 

 

 

p태그일경우

 

*

 

 

 

 

 

모든 Element와 매치

 

 

 

 

 

p

태그명이 p인 모든 Element와 매치

 

 

 

 

 

p F

태그명 p인 Element의 자식Element중 태그명 F인 Element와 매치

 

 

 

 

 

p>F

 

 

 

 

 

태그명 p인 Element의 바로아래 자식Element중 태그명 F인 Element와 매치

 

 

 

 

 

p+F

 

 

 

 

 

p의 형제 Element로 바로 다음에 나오는 Element F와 매치

 

 

 

 

 

p~F

 

 

 

 

 

p의 형제 Element로 다음에 나오는 모든 Element F와 매치

 

 

 

 

 

p:has(F)

 

 

 

 

 

태그명이 F인 자손을 하나 이상 가지는 태그명이 p인 모든 Element와 매치

 

 

 

 

 

p.C

 

 

 

 

 

클래스명 C를 가지는 모든 Element p와 매치. E의 생략은è *.C

 

 

 

 

 

p#I

 

 

 

 

 

아이디가 I인 Element p와 매치. p의 생략은 è *#I

 

 

 

 

 

p[A]

 

 

 

 

 

Attribute A를 가지는 모든 Element p와 매치

 

 

 

 

 

p[A=V]

 

 

 

 

 

값이 V인 Attribute A를 가지는 모든 Element p와 매치

 

 

 

 

 

p[A^=V]

 

 

 

 

 

값이 V로 시작하는 Attribute A를 가지는 모든 Element p와 매치

 

 

 

 

 

p[A$=V]

 

 

 

 

 

값이 V로 끝나는 Attribute A를 가지는 모든 Element p와 매치

 

 

 

 

 

p[A*=V]

 

 

 

 

 

값에 V를 포함하는 Attribute A를 가지는 모든 Element p와 매치

 

 

 

 

 



 

예 -> $(“p > span”)

[출처] 33강. jquery - 노드 after,append,last,first,remove (웹의 하루) |작성자 뺑이

 

저작자표시 (새창열림)

'언어 > js' 카테고리의 다른 글

jquery on() 동적 이벤트 처리  (0) 2016.02.26
winow.open할때 새창으로 폼 값 submit  (0) 2016.02.01
형제관련 메소드 jquery traversing - siblings  (0) 2015.09.01
스크롤 따라다니는 퀵메뉴  (0) 2015.06.04
[플러그인] form 디자인 변경 플러그인(select,input,textarea,radio)  (0) 2015.05.29
'언어/js' Related Articles more
Comments