jQuery 핵심 - 노드 다루기

 


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://egloos.zum.com/survival/v/464374

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
20 [nest.js] [NestJS] NestJS 구조 이해를 위한 필수 개념 정리 - Node.js/TypeScript/Express 비교 포함 file 졸리운_곰 2025.12.12 501
19 [node.js 개발] Apache Reverse Proxy 설정(아파치와 노드 연동) file 졸리운_곰 2024.03.17 300
18 [node.js 개발] PM2로 Node.js 앱 프로세스 배포하기 file 졸리운_곰 2024.03.16 405
17 [node.js 개발] PM2를 활용한 Node.js 무중단 서비스하기 file 졸리운_곰 2024.03.16 517
16 [node.js 응용] Next.js : Next.js14에 Mysql연결하기 졸리운_곰 2024.03.03 379
15 [node.js 응용] Node.js에서 다른 파일의 함수를 "include" 하는 방법 졸리운_곰 2024.02.28 428
14 [node.js 응용] NodeJS 에서 mqtt 사용하기 file 졸리운_곰 2024.02.23 399
13 [node.js 응용] Next.js 기본 개념정리 file 졸리운_곰 2024.02.23 432
12 [node.js 응용] ejs 사용설명서 file 졸리운_곰 2023.11.25 371
11 [node.js 응용] Build a Node.js Proxy Server in Under 10 minutes! file 졸리운_곰 2023.05.07 468
10 [node.js 응용] node - pm2로 node.js 프로세스 관리하기 - 기본 명령어, 실행하기 file 졸리운_곰 2023.04.25 407
9 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 2/2 졸리운_곰 2023.03.31 231
8 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 1/2 file 졸리운_곰 2023.03.31 484
7 [node.js 응용] PM2 - Node.js 프로세스 관리 도구 file 졸리운_곰 2021.12.10 410
6 [node.js][nodejs] [Linux] 리눅스 내 Node.js 및 NPM 최신 버전으로 유지하기 file 졸리운_곰 2021.10.11 484
5 [node.js][typescript] 5분 안에 보는 TypeScript file 졸리운_곰 2021.07.03 428
4 Getting started with RabbitMQ and Node.js file 졸리운_곰 2019.05.09 466
3 [Node.js + RabbitMQ] Node.js + socket.io + RabbitMQ 이용한 실시간 메시지 처리 file 졸리운_곰 2019.05.09 352
2 node.js 서버 장애시 자동 재시작 설정 [forever 사용] 졸리운_곰 2019.01.24 884
1 Express 앱용 프로세스 관리자 졸리운_곰 2018.10.16 603
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED