728x90
반응형
제이쿼리 입문/시작하기
자바스크립트의 라이브러리 중 하나인 JQUERY(제이쿼리) 입문을 해보려고 합니다.
제이쿼리는 자바스크립트를 간결하게 라이브러리화 시켰다고 보시면 되구요~!!
어마어마한 양의 플러그인이 존재하며. 제이쿼리를 이용해서 제가 작업한 스타일시트 등을 컨트롤하면서 화면을 다양하고 다이나믹하게 만들 수 있어서 퍼블리셔들은 꼭 알아야할 부분이라고 생각합니다.
먼저 <head></head> 안에
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>위 내용을 삽입해서 jquery를 추가시켜 줍니다.
(보통은 작업 시작할때 제이쿼리 파일을 다운받아서 웹에 올리고 그 주소를 링크시켜 주는게 좋습니다)
그리고 아래 기본구조 및 입력 방식을 토대로 제이쿼리에 쿼리함수를 입력해 주면됩닌다.
제이쿼리 기본구조 및 작성기초
<script type="text/javascript">
$(document).ready(function(){
});
먼저 스크립트 안에 위와같이 제이쿼리 선언을 한 후에
$('.클래스명')
$('#아이디명')위와 같은 선택자<셀렉터>를 이용해서 엘리먼트에 접근합니다.
(선택자<셀렉터>에는 기본선택자, 속성선택자, 필터선택자 등 무수한 선택자가 존재합니다. 선택자에 관련해서는 추후 포스팅 하도록 하겠습니다.)
<script type="text/javascript">
$(document).ready(
function() {
$('.btn').click(function(){
$(this).addClass('on');
});
});
</script>위와 같이 .click(); 안에 function(){}을 선언하고 function(){}안에 구현할 이벤트 내용을 넣으면, 클릭했을 때 function(){} 안의 내용을 실행시킬 수가 있습니다.
728x90
반응형
'공부 > jQuery' 카테고리의 다른 글
| 제이쿼리 슬라이드 배너 (ulslide) (0) | 2021.09.26 |
|---|---|
| 제이쿼리 달력 달기 (datepicker) (0) | 2021.09.26 |
| 제이쿼리 레이어 팝업 (bpopup) (0) | 2021.09.26 |
| jQuery 자식요소 내 요소 선택 (0) | 2015.12.07 |
| jQuery 선택자 (selector) (0) | 2015.11.19 |
