-
메소드 체이닝(Method Chaining)프로그래밍/JQuery 2022. 10. 22. 21:30728x90
메소드 체이닝이란 요소에 여러 메소드가 체인 형식으로 연결되어 있는 것을 의미하며, 연관되어있는 요소와 요소간 메소드를 연속적으로 호출하기 위해 사용되는 방식이다.
메소드 체이닝을 활용하면 코드가 간결해져 하나의 문장처럼 읽기 쉽고, 장기적 유지보수가 쉬워지지만 하나의 라인에 너무 많은 작업이 일어날 수 있다.
종류 설명 add() 특정 요소를 추가로 선택할 때 사용 children() 매개변수로 전달된 요소를 하위 요소에서 찾아주며,
매개변수를 전달하지 않으면 하위 요소의 모든 요소를 선택함addBack() 현재 선택한 요소와 함꼐 이전에 선택한 요소도 선택함 find() 선택한 요소의 자손 요소 중에서 전달 받은 선택자에 해당하는 자손 요소를 모두 선택하고
별표(*)를 인수로 전달하여 선택한 자손 요소를 모두 선택end() 현재 연속적인 명령(메소드 체이닝)을 종료하고 선택 집합의 이전 요소를 찾아 반환 is() 인수로 전달된 요소가 존재하는 지 여부(true, false)를 리턴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>메소드 체이닝</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script> $(function(){ $('#m1 > div').add('#m1 > p').css('border', '3px solid red'); // #m1의 자식 div와 #m1의 자식 p에 스타일 적용 $('#m2').children('p').addBack().css('border', '3px solid deeppink'); // #m2 의 자식 p와 본인에게 스타일 적용 $('#m3').find('span').css('border', '3px solid deepskyblue').end().find('em').css('border', '3px solid yellow'); // #m3의 자손 중 span에 스타일을 적용하고 #m3의 자손 중 em에 스타일 적용 //end() : 다시 첫 요소인 $('#m3')로 돌아감 if($('#m4').children().is('p')){ console.log('p요소가 존재함'); }else{ console.log('p요소가 존재하지않음') } // #m4의 자식 중 p가 존재 여부 확인 }); </script> </head> <body> <div id="m1"> <div>내용 1 - 1</div> <p>내용 1 - 2</p> </div> <div id="m2"> <p>내용 2</p> </div> <div id="m3"> <span>내용 3 - 1</span> <em>내용 3 - 2</em> </div> <div id="m4"> <p>내용 4</p> </div> </body> </html>
결과 화면 
F12 콘솔 확인 728x90'프로그래밍 > JQuery' 카테고리의 다른 글
JQuery로 DOM 다루기 - 요소 포함 (0) 2022.10.25 JQuery로 DOM 다루기 - 요소 추가 (0) 2022.10.23 요소 접근 메소드 (0) 2022.10.19 선택자 (0) 2022.10.18 함수 (0) 2022.10.17