jQuery
셀렉터

AngularJS ASP.NET asp.net-mvc C# Language CSS HTML JavaScript PHP Ruby on Rails twitter-bootstrap
수색…


소개

jQuery 선택기는 HTML 문서에서 DOM (문서 객체 모델) 요소를 선택하거나 찾습니다. 그것은 ID, 이름, 유형, 속성, 클래스 등을 기반으로 HTML 요소를 선택하는 데 사용됩니다. 기존 CSS 선택기를 기반으로합니다.

통사론

  • 태그 : 마커가 없으며 태그를 직접 사용하십시오.
  • ID : #id
  • 클래스 : .className
  • 속성 : [attributeName]
  • 값이있는 [attributeName ='value'] : [attributeName ='value']
  • 속성은 값으로 시작합니다 ^= : [attributeName ^= 'value']
  • 속성은 값 $= 끝납니다 : [attributeName $='value']
  • 속성에 값 *= : [attributeName *= 'value']
  • 가상 셀렉터 : :pseudo-selector
  • 임의의 자손 : 선택자 사이의 간격
  • 직접 자식 : > 선택자 사이
  • 첫 번째 다음에 오는 형제 자매 : +
  • 첫 번째 다음에 오는 인접하지 않은 형제 : ~
  • 또는 : , (쉼표) 선택 사이

비고

class 나 id 나 attribute selectors 를 쓸 때

! " # $ % & ' ( ) * + , . / : ; < = > ? @ [ \ ] ^ { | } ~

두 개의 백 슬래시 \\ 사용하여 이스케이프 처리해야합니다.

예. 

<span id="temp.foobar"><span>

셀렉터는 프레임과 같이, 

$('#temp\\.foobar')

선택자 유형

jQuery에서는 다음과 같은 요소의 다양한 다양한 속성을 사용하여 페이지에서 요소를 선택할 수 있습니다.

  • 유형
  • 수업
  • 신분증
  • 속성 소지
  • 속성 값
  • 인덱싱 된 선택기
  • 가짜 상태

CSS 선택기 를 아는 경우 jQuery의 선택기가 동일하게 나타납니다 (사소한 예외가 있음).

다음 HTML을 예로 들어 보겠습니다. 

<a href="index.html"></a>                  <!-- 1 -->
<a id="second-link"></a>                   <!-- 2 -->
<a class="example"></a>                    <!-- 3 -->
<a class="example" href="about.html"></a>  <!-- 4 -->
<span class="example"></span>              <!-- 5 -->

유형별 선택 :

다음 jQuery 선택자는 1, 2, 3 및 4를 포함하여 <a> 요소를 모두 선택합니다. 

$("a")

수업 별 선택

다음 jQuery 선택자는 3, 4 및 5 인 클래스 example 의 모든 요소 (비 a 요소 포함)를 선택합니다. 

$(".example")

ID로 선택

다음 jQuery 셀렉터는 주어진 ID (2)를 가진 엘리먼트를 선택할 것이다. 

$("#second-link")

속성 소지에 의한 선택

다음 jQuery 선택기는 1과 4를 포함하여 정의 된 href 속성이있는 모든 요소를 ​​선택합니다. 

$("[href]")

속성 값으로 선택

다음 jQuery 선택기는 href 속성이 존재하는 모든 요소를 index.html 값으로 선택합니다.이 요소는 단지 1입니다. 

$("[href='index.html']")

인덱싱 된 위치로 선택 ( 인덱싱 된 선택기 )

다음 jQuery 선택자는 1을 선택하고, 두 번째 <a> ie를 선택합니다. second-link 공급 지수이므로 1 추천 eq(1) (인덱스에서 시작하여 유의 0 여기서 선택된있어, 따라서 제!). 

$("a:eq(1)")

인덱스가 지정된 제외 항목 선택

해당 인덱스를 사용하여 요소를 제외하려면 :not(:eq())

다음은 <a> 요소를 선택합니다. 단, 클래스 example 에서는 1 

$("a").not(":eq(0)")

제외와 함께 선택

선택 항목에서 요소를 제외하려면 다음을 사용하십시오 :not()

다음은 클래스 example 가있는 요소를 제외하고 1과 2 인 <a> 요소를 선택합니다. 

$("a:not(.example)")

가짜 상태로 선택

