<특징>
#요소의 선택
jquery는 dom 쿼리 대신 간편하게 css 스타일의 셀렉터를 이용하여 요소를 선택하는 방법을 제공한다.
#작업실행
jqury는 dom 트리를 수정하기 위한 기능이나 요소에 애니메이션 효과를 적용하는 기능, 여러 요소에 대해 루프를 수행하는 기능 등을 모두 한줄의 코드로 작업할 수 있는 메서드를 제공한다.
#이벤트 처리
jquery는 구 버전의 브라우저를 특별히 고려하지 않고도 손쉽게 선택된 요소에 이벤트 리스너를 등록할 수 있는 메서드를 제공한다.
jquery 란 무엇인가?
jquery는 웹페이지에 포함시킬 수 있는 자바스크립트 파일이다.
css 형식의 셀렉터를 이용하여 요소를 찾을 수 있으며, 그런 후에는 jqeury 메서드들을 이용하여 해당 요소에 원하는 작업을 수행할 수 있다.
1.css 스타일 셀렉터를 이용하여 요소 찾기
예)
$(‘li.hot’)
이 셀렉터는 class 특성 값이 hot 인 모든 <li> 요소를 찾는다.
jquery 객체는 선택한 요소에 적용할 수 있는 다양한 메서드들을 제공한다.
예)
$(‘li.hot’).addClass(‘complete’);
각 메서드들은 매개변수를 가지고 있다. 이 매개변수는 class 특성에 추가될 값을 명시하기 위해 사용한다.
jquery 기본 예제
.html
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/basic-example.js"></script>
</body>
.js
$(':header').addClass('headline');
$('li:lt(3)').hide().fadeIn(1500);
$('li').on('click', function() {
$(this).remove();
});
<h1> ~<h6> 에 해당하는 모든 제목 요소들을 찾는다. 그리고 이 요소들의 class 특성에 headline 이라는 값을 추가한다.
목록 li 요소 3개 만을 선택한 후 다음 두 가지 작업을 수행한다.
요소를 화면에서 숨긴다.
숨겨전 요소들에 페이드인 효과를 적용한다.
3. 마지막으로 <li> 요소에 이벤트 리스너를 바인딩한다. 사용자가 이들 중 하나를 클릭하면 익명함수를 호출하여 페이지에서 요소를 제거한다.
jquey를 사용하는 이유?
간단한 셀렉터를 제공한다.
구 버전의 브라우저들은 요소를 선택하기 위한 최신의 메서드를 제공하지 않는다.
ie는 요소 사이의 공백을 무시하지만 다른 브라우저들은 무시하지 않는다.
요소를 빠르게 선택할 수 있다.
선택할 요소를 매우 정확하게 선별할 수 있다.
dom 메서드 보다 적은 양의 코드로 동일한 작업을 할 수 있다.
2. 일반적인 작업들을 더 적은 코드로 구현할 수 있다.
요소에 대해 루프 실행하기
dom 트리에 요소를 추가하거나 제거하기
이벤트 처리하기
요소에 페이드인/ 아웃 효과 적용하기
ajax 요청 처리하기
3. 크로스 브라우저 호환성을 제공한다.
요소 탐색하기
jquery를 이용하면 css 스타일 셀렉터를 이용하여 요소를 선택할 수 있다.
그 외에도 추가 셀렉터를 제공한다.
#기본셀렉터
* | 모든요소 |
element | 지정된 요소 이름을 가진 모든 요소 |
#id | 지정된 id 특성 값을 가진 모든 요소들 |
.class | 지정된 class 특성 값을 가진 모든 요소들 |
select1 | 하나 이상의 셀렉터와 일치하는 모든 요소들 |
select2 |
|
#계층탐색
ancestor | 다른 요소의 하위 요소들 예) li a |
parent>child | 다른 요소의 직접적인 자식 요소들 |
previous+next | 이전 요소의 바로 다음에 따라오는 근접한 이웃 요소를 탐색하는 셀렉터 |
previous~siblings | 이전 요소의 모든 이웃 요소들 |
#기본필터
:not(selector) | 셀렉터에 부합하는 요소를 제외한 나머지 요소들 |
:first | 선택된 요소 중 첫 번째 요소 |
:last | 선택된 요소 중 마지막 요소 |
:even | 선택된 요소 중 인덱스 번호가 짝수인 요소들 |
:odd | 선택된 요소 중 인덱스 번호가 홀수인 요소들 |
:eq(index) | 선택된 요소 중 매개변수로 지정된 인덱스 번호를 가진 요소 |
:gt(index) | 매개변수로 지정된 인덱스 번호 보다 큰 인덱스 번호의 요소 |
:lt(index) | 지정된 인덱스 번호 보다 작은 인덱스 번호의 요소 |
:header | <h1> ~<h6> 까지의 모든 제목 요소들 |
:animated | 현재 애니메이션이 적용된 모든 요소들 |
:focus | 현재 포커스를 가지고 있는 요소 |
#콘텐츠 필터
:contains(‘text’) | 매개변수로 지정된 텍스트를 가지고 있는 요소들 |
:empty | 자식 요소가 없는 모든 요소들 |
:parent | 자식 요소를 가지고 있는 모든 요소들 |
:has(selector) | 선택된 요소 중 매개변수에 지정된 셀렉터에 부합하는 요소를 최소한 하나 이상 가지고 있는 요소 |
예) div:has(p) 는 <p>요소를 가진 모든 div 요소를 말한다. |
#가시성 필터
:hidden | 화면에서 숨겨진 모든 요소들 |
:visible | 페이지의 레이아웃에서 공간을 차지 하고 있는 모든 요소들 |
#자식요소 필터
:nth-child(expr) | 1부터 시작하는 해당 순번의 요소(ul li:nth-child(2)는 두 번째 요소 의미) |
:first-child | 현재 선택된 요소의 첫 번째 자식요소 |
:last-child | 헌재 선택된 요소의 마지막 자식요소 |
:only-child | 요소의 자식 요소가 하나뿐인 요소 (div p:only-child) |
#특성필터
[attribute] | 지정된 특성을 가지고 있는 요소들 (특성값은 무관) |
[attribute=’value‘] | 지정된 특성값과 값을 가진 요소들 |
[attribute!=’value‘] | 지정된 특성 값이 지정된 값이 아닌 요소들 |
[attribute^=’value‘] | 지정된 특성 값이 지정된 값으로 시작하는 요소들 |
[attribute*=’value‘] | 지정된 특성 값이 지정된 값을 포함하고 있는 요소들 |
[attribute|=’value‘] | 지정된 특성 값이 지정된 값과 일치하거나 지정된 값에 하이픈을 덧붙인 값으로 시작하는 요소들 |
[attribute~=’value‘] | 지정된 특성 값이 공백으로 나열한 값 중 하나인 요소들 |
[attribute][attribute2] | 지정된 특성 중 하나를 가진 모든 요소들 |
#폼
:input | 모든 입력 요소들 |
:text | 모든 텍스트 입력 요소들 |
:password | 모든 비밀번호 입력 요소들 |
:radio | 모든 라디오 버튼 요소들 |
:checkbox | 모든 체크박스 요소들 |
:submit | 모든 전송 버튼 요소들 |
:image | 모든 이미지 요소들 |
:reset | 모든 재설정 버튼 요소들 |
:button | 모든 버튼 요소들 |
:file | 모든 파일 요소들 |
:selected | 드롭다운 리스트에서 선택된 모든 요소들 |
:enabled | 현재 활성화된 폼 요소들 |
:disabled | 비활성화된 모든 폼 요소들 |
:checked | 모든 선택된 라디오 버튼이나 체크박스 요소들 |
|
|
선택된 요소에 필요한 작업 수행하기
#콘텐츠 필터 – 요소, 특성, 텍스트 노드의 콘텐츠를 가져오거나 수정한다.
콘텐츠 가져오기 수정하기
.html()
.text()
.replaceWith()
.remove()
요소
.before()
.after()
.prepend()
.append()
.remove()
.clone()
.unwrap()
.detach()
.empty()
.add()
특성
.attr()
.removeAttr()
.addClass()
.removeClass()
.css()
폼 값
.val()
.isNumeric()
#요소탐색 – 작업할 요소를 찾거나 선택하며 dom을 탐색한다.
일반
.find()
.closest()
.parent()
.parents()
.children()
.siblings()
.next()
.nextAll()
.prev()
.prevAll()
필터/테스트
.filter()
.not()
.has()
.is()
:contains()
객체집합 내 순서 평가
.eq()
.lt()
.gt()
# 크기/위치 – 박스 형태로 요소의 크기나 위치를 가져오거나 수정한다.
크기
.height()
.width()
.innerHeigth()
.innerWidth()
.outerHeight()
.outerWidth()
$(document).heigth()
$(document).width()
$(window).height()
$(window).width()
위치
.offset()
.position()
.scrollLeft()
.scrollTop()
# 효과&애니메이션 – 페이지의 일부에 효과와 애니매이션을 적용한다.
기본
.show()
.hide()
.toggle()
흐림효과
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
슬라이딩 효과
.slideDown()
.slideUp()
.slideToggle()
기타
.delay()
.stop()
.animate()
#이벤트 – 객체집합 내의 요소들에 이벤트 리스너를 생성한다.
문서/파일
.ready()
.load()
사용자 상호작용
.on
개별적인 이벤트를 위한 매서드들도 존재한다. 예로들면 .click() .hover() .submit() 같은 메서드들이다. 그러나 이런 메서드들은 이벤트 처리를 위한 .on 메서드가 등장하면서 사라졌다.
매치드 셋/ jQuery 객체 집합
하나 혹은 그 이상의 요소를 선택하면 jQuery 객체가 리턴된다.
이 객체를 매치드 셋 혹은 jQuery 객체 집합이라고 한다.
단일 요소
셀렉터가 하나의 요소를 리턴하면 jQuery 객체는 단 하나의 요소 노드에 대한 참조를 가진다.
예)
$(‘ul’)
다중요소
만일 셀렉터가 여러 요소를 리턴하면 jQuery 객체는 각각의 요소들에 대한 참조를 모두 가지고 있다.
$(‘li’)
예) 이 셀렉터는 페이지에서 li 요소들을 찾아 낸다. 이 jQuery 객체는 선택된 모든 노드에 대한 참조를 가지게 된다.
데이터를 조회하거나 수정하는 jQuery 메서드
일부 jQuery 메서드들은 요소로부터 정보를 얻어내거나 요소의 콘텐츠를 수정한다. 그러나 항상 모든 요소에 적용할 수 있는 것은 아니다.
정보의 획득
$(‘li’)
이 결과로부터 정보를 얻오오기 위해 .html() 메서드를 사용하면 객체집합 내 첫 번째 요소의 콘텐츠를 리턴한다.
var content = $(‘li’).html();
이 메서드는 첫 번째 목록 아이템의 콘텐츠를 조회하여 content라는 이름의 변수에 저장한다.
정보의 수정
jQuery 객체집합이 둘 이상의 요소를 저장하고 있으며, 이를 대상으로 페이지의 정보를 수정하는 메서드를 사용하게 되면 첫 번째 요소에만 적용되는 것이 아니라 모든 요소의 콘텐츠가 수정된다.
$(‘li’).html(‘수정됨’);
이 메서드를 실행하면 목록 내 모든 아이템의 콘텐츠를 수정한다.
요소에 대한 참조를 저장하는 jQuery 객체들
jQuery를 이용하여 객체집합을 생성하면 이 객체는 DOM 트리 내의 해당 요소에 대한 참조를 저장한다. 그러나 그들의 복사본을 생성하지 않는다.
JQuery 객체 집합을 변수에 캐싱하기
jQuery 객체는 요소에 대한 참조를 저장한다.
jQuery 객체를 캐싱하다는 것은 이 객체에 대한 참조를 변수에 저장하는 것이다.
jQuery 객체를 생성하는 작업은 시간은 물론 리소스에 대한 처리와 메모리를 필요로 한다. 순서는 다음과 같음
1.DOM 트리에서 조건에 일치하는 노드를 찾는다.
2.jQuery 객체를 생성한다.
3. jQuery 객체에 노드에 대한 참조를 저장한다.
$listItem = $(‘li’);
루프
.html
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/looping.js"></script>
</body>
.js
$('li em').addClass('seasonal');
$('li.hot').addClass('favorite');
<코드설명>
자바스크립트의 경우 여러 요소에 대해 동일한 작업을 수행하려면 선택한 모든 요소를 대상아로 하는 루프를 작성해야 한다.
jQuery를 사용할 때 셀렉터가 여러 개의 요소를 리턴하면, 하나의 메서드만 호출해도 모든 요소의 콘텐츠를 수정할 수 있다. 즉 루프를 사용할 필요가 없다.(묵시적 반복)
체이닝
하나 이상의 jQuery 메서드를 동일한 요소에 적용하고 싶다면 마침표 표기법을 이용하여 아래와 같이 여러개의 메서드를 나열하면 된다.
hide() 메서드는 요소를 숨기며, delay() 메서드는 약간의 지연을 만들어 낸다. 그런 후 fadeIn() 메서드는 요소들에 페이드인 효과를 적용한다.
동일한 셀렉터에 여러 개의 메서드를 적용하는 과정을 체이닝이라고 한다.
.html
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/chaining.js"></script>
</body>
.js
$('li[id!="one"]')
.hide()
.delay(500)
.fadeIn(1400);
각 줄의 코드는 마침표 표기법으로 시작하며, 세미콜론은 구문의 끝에서 이 객체집합에 대한 작업이 완료됨을 표시하기 위해 사용된다.
jQuery 객체집합을 수정하기 위한 대부분의 메서드는 체이닝이 가능하다. 그러나 DOM에서 정보를 조회 하는 메서드들은 체이닝으로 연결할 수 없다.
연결된 메서드 중 하나가 제대로 동작하지 않으면 나머지 메서드도 실행되지 않는다는 점을 알아둘 필요가 있다.
페이지가 준비되었는지 확인하기
$(document).ready(function(){
//여기에 스크립트를 작성한다.
});
$(document) 함수는 페이지를 표현하는 jQuery 객체를 생성한다.
페이지가 준비 되면 .ready() 메서드의 괄호 안에 지정한 함수가 실행된다.
자바스크립트와 마찬가지로, 브라우저가 DOM 트리를 완성하지 못한다면, jQuery는 페이지를 요소에서 선택하지 못할 것이다.
스크립트를 페이지의 마지막에 작성하면 스크립트가 실행되기 전에 요소들이 dom트르에 로드된다.
//약식 표현
$(function(){
//여기에 스크립트를 작성한다.
});
'매일코딩 > 자바스크립트 개념' 카테고리의 다른 글
| [자바스크립트 기초]제이쿼리 3 (4) | 2017.03.04 |
|---|---|
| [자바스크립트 기초]제이쿼리 2 (2) | 2017.03.03 |
| [자바스크립트 기초 ]이벤트의 종류와 개념 2 (2) | 2017.03.01 |
| [자바스크립트 기초] 함수 이벤트 DOM을 이용한 초미니 프로젝트 1 (2) | 2017.02.28 |
| [자바스크립트 기초 ]이벤트의 종류와 개념 1 (2) | 2017.02.26 |
댓글