jQuery-선택자

jQuery 라이브러리는 CSS (Cascading Style Sheets) 선택기의 기능을 활용하여 DOM (문서 개체 모델)의 요소 또는 요소 그룹에 빠르고 쉽게 액세스 할 수 있습니다.

jQuery 선택기는 주어진 기준에 따라 DOM에서 일치하는 요소를 찾기 위해 표현식을 사용하는 함수입니다. 간단히 말해, 선택기는 jQuery를 사용하여 하나 이상의 HTML 요소를 선택하는 데 사용됩니다. 요소가 선택되면 선택한 요소에 대해 다양한 작업을 수행 할 수 있습니다.

$ () 팩토리 함수

jQuery 선택자는 달러 기호와 괄호로 시작합니다. $(). 공장 기능$() 주어진 문서에서 요소를 선택하는 동안 다음 세 가지 빌딩 블록을 사용합니다.

Sr. 아니. 선택기 및 설명
1

Tag Name

DOM에서 사용 가능한 태그 이름을 나타냅니다. 예를 들면$('p') 문서의 모든 단락 <p>를 선택합니다.

2

Tag ID

DOM에서 지정된 ID로 사용 가능한 태그를 나타냅니다. 예를 들면$('#some-id') ID가 some-id 인 문서에서 단일 요소를 선택합니다.

Tag Class

DOM의 지정된 클래스에서 사용할 수있는 태그를 나타냅니다. 예를 들면$('.some-class') 클래스가 some-class 인 문서의 모든 요소를 ​​선택합니다.

위의 모든 항목은 단독으로 사용하거나 다른 선택기와 함께 사용할 수 있습니다. 모든 jQuery 선택기는 일부 조정을 제외하고는 동일한 원칙을 기반으로합니다.

NOTE − 공장 기능 $() 의 동의어입니다 jQuery()함수. 따라서 다른 JavaScript 라이브러리를 사용하는 경우$ 기호가 다른 것과 충돌하면 대체 할 수 있습니다. $ 서명하다 jQuery 이름과 기능을 사용할 수 있습니다 jQuery() 대신에 $().

다음은 Tag Selector를 사용하는 간단한 예입니다. 이것은 태그 이름을 가진 모든 요소를 ​​선택합니다p.

라이브 데모
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

선택기를 사용하는 방법?

선택기는 매우 유용하며 jQuery를 사용하는 동안 모든 단계에서 필요합니다. HTML 문서에서 원하는 정확한 요소를 얻습니다.

다음 표는 몇 가지 기본 선택기를 나열하고 예제와 함께 설명합니다.

Sr. 아니. 선택기 및 설명
1 이름

주어진 요소와 일치하는 모든 요소를 ​​선택합니다. Name.

2 #신분증

주어진 것과 일치하는 단일 요소를 선택합니다. ID.

.수업

주어진 것과 일치하는 모든 요소를 ​​선택합니다 Class.

4 범용 (*)

DOM에서 사용 가능한 모든 요소를 ​​선택합니다.

5 다중 요소 E, F, G

지정된 모든 선택 자의 결합 된 결과를 선택합니다. E, F 또는 G.

선택기 예

위의 구문 및 예제와 유사하게 다음 예제는 다른 유형의 유용한 선택기 사용에 대한 이해를 제공합니다.

Sr. 아니. 선택기 및 설명
1

$('*')

이 선택기는 문서의 모든 요소를 ​​선택합니다.

2

$("p > *")

이 선택기는 단락 요소의 하위 요소 인 모든 요소를 ​​선택합니다.

$("#specialID")

이 선택기 함수는 id = "specialID"인 요소를 가져옵니다.

4

$(".specialClass")

이 선택기는 specialClass 클래스를 가진 모든 요소를 ​​가져옵니다 .

5

$("li:not(.myclass)")

class = "myclass"가없는 <li>와 일치하는 모든 요소를 ​​선택합니다.

6

$("a#specialID.specialClass")

이 선택자는 ID가 specialID 이고 클래스가 specialClass 인 링크와 일치합니다 .

7

$("p a.specialClass")

이 선택기는 <p> 요소 내에 선언 된 specialClass 클래스와 링크를 일치시킵니다 .

8

$("ul li:first")

이 선택기는 <ul>의 첫 번째 <li> 요소 만 가져옵니다.

9

$("#container p")

ID가 container 인 요소의 자손 인 <p>와 일치하는 모든 요소를 ​​선택합니다 .

10

$("li > ul")

<li>와 일치하는 요소의 하위 인 <ul>과 일치하는 모든 요소를 ​​선택합니다.

11

$("strong + em")

<strong>과 일치하는 형제 요소 바로 뒤에 오는 <em>과 일치하는 모든 요소를 ​​선택합니다.