:first-child , :last-child , :first-of-type , :last-of-type 등의 의사 상태를 사용하여 jQuery를 선택할 수도 있습니다.

다음 jQuery 선택자는 첫 번째 <a> 요소 : number 1 만 선택합니다. 

$("a:first-of-type")

jQuery 선택기 결합하기

여러 jQuery 선택기를 결합하여 특이성을 높일 수도 있습니다. 원하는 수만큼 조합하거나 모두 조합 할 수 있습니다. 여러 클래스, 속성 및 상태를 동시에 선택할 수도 있습니다. 

$("a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']:first-of-type:first-child")

이렇게하면 <a> 요소를 선택할 수 있습니다.

  • 다음 클래스가 있습니다 : class1, class2, and class3
  • 다음 ID를 가지고 있습니다 : someID
  • 다음 속성을 attr1 : attr1
  • 다음 속성과 값을 가지고 attr2 값에 something , attr3 값에 something
  • first-child 및 first-of-type

다른 선택자를 쉼표로 구분할 수도 있습니다. 

$("a, .class1, #someID")

그러면 다음과 같이 선택됩니다.

  • 모든 <a> 요소
  • class1 클래스가있는 모든 요소
  • id가 #someID 인 요소

어린이 및 형제 선택

jQuery 선택기는 일반적으로 CSS와 동일한 규칙을 따르므로 같은 방식으로 자식 및 형제를 선택할 수 있습니다.

  • 비 직접적인 자녀를 선택하려면 공백을 사용하십시오.
  • 직접 자식을 선택하려면 a >
  • 첫 번째 다음에 오는 형제를 선택하려면 +
  • 첫 번째 다음에 오는 형제가 아닌 인접한 형제를 선택하려면 ~

와일드 카드 선택

모든 요소를 ​​선택하지만 선택할 공통 속성 (클래스, 속성 등)이없는 경우가있을 수 있습니다. 이 경우 모든 요소를 ​​선택하는 * selector를 사용할 수 있습니다. 

$('#wrapper *')    // Select all elements inside #wrapper element

선택자 결합

다음 DOM 구조 고려 

<ul class="parentUl">
    <li> Level 1
        <ul class="childUl">
            <li>Level 1-1 <span> Item - 1 </span></li>
            <li>Level 1-1 <span> Item - 2 </span></li>
        </ul>
    </li>
    <li> Level 2
        <ul class="childUl">
            <li>Level 2-1 <span> Item - 1 </span></li>
            <li>Level 2-1 <span> Item - 1 </span></li>
        </ul>
    </li>
</ul>

하위 셀렉터 및 하위 셀렉터

부모 <ul> - parentUl 이 자손 ( <li> )을 찾으면,

  1. 간단한 $('parent child')

    >> $('ul.parentUl li')

    이렇게하면 지정된 조상의 모든 일치하는 자손을 모든 수준 아래로 가져옵니다.

  2. > - $('parent > child')

    >> $('ul.parentUl > li')

    일치하는 모든 하위 항목을 찾습니다 ( 첫 번째 수준 만 ).

  3. 컨텍스트 기반 선택기 - $('child','parent')

    >> $('li','ul.parentUl')

    위의 1.와 동일합니다.

  4. find() - $('parent').find('child')

    >> $('ul.parentUl').find('li')

    위의 1.와 동일합니다.

  5. children() - $('parent').find('child')

    >> $('ul.parentUl').children('li')

    위의 2.와 동일합니다.

기타 결합기

그룹 선택기 : ","

모든 <ul> 요소와 모든 <li> 요소와 모든 <span> 요소를 선택하십시오. 

$('ul, li, span')

배수 선택기 : ""(문자 없음)

parentUl 클래스의 모든 <ul> 요소를 선택하십시오. 

$('ul.parentUl')

인접한 형제 선택 : "+"

다른 <li> 요소 바로 뒤에있는 <li> 요소를 모두 선택하십시오. 

$('li + li')

일반 형제 선택 : "~"

다른 <li> 요소의 형제 인 모든 <li> 요소를 선택하십시오. 

$('li ~ li')

개요

jQuery Selector를 사용하여 jQuery로 요소를 선택할 수있다. 이 함수는 요소 또는 요소 목록을 반환합니다.

기본 선택기 

