jQuery 기본 선택기

저는 jQuery를 처음 사용합니다. jQuery를 더 체계적으로 배우기 위해 오늘은 특별히 제 학습 경험을 요약하여 초보자와 공유하기 위해 게시합니다. 오늘은 jQuery의 기본 선택기를 주로 요약합니다.

jQuery의 기본 선택자는 jQuery에서 가장 많이 사용되는 선택자이자 가장 간단한 선택자이기도 합니다. 주로 요소의 ID, CLASS, 요소의 태그 ELEMENT를 통해 검색됩니다. 등. HTML의 DOM 요소. 웹 페이지에서 각 ID 이름은 한 번만 사용할 수 있으며 클래스는 반복적으로 사용할 수 있습니다. jQuery 애플리케이션에서는 이러한 기본 선택기를 사용하여 대부분의 작업을 완료할 수 있으며, 구체적인 구현 프로세스를 주로 살펴보겠습니다. 더 잘 알아보기 위해 먼저 여기에 HTML 태그 코드를 나열합니다.

<div id="mydiv">
    <div class="mini">我是一个名为mini的div标签</div>
    <div class="mini">我是一个名为mini的div标签</div>
    <div class="mini">我是一个名为mini的div标签</div>
    <p>我是一个段落p标签</p>
    <span>我是一个行内span标签</span>
<div>

그런 다음 이러한 기본 선택기의 응용 프로그램을 각각 살펴보겠습니다

1. ID 선택기

Selector: #id

설명: 주어진 ID를 기반으로 요소와 일치

반환: 단일 요소

예:

<script type="text/javascript">    $(document).ready(function(){
        //id选择器        $("#mydiv").css("background","#f96");
     });</script>

기능: ID가 mydiv

2인 요소의 배경색을 변경합니다. 클래스 선택기

Selector: .class

설명: 주어진 클래스 이름과 일치하는 요소 반환

반환: 컬렉션 요소

예:

<script type="text/javascript">    $(document).ready(function(){
        //class选择器        $(".mini").css("background","#f96");
     });</script>

함수: 배경색 변경 mini

클래스가 있는 모든 요소

선택기: element

설명: 주어진 요소 이름을 기준으로 요소 일치

반환: 컬렉션 요소

예:

기능:요소 이름이 <div>

Four인 모든 요소의 배경색을 변경합니다. 모든 요소*

선택기: *

설명: 일치하는 모든 html 태그 요소를 변경합니다.

반환 값: 컬렉션 요소

예:

<script type="text/javascript">    $(document).ready(function(){
        //element选择器        $("div").css("background","#f96");
     });</script>

기능: 모든 html 요소 태그의 배경색 변경

5. selector1, selector2, .... selectorN

Selector: selector,selector2,...selectorN

설명: 각 선택기와 일치하는 요소를 결합하여 함께 반환합니다.

반환: 요소 설정

예:

<script type="text/javascript">    $(document).ready(function(){
        //*选择器        $("*").css("background","#f96");
     });</script>

기능:클래스 미니 및 단락 p 요소의 배경색 변경