The jQuery library harnesses the power of Cascading Style Sheets (CSS) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM).
A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria.
All type of selectors available in jQuery, always start with the dollar sign and parentheses: $().
The factory function $() makes use of following three building blocks while selecting elements in a given document:
| jQuery | Description |
|---|---|
| Tag Name: | Represents a tag name available in the DOM. For example $('p') selects all paragraphs in the document. |
| Tag ID: | Represents a tag available with the given ID in the DOM. For example $('#some-id') selects the single element in the document that has an ID of some-id. |
| Tag Class: | Represents a tag available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some-class. |
All the above items can be used either on their own or in combination with other selectors. All the jQuery selectors are based on the same principle except some tweaking.
NOTE: The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript library where $ sign is conflicting with some thing else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $().
Following is a simple example which makes use of Tag Selector. This would select all the elements with a tag name p.
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var pars = $("p");
for( i=0; i<pars.length; i++ ){
alert("Found paragraph: " + pars[i].innerHTML);
}
});
</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>
|
기본적으로 셀렉터는 이름, 아이디, 클래스명으로 요소를 구분을 지어서 하나 또는 여러개를 얻어올 수 있습니다.
| Selector | Description |
|---|---|
| Name | Selects all elements which match with the given element Name. |
| #ID | Selects a single element which matches with the given ID |
| .Class | Selects all elements which match with the given Class. |
| Universal (*) | Selects all elements available in a DOM. |
| Multiple Elements E, F, G | Selects the combined results of all the specified selectors E, F or G. |
실제로 위 셀렉터들을 사용하는 방법은 아래에 많이 나와있습니다.
$('*'): This selector selects all elements in the document.
$("p > *"): This selector selects all elements that are children of a paragraph element.
$("#specialID"): This selector function gets the element with id="specialID".
$(".specialClass"): This selector gets all the elements that have the class of specialClass.
$("li:not(.myclass)"): Selects all elements matched by <li> that do not have class="myclass".
$("a#specialID.specialClass"): This selector matches links with an id of specialID and a class of specialClass.
$("p a.specialClass"): This selector matches links with a class of specialClass declared within <p> elements.
$("ul li:first"): This selector gets only the first <li> element of the <ul>.
$("#container p"): Selects all elements matched by <p> that are descendants of an element that has an id of container.
$("li > ul"): Selects all elements matched by <ul> that are children of an element matched by <li>
$("strong + em"): Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>.
$("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by <p>.
$("code, em, strong"): Selects all elements matched by <code> or <em> or <strong>.
$("p strong, .myclass"): Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class of myclass.
$(":empty"): Selects all elements that have no children.
$("p:empty"): Selects all elements matched by <p> that have no children.
$("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>.
$("p[.myclass]"): Selects all elements matched by <p> that contain an element with a class of myclass.
$("a[@rel]"): Selects all elements matched by <a> that have a rel attribute.
$("input[@name=myname]"): Selects all elements matched by <input> that have a name value exactly equal to myname.
$("input[@name^=myname]"): Selects all elements matched by <input> that have a name value beginning with myname.
$("a[@rel$=self]"): Selects all elements matched by <a> that have rel attribute value ending with self
$("a[@href*=domain.com]"): Selects all elements matched by <a> that have an href value containing domain.com.
$("li:even"): Selects all elements matched by <li> that have an even index value.
$("tr:odd"): Selects all elements matched by <tr> that have an odd index value.
$("li:first"): Selects the first <li> element.
$("li:last"): Selects the last <li> element.
$("li:visible"): Selects all elements matched by <li> that are visible.
$("li:hidden"): Selects all elements matched by <li> that are hidden.
$(":radio"): Selects all radio buttons in the form.
$(":checked"): Selects all checked boxex in the form.
$(":input"): Selects only form elements (input, select, textarea, button).
$(":text"): Selects only text elements (input[type=text]).
$("li:eq(2)"): Selects the third <li> element
$("li:eq(4)"): Selects the fifth <li> element
$("li:lt(2)"): Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.
$("p:lt(3)"): selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.
$("li:gt(1)"): Selects all elements matched by <li> after the second one.
$("p:gt(2)"): Selects all elements matched by <p> after the third one.
$("div/p"): Selects all elements matched by <p> that are children of an element matched by <div>.
$("div//code"): Selects all elements matched by <code>that are descendants of an element matched by <div>.
$("//p//a"): Selects all elements matched by <a> that are descendants of an element matched by <p>
$("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.
$("li:last-child"): Selects all elements matched by <li> that are the last child of their parent.
$(":parent"): Selects all elements that are the parent of another element, including text.
$("li:contains(second)"): Selects all elements matched by <li> that contain the text second.
지금까지 본 셀렉터들은 어떠한 HTML/XML 요소에도 일반적으로 적용가능합니다. 예를들어 selector $("li:first") 가 <li> 태그에 적용이 된다면 $("p:first") 역시 <p> 태그에 적용이 된다는 말이죠.
Reference : http://www.tutorialspoint.com/jquery/jquery-selectors.htm
| [jQuery] 5. DOM Traversing ( DOM 선회 ) (0) | 2016.06.12 |
|---|---|
| [jQuery] 4. DOM Attributes ( DOM 속성 ) (0) | 2016.06.12 |
| AJAX란? - 데이터베이스 (0) | 2016.06.12 |
| AJAX란? - 이벤트 종류 (0) | 2016.06.12 |
| AJAX란? - 서버로부터 응답받기 (0) | 2016.06.12 |