본문 바로가기
웹관련/JavaScript-Jquery

[Jquery] 노드찾기

by 착한덕환 2018. 5. 30.



제이쿼리 하면서 가장 중요한 요소에 대한 노드찾기....

좋은 자료를 발견하여 스크립트 해놓습니다...

출처는 맨 하단에 있으니 참고하시길... ^^


1. 노드 찾기


 - 태그 이름으로 노드 찾기 :  $("태그이름"),   $("선택자")

 - 클래스 이름으로 노드 찾기 : $(".클래스이름")

 - ID로 노드 찾기 : $("선택자")

 - 속성으로 노드 찾기 : $("[속성이름=값]")

 - 찾은 요소 개수 구하기 :  .size()    ,     .length

 - 찾은 요소 n번째 접근하기 : .eq(index)    ,    .each(function(index){});

 - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")

 - 찾은 요소에서 특정 자식요소만 찾기 :  .find("선택자")


2. 자식 노드 찾기 


 - 전체 자식 노드 찾기

    -- 텍스트 노드 포함 전체 자식 노드 찾기 :  $("선택자").contents()

    -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")


 - n번째 자식 노드 접근

    -- $("선택자").children().eq(N)

    -- $("선택자").children(":eq(N)")


 - 첫번째 자식 노드 접근

    -- $("선택자").children().first()

    -- $("선택자").children(":first")

    -- $("선택자").children().eq(0)

    -- $("선택자").children(":eq(0)")


 - 마지막 자식 노드 접근

    -- $("선택자").children().last()

    -- $("선택자").children(":last")

 

3. 부모 노드 찾기

 

 - 바로 위의 부모 : $("선택자").parent()


 - 모든 부모 찾기

    -- $("선택자").parents()  모든 부모

 - 모든 부모 중 선택자에 해당하는 부모 찾기

    -- $("선택자").parents("선택자")


4. 형제 노드 찾기


 - 이전 형제 노드 찾기

    -- $("선택자").prev()

    -- $("선택자").prevAll("선택자");


 - 다음 형제 노드 찾기

    -- $("선택자").next()

    -- $("선택자").nextAll("선택자");


5. 노드 생성,추가,이동,삭제


 - 생성

    -- $("노드")

    -- $("선택자").html("<노드>...</노드>")

    -- $("노드").clone()


 - 추가

    -- $기준노드.append($추가노드)

    -- $추가노드.appendTo($기준노드)

    -- $기준노드.prepend($추가노드)  

    -- $추가노드.prependTo($기준노드)

    -- $추가노드.insertBefore($기준노드)

    -- $기준노드.before($추가노드)

    -- $추가노드.insertAfter($기준노드)

    -- $기준노드.after($추가노드)


 - 삭제

    -- $("선택자").remove()


 - 이동

    -- $기준노드.append($이동노드)  

    -- $이동노드.appendTo($기준노드)

    -- $이동노드.insertBefore($기준노드)

    -- $기준노드.before($이동노드)

    -- $이동노드.insertAfter($기준노드)   

    -- $기준노드.after($이동노드)


6. 텍스트 노드 다루기


 - 텍스트 노드 생성 : $("텍스트") 

 - 텍스트 노드 추가 : $기준노드.append("텍스트")

 - 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")



출처 : http://survival.egloos.com/464374#comment_464374

댓글