검색결과 리스트
jQuery에 해당되는 글 43건
- 2011.11.19 Hello JQuery
글
JQuery란 2006년에 자바스크립트를 좀 더 쉽고 용이하게 개발하기 위해 만들어진 자바스크립트 라이브러리이다.
DOM에 사용할 Node에 대해 Query를 하여 작업을 수행하는 컨셉이다.
1. JQuery 다운로드
http://jquery.com에 접속하여 JQuery를 다운 받는다.
필자가 다운받을 때 최신버전은 1.7버전이었다. (jquery-1.7.js)
개발용 jquery-1.7.js
배포용 jquery-1.7.min.js (배포용은 띄어쓰기, 들여쓰기가 제거된 버전입니다)
2. HTML페이지를 하나 만들자
<html>
<head>
<script type="text/ecmascript" src="jquery-1.7.js"></script>
<script type="text/ecmascript">
jQuery(document).ready( function() {
alert("Hello JQuery");
} );
</script>
</head>
<body>
</body>
</html>
3. jQuery = $
위에서 처음 작성하였던 Hello JQuery부분은 아래와 같이 변경하여 사용이 가능하다.
jQuery(document).ready( ... ) => $(document).ready( ... )
추가) 2012.07.20
The $() factory function:
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. |
How to use Selectors?
The selectors are very useful and would be required at every step while using jQuery. They get the exact element that you want from your HTML document.
Following table lists down few basic selectors and explains them with examples.
| 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. |
Similar to above syntax and examples, following examples would give you understanding on using different type of other useful selectors:
$('*'): 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 <p> that have a class value ending with bar
$("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.
You can use all the above selectors with any HTML/XML element in generic way. For example if selector $("li:first") works for <li> element then $("p:first") would also work for <p> element.
'-- JQuery' 카테고리의 다른 글
| jquery accordion (0) | 2012.07.20 |
|---|---|
| jquery UI를 위한 기본골격 (0) | 2012.07.20 |
| closure (0) | 2012.07.18 |
| ready와 객체생성 (0) | 2012.07.18 |
| What is JQuery (0) | 2011.12.09 |
RECENT COMMENT