다양한 선택기 유형을 익히고 jQuery에서 사용하기

jQuery는 웹 페이지에서 HTML 요소, 이벤트 처리, 애니메이션 효과 및 Ajax를 조작하는 프로세스를 단순화하는 인기 있는 JavaScript 라이브러리입니다. jQuery로 개발할 때 다양한 선택기 유형과 그 사용법을 숙지하는 것이 중요합니다. 선택자는 특정 요소를 선택하기 위해 jQuery에서 사용하는 방법입니다. 필요에 따라 작동하려는 요소를 정확하게 선택하여 보다 유연한 개발을 수행할 수 있습니다.

1. 기본 선택기

1. 요소 선택기: 지정된 모든 요소를 ​​선택합니다. 구문은 $("element")입니다. 예를 들어 $("p")는 모든 단락 요소를 선택합니다. $("element")。例如，$("p")选取所有段落元素。

   $("p").css("color", "red");

2. ID选择器：选择特定id的元素，语法为$("#id")。例如，$("#myId")选取id为"myId"的元素。

   $("#myId").hide();

3. 类选择器：选择指定类的元素，语法为$(".class")。例如，$(".myClass")选取类为"myClass"的元素。

   $(".myClass").fadeIn();

2. 层级选择器

1. 后代选择器：选择指定元素的后代元素，语法为$("parent descendant")。例如，$("div p")选取所有div元素内的段落元素。

   $("div p").addClass("highlight");

2. 子元素选择器：选择指定元素的直接子元素，语法为$("parent > child")。例如，$("ul > li")选取ul元素下的直接子元素li。

   $("ul > li").hover(function(){
    $(this).toggleClass("hover");
   });
   
   ### 3. 过滤选择器

3. 第一个元素：选择第一个匹配的元素，语法为:first。例如，$("li:first")选取第一个li元素。

   $("li:first").css("font-weight", "bold");

4. 最后一个元素：选择最后一个匹配的元素，语法为:last。例如，$("li:last")选取最后一个li元素。

   $("li:last").css("color", "blue");

   4. 内容选择器

5. 包含指定文本内容的元素：选择包含指定文本内容的元素，语法为:contains(text)。例如，$("p:contains('Hello')")选取包含文本"Hello"的段落元素。

   $("p:contains('Hello')").addClass("highlight");

6. 空元素：选择没有子元素的空元素，语法为:empty。例如，$("div:empty")选取空的div元素。

   $("div:empty").text("This div is empty");

   5. 状态选择器

7. 可见元素：选择可见的元素，语法为:visible。例如，$("div:visible")选取可见的div元素。

   $("div:visible").fadeOut();

8. 隐藏元素：选择被隐藏的元素，语法为:hidden。例如，$("div:hidden")rrreee

🎜ID 선택기🎜: 특정 ID를 가진 요소를 선택합니다. 구문은 $("#id")입니다. 예를 들어 $("#myId")는 ID가 "myId"인 요소를 선택합니다. 🎜rrreee🎜🎜🎜🎜클래스 선택기🎜: 지정된 클래스의 요소를 선택합니다. 구문은 $(".class")입니다. 예를 들어 $(".myClass")는 클래스가 "myClass"인 요소를 선택합니다. 🎜rrreee🎜🎜🎜2. 계층적 선택기🎜🎜🎜🎜🎜Descendant 선택기🎜: 지정된 요소의 하위 요소를 선택합니다. 구문은 $("parentDescendant")입니다. 예를 들어 $("div p")는 div 요소 내의 모든 단락 요소를 선택합니다. 🎜rrreee🎜🎜🎜🎜하위 요소 선택기🎜: 지정된 요소의 직접 하위 요소를 선택합니다. 구문은 $("parent > child")입니다. 예를 들어, $("ul > li")는 ul 요소 아래의 직계 하위 요소 li를 선택합니다. 🎜rrreee🎜🎜🎜🎜첫 번째 요소🎜: 첫 번째로 일치하는 요소를 선택하세요. 구문은 :first입니다. 예를 들어 $("li:first")는 첫 번째 li 요소를 선택합니다. 🎜rrreee🎜🎜🎜🎜마지막 요소🎜: 마지막으로 일치하는 요소를 선택하세요. 구문은 :last입니다. 예를 들어 $("li:last")는 마지막 li 요소를 선택합니다. 🎜rrreee🎜4. 콘텐츠 선택기 🎜🎜🎜🎜🎜지정된 텍스트 콘텐츠가 포함된 요소🎜: 지정된 텍스트 콘텐츠가 포함된 요소를 선택하세요. 구문은 :contains(text)입니다. 예를 들어 $("p:contains('Hello')")는 "Hello"라는 텍스트가 포함된 단락 요소를 선택합니다. 🎜rrreee🎜🎜🎜🎜빈 요소🎜: 하위 요소가 없는 빈 요소를 선택하세요. 구문은 :empty입니다. 예를 들어 $("div:empty")는 빈 div 요소를 선택합니다. 🎜rrreee🎜5. 상태 선택기🎜🎜🎜🎜🎜Visible elements🎜: 표시되는 요소를 선택합니다. 구문은 :visible입니다. 예를 들어 $("div:visible")는 표시되는 div 요소를 선택합니다. 🎜rrreee🎜🎜🎜🎜Hidden element🎜: 숨겨진 요소를 선택하세요. 구문은 :hidden입니다. 예를 들어 $("div:hidden")은 숨겨진 div 요소를 선택합니다. 🎜🎜🎜

위 내용은 다양한 선택기 유형을 익히고 jQuery에서 사용하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!