jQuery 속성 값이 특정 값과 다른 경우 선택하기: [name!="value"]

jQuery의 속성 값이 특정 값과 다른 경우를 선택하는 선택자([name!="value"])는 웹 페이지에서 특정한 값을 가지지 않는 요소를 선택할 때 사용됩니다. 이 선택자를 사용하면 특정 값을 제외한 요소를 선택할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다.

예제 1: 클래스가 "inactive"가 아닌 요소 선택

<div class="item active">Item 1</div>
<div class="item">Item 2</div>
<div class="item inactive">Item 3</div>

$("div[class!='inactive']").addClass("active-item");

이 예제는 클래스가 "inactive"가 아닌 요소들을 선택하여 "active-item" 클래스를 추가합니다.

예제 2: ID가 "username"이 아닌 입력 필드 선택

<input type="text" id="username" placeholder="Enter your username">
<input type="text" id="email" placeholder="Enter your email">

$("input[id!='username']").addClass("input-highlight");

이 예제는 ID가 "username"이 아닌 입력 필드를 선택하여 "input-highlight" 클래스를 추가합니다.

예제 3: href 속성 값이 "https://www.example.com"이 아닌 링크 선택

<a href="https://www.example.com">Example Link</a>
<a href="https://www.anotherlink.com">Another Link</a>

$("a[href!='https://www.example.com']").addClass("external-link");

이 예제는 href 속성 값이 "https://www.example.com"이 아닌 링크를 선택하여 "external-link" 클래스를 추가합니다.

jQuery의 [name!="value"] 선택자를 활용하면 특정 값을 제외한 요소를 쉽게 선택하여 스타일이나 동작을 조작할 수 있습니다.