패키지
jQuery 래퍼(wrapper), 선택자(selector)기본 본문
래퍼(wrapper)란?
jQuery(엘리먼트 오브젝트 | 'css스타일 선택자')
노란색 표시 부분이 래퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환.
레퍼의 안전한 사용
$(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 다음과 같은 방법을 사용한다
제어 대상을 지정하는 방법
- jQuery(selector, [context])
- jQuery(element)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <ul> <li>test2</li> </ul> <ul class="foo"> <li>test</li> </ul> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> (function($){ $('ul.foo').click( function() { /* 여기서 this는 foo라는 class값에 있는 li태그부분을 가르킴 래퍼의 ==> $('li', this) 인라인 스타일시트로 백그라운드컬러 속성명에 red라는 값을 대입한다. */ $('li', this).css('background-color','red'); $("li", this).css('background-color', 'blue'); }); })(jQuery) </script> </body> </html> | cs |
결과 화면
선택자(selector)란?
jQuery wrapper에는 css 선택자가 위치할 수 있는데, 이를 통해서 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있다.
* 자주쓰이는/기본 선택자 들
셀렉터 |
예시 |
설명 |
id, class, tag로 선택 * | ||
* |
$("*") |
모든요소들 |
#id |
$("#foo") |
id가 "foo"인 요소 |
.class |
$(".intro") |
클래스가 "intro"인 요소들 |
element |
$("p") |
<p> 요소들 |
el1, el2, el3 |
$("h1, div, p") |
<h1>, <div> and <p> 요소들 |
처음, 마지막, 홀수 , 짝수 선택* |
||
:first |
$("p:first") |
첫번째 <p>요소 |
:last | $("p:last") | 마지막 <p> 요소 |
:odd | $("tr:odd") | 홀수번째 <tr>요소들 |
이곳에서 여러 selector에 대한 정보를 더 얻을 수 있다.
https://api.jquery.com/
참고 : https://opentutorials.org/course/53/50 이고잉
, https://zetawiki.com/wiki/JQuery_%EC%85%80%EB%A0%89%ED%84%B0
'Client-Side > XML, Ajax, jQuery' 카테고리의 다른 글
| jQuery - each() 메서드 (0) | 2017.12.11 |
|---|---|
| jQuery란, jQuery 플러그인 삽입하기 (0) | 2017.12.01 |
