집 >웹 프론트엔드 >CSS 튜토리얼 >is 및 where 선택기의 원리와 실제 적용에 대한 심층적인 이해

is 및 where 선택기의 원리와 실제 적용에 대한 심층적인 이해

WBOY원래의: 2023-09-09 17:54:29669검색

DOM 작업 및 이벤트 처리에 jQuery를 사용할 때 선택기는 우리가 자주 사용하는 도구 중 하나입니다. 특히 복잡한 DOM 구조를 처리할 때 is 및 where 선택기는 보다 유연하고 효율적인 선택 방법을 제공할 수 있습니다. 이 기사에서는 is 및 where 선택기의 원리를 깊이 탐구하고 실제 적용을 통해 강력한 기능을 보여줍니다.

1. is 선택기의 원리와 실제 적용

Principle
is 선택기는 요소 집합에 지정된 선택기가 있는지 여부를 일치시키는 데 사용되는 방법입니다. 요소 컬렉션을 순회하고 지정된 선택기를 실행하여 각 요소와 일치하면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 판단 조건은 참 또는 거짓만 반환하면 되므로 is 선택자는 실행 중에 조기에 종료될 수 있습니다.
실용 적용
(1) 요소에 지정된 CSS 클래스 이름이 있는지 확인
```
if($('div').is('.active')) {
 // 执行操作
}
```
위 코드에서 is 선택기는 모든 div 요소를 순회하고 CSS 클래스 이름이 'active'인지 확인합니다. 존재하는 경우 해당 작업을 수행하십시오.

(2) 요소가 지정된 선택기 설명에 속하는지 확인

if($('div').is(':visible')) {
    // 执行操作
}

위 코드에서 is 선택기는 모든 div 요소를 순회하여 선택기 설명 ':visible'에 속하는지 확인합니다. 해당하는 경우 해당 작업을 수행합니다.

2. where 선택기의 원리와 실제 적용

Principle
where 선택기는 지정된 조건을 충족하는 요소 모음에서 요소를 필터링하는 데 사용되는 방법입니다. 요소 컬렉션을 순회하고 각 요소에 대해 지정된 조건을 실행합니다. 조건이 충족되면 요소가 새 컬렉션에 추가되고 반환됩니다.
실용 적용
(1) 특정 속성이 있는 모든 요소 필터링
```
var result = $('div').where('[data-name]');
// result包含所有具有data-name属性的div元素
```
위 코드에서 where 선택기는 모든 div 요소를 순회하고 데이터 이름 속성이 있는 요소를 필터링한 다음 새 컬렉션 반환에 추가합니다.

(2) 지정된 텍스트가 포함된 모든 요소 필터링

var result = $('div').where(':contains("Hello")');
// result包含所有包含"Hello"文本的div元素

위 코드에서 where 선택기는 모든 div 요소를 순회하고 "Hello" 텍스트가 포함된 요소를 필터링하여 새 컬렉션 반환에 추가합니다.

3. 코드 예제
다음은 간단한 예제를 사용하여 is 및 where 선택기의 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery is与where选择器示例</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // 判断是否有active类
            if($('div').is('.active')) {
                $('div.active').css('color', 'red');
            }
            
            // 获取所有自定义属性为data-id的元素
            var result = $('div').where('[data-id]');
            console.log(result);
            
            // 获取所有包含'Hello'文本的元素
            var result = $('div').where(':contains("Hello")');
            console.log(result);
        });
    </script>
    <style>
        .active {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="active">Hello, World!</div>
    <div data-id="1"></div>
    <div data-id="2">Hello, jQuery!</div>
    <div>Hello</div>
    <div>World</div>
</body>
</html>

위 코드에서는 is 선택기를 사용하여 CSS 클래스 이름이 'active'인 div 요소가 있는지 확인하고 배경색을 노란색으로 설정했습니다. where 선택기를 사용하여 data-id 속성이 있고 'Hello' 텍스트가 포함된 div 요소를 필터링하고 결과를 각각 인쇄합니다.

요약:
이 글의 소개를 통해 우리는 is 선택자와 where 선택자의 원리와 실제 적용에 대해 깊이 이해했습니다. 요소에 지정된 CSS 클래스 이름이 있는지 여부를 결정하거나, 특정 속성이 포함된 요소를 필터링하거나, 지정된 텍스트가 포함된 요소를 필터링하는 등 is 및 where 선택기가 중요한 역할을 할 수 있습니다. 실제 개발에서는 이 두 선택자를 합리적으로 사용하면 효율성과 편의성이 향상될 수 있습니다.

위 내용은 is 및 where 선택기의 원리와 실제 적용에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

jquery css 事件 dom 选择器

성명：

이전 기사：웹 디자인에서 CSS3 동적 효과를 사용하는 방법다음 기사：웹 디자인에서 CSS3 동적 효과를 사용하는 방법