$("*")                       // All elements
$("div")                     // All <div> elements
$(".blue")                   // All elements with class=blue
$(".blue.red")               // All elements with class=blue AND class=red
$(".blue,.red")              // All elements with class=blue OR class=red
$("#headline")               // The (first) element with id=headline
$("[href]")                  // All elements with an href attribute
$("[href='example.com']")    // All elements with href=example.com

관계 연산자 

$("div span")          // All <span>s that are descendants of a <div>
$("div > span")        // All <span>s that are a direct child of a <div>
$("a ~ span")          // All <span>s that are siblings following an <a>
$("a + span")          // All <span>s that are immediately after an <a>

캐싱 선택기

jQuery에서 선택기를 사용할 때마다 DOM에 쿼리와 일치하는 요소가 검색됩니다. 너무 자주 또는 반복적으로 수행하면 성능이 저하됩니다. 특정 선택기를 두 번 이상 참조하는 경우 변수에 할당하여 캐시에 추가해야합니다. 

var nav = $('#navigation');
nav.show();

다음을 대체합니다. 

$('#navigation').show();

웹 사이트에서이 요소를 자주 표시하거나 숨길 필요가있는 경우이 선택 도구를 캐시하면 도움이 될 수 있습니다. 동일한 셀렉터를 가진 요소가 여러 개있는 경우 변수는 다음 요소의 배열이됩니다. 

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
</div>

<script>
    var children = $('.child');
    var firstChildText = children[0].text();
    console.log(firstChildText); 
    
    // output: "Child 1"
</script>

참고 : 요소는 변수에 할당 할 때 DOM에 있어야합니다. child 이라는 클래스가있는 DOM에 요소가 없으면 해당 변수에 빈 배열을 저장합니다. 

<div class="parent"></div>

<script>
    var parent   = $('.parent');
    var children = $('.child');
    console.log(children);

    // output: []

    parent.append('<div class="child">Child 1</div>');
    children = $('.child');
    console.log(children[0].text());

    // output: "Child 1"
</script>

선택기로 DOM에서 요소를 추가 / 제거한 후에는 선택기를 변수에 재 할당해야합니다.

참고 : 선택기를 캐싱 할 때 많은 개발자가 변수 이름을 $ 로 시작하여 변수가 다음과 같이 jQuery 객체임을 나타냅니다. 

var $nav = $('#navigation');
$nav.show();

선택자로서의 DOM 요소

jQuery는 다양한 매개 변수를 허용하며 그 중 하나는 실제 DOM 요소입니다. DOM 요소를 jQuery에 전달하면 jQuery 객체 의 기본 배열과 같은 구조가 해당 요소를 보유하게됩니다.

jQuery는 nodeType을 검사하여 인수가 DOM 요소임을 감지합니다.

DOM 요소의 가장 일반적인 사용은 jQuery API에 액세스하기 위해 현재 요소가 jQuery 생성자에 전달되는 콜백에 있습니다.

each 콜백에서와 같이 (참고 : 각각 반복 함수 임). 

$(".elements").each(function(){
    //the current element is bound to `this` internally by jQuery when using each
    var currentElement = this;

    //at this point, currentElement (or this) has access to the Native API
    
    //construct a jQuery object with the currentElement(this)
    var $currentElement = $(this);

    //now $currentElement has access to the jQuery API
});

선택자로서의 HTML 문자열

jQuery는 다양한 매개 변수를 "선택자"로 받아 들인다. 그 중 하나는 HTML 문자열이다. HTML 문자열을 jQuery에 전달하면 jQuery 객체 의 기본 배열 같은 구조가 결과로 생성 된 HTML을 보유하게됩니다.

jQuery를 문자열은 생성자에 전달되는 경우 HTMLstring이며, 또한 시작해야하는지 결정하기 위해 정규식을 사용하여 < . 이 정규식은 rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ ( regex101.com의 설명 ).

HTML 문자열을 선택자로 사용하는 가장 일반적인 방법은 DOM 요소 세트를 코드로만 작성해야하는 경우입니다. 종종 Modal popouts와 같은 라이브러리에서 사용됩니다.

예를 들어 div에 래핑 된 앵커 태그를 템플릿으로 반환 한 함수 

function template(href,text){
    return $("<div><a href='" + href + "'>" + text + "</a></div>");
}

jQuery 객체를 반환하겠습니까? 

<div>
    <a href="google.com">Google</a>
</div>

template("google.com","Google") 이라고하는 경우



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow