jQuery를 사용한 요소 결합하기

jQuery의 add() 메서드는 선택한 요소 집합에 새로운 요소를 추가하는 데 사용됩니다. 이를 통해 다양한 선택자를 결합하여 원하는 요소를 한 번에 선택할 수 있습니다. 아래 예제를 통해 add() 메서드를 사용하여 요소를 결합하는 방법을 살펴보겠습니다.

예제 1: 리스트와 문단 요소를 결합하여 스타일 적용하기

$(document).ready(function() {
    $("li").add("p").css("color", "blue");
});

이 예제는 페이지에서 모든 리스트와 문단 요소를 선택하고, 선택된 요소들의 글꼴 색상을 파란색으로 변경합니다.

예제 2: 특정 클래스를 가진 요소와 결합하여 이벤트 추가하기

$(document).ready(function() {
    $(".highlight").add("button").click(function() {
        alert("클릭되었습니다!");
    });
});

이 예제는 "highlight" 클래스를 가진 요소와 모든 버튼 요소를 선택하고, 클릭 이벤트가 발생하면 알림창을 띄웁니다.

예제 3: 특정 ID를 가진 요소와 결합하여 스타일 변경하기

$(document).ready(function() {
    $("#section1").add("h2").css("font-weight", "bold");
});

이 예제는 id가 "section1"인 요소와 모든 h2 요소를 선택하고, 선택된 요소들의 글꼴 두껍게 설정합니다.