Jquery에서 속성 쿼리를 사용하는 방법

jQuery는 HTML 및 CSS DOM을 조작하기 위해 널리 사용되는 JavaScript 라이브러리이며 많은 유용한 기능을 제공합니다. 그러한 기능 중 하나는 속성 쿼리를 사용하여 요소의 속성 값을 가져오거나 설정하는 것입니다.

속성 쿼리는 속성 이름과 선택적 속성 값을 매개변수로 받아들이는 선택기입니다. 지정된 속성을 가진 모든 요소를 ​​반환합니다. 다음은 jQuery의 속성 선택기를 사용하는 방법을 보여주는 간단한 예입니다.

// 获取所有带有'data-role'属性的div元素
var divs = $('div[data-role]');

// 获取所有标签名为'a', 并且target属性值等于'_blank'的a元素
var links = $('a[target="_blank"]');

위의 두 예에서 $() 함수는 jQuery 객체를 생성하는 데 사용되었으며 전달된 매개 변수는 CSS 선택기입니다. 이러한 CSS 선택자 중에서 속성 선택자는 대괄호를 사용하여 정의됩니다. 예를 들어, [data-role]은 'data-role' 속성이 있는 모든 요소와 일치하는 반면, [target="_blank"]는 '_blank'와 동일한 대상 속성 값을 가진 요소만 일치합니다.

속성 쿼리에는 다음 연산자와 값을 사용할 수 있습니다.

• =: 지정된 속성 값이 동일한 요소를 일치시킵니다. 예를 들어, [target="_blank"]는 대상 속성 값이 '_blank'인 요소를 나타냅니다. =: 匹配指定属性值相等的元素。例如，[target="_blank"]表示目标属性值为'_blank'的元素。
• !=: 匹配指定属性值不等于的元素。例如，[type!="text"]表示除了类型为'text'的输入框以外的所有元素。
• ^=: 匹配指定属性值以给定值开头的元素。例如，[href^="https://"]将匹配所有'https://'开头的超链接。
• $=: 匹配指定属性值以给定值结尾的元素。例如，[href$=".pdf"]会匹配所有PDF文件的链接。
• *=
!=: 값이 지정된 속성과 동일하지 않은 요소와 일치합니다. 예를 들어, [type!="text"]는 'text' 유형의 입력 상자를 제외한 모든 요소를 ​​의미합니다.

^=: 지정된 속성 값이 지정된 값으로 시작하는 요소와 일치합니다. 예를 들어, [href^="https://"]는 'https://'로 시작하는 모든 하이퍼링크와 일치합니다.

$=: 지정된 속성 값이 지정된 값으로 끝나는 요소와 일치합니다. 예를 들어, [href$=".pdf"]는 모든 PDF 파일에 대한 링크를 일치시킵니다.

*=: 지정된 속성 값에 지정된 문자열이 포함된 요소와 일치합니다. 예를 들어, [class*="active"]는 'active' 클래스를 가진 모든 요소와 일치합니다.

// 获取第一个图片元素的alt属性值
var altText = $('img:first').attr('alt');

// 设置第一个图片元素的alt属性值为'图片描述'
$('img:first').attr('alt', '图片描述');

위 내용은 Jquery에서 속성 쿼리를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!