12

$("p ~ ul")

<p>와 일치하는 형제 요소 뒤에 오는 <ul>과 일치하는 모든 요소를 ​​선택합니다.

13

$("code, em, strong")

<code>, <em> 또는 <strong>와 일치하는 모든 요소를 ​​선택합니다.

14

$("p strong, .myclass")

myclass 클래스가있는 모든 요소뿐만 아니라 <p>와 일치하는 요소의 자손 인 <strong>과 일치하는 모든 요소를 ​​선택합니다 .

15

$(":empty")

자식이없는 모든 요소를 ​​선택합니다.

16

$("p:empty")

하위가없는 <p>와 일치하는 모든 요소를 ​​선택합니다.

17

$("div[p]")

<p>와 일치하는 요소를 포함하는 <div>와 일치하는 모든 요소를 ​​선택합니다.

18

$("p[.myclass]")

클래스가 myclass 인 요소를 포함하는 <p>와 일치하는 모든 요소를 ​​선택합니다 .

19

$("a[@rel]")

rel 속성이있는 <a>와 일치하는 모든 요소를 ​​선택합니다.

20

$("input[@name = myname]")

이름 값이 myname 과 정확히 일치하는 <input>과 일치하는 모든 요소를 ​​선택합니다 .

21

$("input[@name^=myname]")

myname으로 시작하는 이름 값이있는 <input>과 일치하는 모든 요소를 ​​선택합니다 .

22

$("a[@rel$=self]")

<a>와 일치하는 모든 요소를 ​​선택합니다. relself로 끝나는 속성 값 .

23

$("a[@href*=domain.com]")

domain.com을 포함하는 href 값이있는 <a>와 일치하는 모든 요소를 ​​선택합니다.

24

$("li:even")

색인 값이 짝수 인 <li>와 일치하는 모든 요소를 ​​선택합니다.

25

$("tr:odd")

색인 값이 홀수 인 <tr>과 일치하는 모든 요소를 ​​선택합니다.

26

$("li:first")

첫 번째 <li> 요소를 선택합니다.

27

$("li:last")

마지막 <li> 요소를 선택합니다.

28

$("li:visible")

표시되는 <li>와 일치하는 모든 요소를 ​​선택합니다.

29

$("li:hidden")

숨겨진 <li>와 일치하는 모든 요소를 ​​선택합니다.

30

$(":radio")

양식의 모든 라디오 버튼을 선택합니다.

31

$(":checked")

양식에서 선택된 모든 상자를 선택합니다.

32

$(":input")

양식 요소 (입력, 선택, 텍스트 영역, 단추) 만 선택합니다.

33

$(":text")

텍스트 요소 만 선택합니다 (input [type = text]).

34

$("li:eq(2)")

세 번째 <li> 요소를 선택합니다.

35

$("li:eq(4)")

다섯 번째 <li> 요소를 선택합니다.

36

$("li:lt(2)")

세 번째 요소 이전에 <li> 요소와 일치하는 모든 요소를 ​​선택합니다. 즉, 처음 두 개의 <li> 요소입니다.

37

$("p:lt(3)")

네 번째 요소 이전에 <p> 요소와 일치하는 모든 요소를 ​​선택합니다. 즉, 처음 세 개의 <p> 요소입니다.

38

$("li:gt(1)")

두 번째 요소 다음에 <li>와 일치하는 모든 요소를 ​​선택합니다.

39

$("p:gt(2)")

세 번째 요소 이후 <p>와 일치하는 모든 요소를 ​​선택합니다.

40

$("div/p")

<div>와 일치하는 요소의 하위 인 <p>와 일치하는 모든 요소를 ​​선택합니다.

41

$("div//code")

<div>와 일치하는 요소의 하위 항목 인 <code>와 일치하는 모든 요소를 ​​선택합니다.

42

$("//p//a")

<p>와 일치하는 요소의 하위 요소 인 <a>와 일치하는 모든 요소를 ​​선택합니다.

43

$("li:first-child")

부모의 첫 번째 자식 인 <li>와 일치하는 모든 요소를 ​​선택합니다.

44

$("li:last-child")

부모의 마지막 자식 인 <li>와 일치하는 모든 요소를 ​​선택합니다.

45

$(":parent")

텍스트를 포함하여 다른 요소의 상위 요소 인 모든 요소를 ​​선택합니다.

46

$("li:contains(second)")

second 텍스트를 포함하는 <li>와 일치하는 모든 요소를 ​​선택합니다.

HTML / XML 요소와 함께 위의 모든 선택기를 일반적인 방식으로 사용할 수 있습니다. 예를 들어 선택자$("li:first") <li> 요소에서 작동합니다. $("p:first") <p> 요소에서도 작동합니다.