jQuery에서 다양한 유형의 선택기 사용법 이해

Selector는 jQuery에서 매우 중요한 개념으로, 페이지에서 요소를 정확하게 찾고 조작하는 데 도움이 됩니다. 이 기사에서는 기본 선택기, 계층적 선택기, 필터 선택기 및 속성 선택기를 포함하여 jQuery에서 다양한 유형의 선택기 사용법을 소개하고 독자가 이러한 선택기의 사용법을 더 잘 이해하고 익히는 데 도움이 되는 특정 코드 예제를 제공합니다.

1. 기본 선택기

기본 선택기는 가장 일반적으로 사용되는 선택기 중 하나이며 요소 이름, 클래스 이름 또는 ID로 요소를 선택할 수 있습니다. 다음은 몇 가지 기본 선택기에 대한 몇 가지 예제 코드입니다.

1. 모든 <div> 요소 선택: <code><div>元素：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$('div')</pre><div class="contentsignin">로그인 후 복사</div></div></li><li><p>选择类名为<code>example的元素：

   $('.example')

2. 选择ID为my-element的元素：

   $('#my-element')

二、层次选择器

层次选择器可以根据元素之间的关系来选择元素，包括子元素、后代元素、相邻元素和兄弟元素。以下是几个层次选择器的示例代码：

1. 选择父元素下的所有子元素：

   $('parent > child')

2. 选择祖先元素下的所有后代元素：

   $('ancestor descendant')

3. 选择相邻元素：

   $('element + next')

4. 选择所有兄弟元素：

   $('element ~ siblings')

三、过滤选择器

过滤选择器可以根据元素的状态或位置来选择元素，包括可见元素、隐藏元素、第一个元素、最后一个元素等。以下是几个常用的过滤选择器示例代码：

1. 选择所有可见元素：

   $(':visible')

2. 选择所有隐藏元素：

   $(':hidden')

3. 选择第一个元素：

   $('element:first')

4. 选择最后一个元素：

   $('element:last')

四、属性选择器

属性选择器可以根据元素的属性来选择元素，包括属性存在、属性值等于某个值、属性值以某个字符串开头等。以下是几个属性选择器的示例代码：

1. 选择具有title属性的元素：

   $('[title]')

2. 选择href属性值以https开头的元素：

   $('[href^="https"]')

3. 选择class属性值包含example

   $('[class*="example"]')

   클래스 이름이 example인 요소 선택:

   rrreee

   🎜🎜ID가 my-element인 요소를 선택합니다: 🎜rrreee🎜🎜🎜 2. 계층적 선택기 🎜🎜계층적 선택기는 하위 요소를 포함한 요소 간의 관계를 기반으로 요소를 선택할 수 있습니다. 하위 요소, 인접 요소 및 형제 요소. 다음은 여러 계층적 선택기에 대한 샘플 코드입니다. 🎜🎜🎜🎜 상위 요소 아래의 모든 하위 요소 선택: 🎜rrreee 🎜🎜🎜 상위 요소 아래의 모든 하위 요소 선택: 🎜rrreee🎜🎜🎜 인접 요소 선택: 🎜rrreee 🎜🎜🎜 모든 형제 요소 선택: 🎜rrreee🎜🎜🎜 3. 필터 선택기 🎜🎜필터 선택기는 표시 요소, 숨겨진 요소, 첫 번째 요소, 마지막 요소 등을 포함하여 상태나 위치에 따라 요소를 선택할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 필터 선택기 샘플 코드입니다. 🎜🎜🎜🎜 보이는 모든 요소 선택: 🎜rrreee🎜🎜🎜 모든 숨겨진 요소 선택: 🎜rrreee🎜🎜🎜 첫 번째 요소 선택: 🎜rrreee🎜🎜🎜 마지막 요소 선택: 🎜rrreee🎜🎜🎜 4. 속성 선택기 🎜🎜속성 선택기는 속성 존재, 특정 값과 동일한 속성 값, 특정 문자열로 시작하는 속성 값 등을 포함하여 속성을 기반으로 요소를 선택할 수 있습니다. 다음은 여러 속성 선택기에 대한 샘플 코드입니다. 🎜🎜🎜🎜title 속성이 있는 요소 선택: 🎜rrreee🎜🎜🎜https 요소가 있는 <code>href 속성 값 선택 로 시작: 🎜rrreee🎜🎜🎜 class 속성 값에 example이 포함된 요소 선택: 🎜rrreee🎜🎜🎜위의 예제 코드를 통해 독자는 더 잘 이해할 수 있습니다. jQuery에서 다양한 유형의 선택기 사용법을 이해하고 숙달하세요. 선택기는 jQuery의 매우 중요한 부분입니다. 선택기 사용법을 익히면 페이지의 요소를 보다 효율적으로 작동하고 다양한 대화형 효과와 기능을 얻을 수 있습니다. 이 글이 독자들에게 도움이 되었으면 좋겠습니다. 읽어주셔서 감사합니다! 🎜