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> 요소에서도 작동합니다.