생활코딩을 보며 공부한 내용
레퍼(wrapper)란?
jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')
붉은색으로 표시한 부분이 래퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환
$와 jQuery는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 다음과 같은 방법을 사용한다.
jQuery('body').html('hello world');
(function($){
//jQuer y코드가 위치함
$('body').html('hello world');
})(jQuery) 함수를 선언과 동시에 실행하는 부분. 인자로 jQuery를 전달한다.
이렇게 하는 이유는 다른 라이브러리와의 충돌을 피하기 위하여($코드)
제어 대상을 지정하는 방법
jQuery( selector, [context]); // selector는 css와 같은 문자열
<body>
<ul> <li>test2</li> </ul> <ul class="foo"> <li>test</li> </ul> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript">(function($){ $('ul.foo').click( function() { $('li', this).css('background-color','red');
여기서 this는 이벤트를 발생시킨 ul.foo를 의미한다.
});})(jQuery) </script> </body>jQuery(element);
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> jQuery(document.body).css( "background-color", "black" );
//문서의 body태그(엘리먼트) </script> </body>
선택자('CSS스타일 선택자')
#jquery - id선택자
.tutorial - class선택자
li - 엘리먼트 선택자
#jquery, #MYSQL 다중선택자
선택자 기본, filter, 속성, form 만들어 놓으신 코딩
file:///C:/Users/Byun%20YB/Desktop/웹/jquery/selecter_example.html
https://opentutorials.org/course/53/59
CHAIN
jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다. JQUERY함수는 전부 자신 WRAPPER를 반환하기 때문에 가능한 것
이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다
<html> <body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red'); attr은 속성이다. 즉 '속성'을 '이것'으로 바꾸겠다는 의미이다. </script> </body></html>
탐색
- chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법
<html> <body> <ul class="first"> <li class="foo"> list item 1 </li> <li> list item 2 </li> <li class="bar"> list item 3 </li> </ul> <ul class="second"> <li class="foo"> list item 1 </li> <li> list item 2 </li> <li class="bar"> list item 3 </li> </ul> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript">$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');</script>
ul태그의 first클래스를 wrapper로 삼는다. find()로 안에서 foo 클래스를 찾는다.
end()로 travelsing중이던 부분을 종료한다. 즉, $('ul.first')이부분을 가르키게 된다.
이후 다시 bar 클래스를 찾아서 css를 한다
</body></html>
Event
시스템에서 일어나는 사건을 의미
javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등)
이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다.
이벤트에 대한 기본적인 내용은 자바스크립트 이벤트 편 참고 http://opentutorials.org/course/49 jQuery의 이벤트
- 크로스브라우징의 문제를 해결해줌
- bind로 이벤트 핸들러를 설치하고, unbind로 제거 (예제1)
- trigger로 이벤트 핸들러를 강제로 실행 (예제2)
- click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함
- live를 이용하면 현재 존재 하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function clickHandler(e){
alert('thank you');
}
$(document).bind('ready', function(){$(document) wrapper의 시작, document는 웹 페이지를 의미하는 엘리먼트 객체.
bind('이벤트', 함수)는 이벤트를 설치할 때 사용하는 method 'ready'는 문서가 다운로드가 끝나서 화면에 온전히 표시가 되면 실행되는 이벤트
$('#click_me').bind('click', clickHandler);
$('#remove_event').bind('click', function(){
$('#click_me').unbind('click', clickHandler);
unbind()할 이벤트와 함수를 정확히 입력할 것
});
$('#trigger_event').bind('click', function(){
$('#click_me').trigger('click'); 걸려있는 이벤트 넣으면 함수 실행!
});
})
</script>
</head>
<body>
<input id="click_me" type="button" value="click me" />
<input id="remove_event" type="button" value="unbind" />
<input id="trigger_event" type="button" value="trigger" />
</body>
</html>
이벤트핼퍼를 사용할 경우 코드를 더 간단하게 줄일 수 있다. 간결하고 주로 사용함.
$(document).ready(function(){ $('#click_me').click(clickHandler); $('#remove_event').click(function(e){ $('#click_me').unbind('click', clickHandler); }); $('#trigger_event').click(function(e){ $('#click_me').trigger('click'); }); })
엘리먼트 제어
https://opentutorials.org/course/53/51
jQuery fadeIn(), fadeOut()사용법
http://itjunijuni.tistory.com/17
css display 속성
http://codus10731.tistory.com/21
'스프링 관련 > 웹프로그래밍' 카테고리의 다른 글
| 자바스크립트 내용 정리 (0) | 2017.02.19 |
|---|---|
| 폰트 어썸(font-awesome) CDN파일 링크 연결 주소 (0) | 2017.02.18 |
| 자바스크립트로 할수 있는일 (0) | 2017.02.13 |
| 웹서버, 웹클라이언트 쉬운 동작 구조 설명 그림 (0) | 2017.02.13 |
| CSS 알기쉬운 기본적인 문법 정리 (0) | 2017.02.12 |
댓글