국비 과정/JQuery
국비 - 1019 ( jQuery )
by 코딩호야
2022. 10. 19.
jQuery
jQuery는자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다.
jQuery가 기본적으로 가진 철학은 "write less, do more"로 적게 쓰고 많이 쓰자 입니다.
개발자의 언어로 번역하면 "적은 코드로 많은 일을 하자" 입니다.
기능
- DOM과 관련된 처리를 쉽게 구현할 수 있다.
- 규칙성을 가지고 이벤트 처리를 할 수 있다.
- 애니메이션 효과를 쉽게 만들 수 있다.
- AJAX 처리 방식을 편리하게 사용할 수 있다.
- 웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있습니다.
- 공식 웹사이트(www.jquery.com)와 수많은 레퍼런스를 통해 쉽게 접근 가능합니다.
jQuery 선택자
<title>준비된 핸들러 사용하기</title>
<style type="text/css">
span{font-size : 30pt}
.redtext{color:#f00}
.italictext{font-style:italic;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<!-- 온라인 상에서 jquery소스를 바로 받아서도 사용가능하다.(항시 온라인되있어야함) -->
<script type="text/javascript">
$(document).ready(myFun);
function myFun()
{
$('span').addClass('italictext');
}
$(document).ready(function(){
$('span').addClass('redtext');
});
$(function(){ // 제일 축약한 형식이다 3가지 전부 같은 의미이다.
$('span').addCLass('redtext');
});
</script>
</head>
<body>
<span>korea seoul simple</span>
</body>
</html>
이처럼 jQuery 라이브러리를 온라인 상태에서 바로 연동하여 활용할 수 도있다.
<title> 엘리먼트에 접근해서 스타일 지정 - "element","#은 id"," .은 class " </title>
<style type="text/css">
.spotlight{background-color: #dd8;}
.redtext{color:#f00;}
.largetext{font-size: 30pt;}
.italictext{font-style:italic;}
.spotlight2{background-color:green;}
.largetext2{font-size: 50pt;}
</style>
<script type="text/javascript" src="../js/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('span').addClass('redtext');
$('div').addClass('spotlight');
$('#simpletext1').addClass('largetext');
$('.simpletext1').addClass('italictext');
$('#simpletext2').addClass('spotlight2');
$('.simpletext3').addClass('largetext2');
});
</script>
</head>
<body>
<span id="simpletext1"> simple korea </span>
<div class="simpletext1"> jquery text</div>
<span id="simpletext2"> basic korea</span>
<div class="simpletext3"> example text</div>
</body>
</html>
jQuery 라이브러리를 직접 파일로 받아서 컴퓨터에 저장후 연결해서 활요하는 모습이다.
<script type="text/javascript" src="../js/jquery.js">
위 코드로 src에 직접 컴퓨터에 jQuery 파일이 저장되있는 곳을 연결하여 사용했다.
src 에 연결을 jQuery 라이브러리가 있는 온라인상의 경로를 적어주어도 같은방식으로 연결해서 활용이 가능하다.
