jQuery의 :contains() 선택자

jQuery의 :contains() 선택자는 지정한 텍스트를 포함하는 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 특정한 텍스트를 가진 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다.

예제 1: 특정 텍스트를 포함하는 요소 선택하기

<p>안녕하세요, jQuery를 배우는 중입니다.</p>
<p>jQuery를 사용하여 다양한 작업을 할 수 있습니다.</p>

$("p:contains('jQuery')").addClass("highlight");

이 예제는 "jQuery"라는 텍스트를 포함하는 p 요소를 선택하여 "highlight" 클래스를 추가합니다.

예제 2: 특정 텍스트를 가진 버튼 요소 선택하기

<button>로그인</button>
<button>회원가입</button>
<button>로그아웃</button>

$("button:contains('로그인')").addClass("login-button");

이 예제는 "로그인"이라는 텍스트를 포함하는 버튼 요소를 선택하여 "login-button" 클래스를 추가합니다.

예제 3: 특정 텍스트를 가진 링크 요소 선택하기

<a href="#">프로필</a>
<a href="#">쇼핑</a>
<a href="#">설정</a>

$("a:contains('프로필')").addClass("profile-link");

이 예제는 "프로필"이라는 텍스트를 포함하는 링크 요소를 선택하여 "profile-link" 클래스를 추가합니다.

jQuery의 :contains() 선택자를 활용하면 웹 페이지에서 특정한 텍스트를 가진 요소를 쉽게 선택하여 스타일이나 동작을 조작할 수 있습니다.