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' 클래스를 가진 모든 요소와 일치합니다.

속성 선택기를 사용하는 것 외에도 .attr() 메서드를 사용하여 요소의 속성 값을 가져오거나 설정할 수도 있습니다. 이 메서드는 속성 이름과 선택적 새 속성 값을 매개 변수로 받아들입니다. 새 속성 값을 지정하지 않으면 현재 속성 값이 반환됩니다. 🎜🎜다음은 .attr() 메서드를 사용하여 요소의 속성 값을 가져오고 설정하는 방법을 보여주는 예입니다. 🎜

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

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

🎜이 예에서는 attr() 메서드를 사용하여 alt 속성을 가져오거나 설정합니다. 첫 번째 이미지 요소의 먼저 $('img:first') 선택기를 사용하여 첫 번째 이미지 요소를 선택합니다. 그런 다음 .attr('alt') 메서드를 사용하여 alt 속성 값을 가져와서 altText 변수에 저장합니다. 다음으로, 새 속성 값 '이미지 설명'을 .attr() 메서드에 전달하여 새 alt 속성 값을 설정합니다. 🎜🎜요약하자면 속성 쿼리는 jQuery에서 가장 일반적으로 사용되는 선택기 중 하나이며 특정 속성 값을 가진 요소를 선택하는 데 사용됩니다. 또한 .attr() 메서드를 사용하여 요소의 속성 값을 가져오거나 설정할 수도 있습니다. 이러한 기능은 매우 실용적이며 문서 작업을 크게 단순화하여 JavaScript 프로그래밍을 더 쉽고 편리하게 만듭니다. 🎜

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