jQuery에서 이름으로 선택

오늘의 게시물은 jQuery에서 name 속성을 사용하여 요소를 선택하는 방법을 알려드립니다.

jQuery에서 이름으로 선택

CSS 사양을 사용하면 속성을 기반으로 요소를 식별할 수 있습니다. 일부 이전 브라우저는 문서 디자인 목적으로 이를 지원하지 않지만 jQuery를 사용하면 브라우저에 관계없이 사용할 수 있습니다.

아래의 속성 선택기를 사용할 때 이러한 선택기는 속성 값을 단일 문자열로 보기 때문에 공백으로 구분된 여러 값이 있는 속성을 알고 있어야 합니다.

다음은 name 속성을 사용하여 속성을 선택하는 방법입니다.

1. Attribute Prefix Selector [name|="value"] - 지정된 속성이 같거나 하이픈이 오는 지정된 문자열로 시작하는 항목을 선택합니다.
2. Attribute Selector [name*="value"] - 지정된 하위 문자열을 포함하는 값으로 지정된 속성을 가진 항목을 선택합니다.
3. Attribute Word Selector [name~="value"] - 공백으로 구분된 특정 단어를 포함하는 값으로 지정된 속성을 가진 항목을 선택합니다.
4. Attribute Ends With Selector [name$="value"] - 정확히 하나의 특정 문자열로 끝나는 값을 가진 지정된 속성을 가진 항목을 선택합니다. 비교는 대/소문자를 구분합니다.
5. Attribute Equals Selector [name="value"] - 지정된 값과 정확히 동일한 값을 가진 지정된 속성을 가진 항목을 선택합니다.
6. Attribute Starts With Selector [name^="value"] - 정확히 하나의 지정된 문자열로 시작하는 값을 가진 지정된 속성을 가진 항목을 선택합니다.

다음 예를 통해 이해해 봅시다.

<button name="btn-0" value="hello world">Hello World!</button>

console.log($('[name="btn-0"]').val());
console.log($('[name^="btn"]').val());
console.log($('[name$="-0"]').val());
console.log($('[name*="tn-0"]').val());

위의 예에서 btn-0이라는 이름과 hello world 값을 가진 하나의 버튼을 정의했습니다. 4가지 방법으로 버튼을 선택할 수 있습니다.

첫 번째는 버튼의 정확한 이름을 사용하여 버튼을 선택합니다. 두 번째는 이름이 btn으로 시작하는 버튼을 선택합니다.

세 번째는 값이 -0으로 끝나는 버튼을 선택합니다. 그리고 마지막은 이름 속성에 tn-0이 포함된 버튼을 선택합니다.

jQuery를 지원하는 모든 브라우저에서 위의 코드 스니펫을 실행하십시오. 아래 결과가 표시됩니다.

출력:

"hello world"
"hello world"
"hello world"
"hello world"

데모