티스토리 뷰
https://jquery.com/ 에서 파일 받기
http://code.jquery.com/jquery/ -> jQuery Core - All 1.x Versions / jQuery Core 1.12.4 - uncompressed, minified
http://jqueryui.com/ effect 모아놓음
------------------------------------------------------------------------
[jQuery 기본개념] "Write less, do more"
javascript+Query(문의)
JSON, Ajax
http://www.w3schools.com/js/js_json_intro.asp
http://www.w3schools.com/js/js_ajax_intro.asp
- 자바스크립트 라이브러리
- '기능' '효과' '연출(시점제어)'
- 자주 사용하는 기능과 효과를 자바스크립트 코드로 만들어 두고 재활용할 수 있게 한 것
- 자바스크립트 라이브러리는 jQuery만 있는 것은 아니다.
- jQuery | prototype.js | MooTools | Dojo
jQuery 많이 사용하는 이유
- CSS를 적용할 수 있으며 DOM(Document Object Model)을 쉽게 다룰 수 있다.
- BOM(Browser Object Model)
- 넓은 범위의 크로스 브라우징을 지원한다. prototype.js | MooTools | Dojo은 지역적으로 적용
- 애니메이션과 대화형 작업을 쉽게 구현할 수 있다.
- 버그가 적고 참고할 수 있는 정보와 문서가 많다.
- 플러그인이 풍부하다.
- 코드를 적게 작성하므로 개발시간을 단축할 수 있다.
- 모바일 기기에 대응할 수 있다.
- MIT 라이선스이므로 자유롭게 사용할 수 있다.
------------------------------------------------------------------------
basic.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 기본</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Orbitron">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<!--
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/basic.js"></script>
바디나 본문 중간에 넣는 경우도 있다. 로딩이 끝난 뒤 불러오는 것이 더 안정적.
-->
</head>
<body>
<h1 id="logo">jQuery</h1>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/basic.js"></script>
</body>
</html>
------------------------------------------------------------------------
main.css
@charset utf-8;
@import url(normalize.css);
h1 {
font: 20px Orbitron, sans-serif;
color: #333;
text-align: center;
margin-top: 20px;
}
------------------------------------------------------------------------
basic.js
//띄어쓰기 노노 붙여쓸 때는 낙타법으로. 행주석: ctrl+/, 블록주석: ctrl+shift+/
//$(); = 자바스크립트 시~작!
//javascript 방식
/*var btn = document.getElementsById('h1');
var hello = function(){
alert('안녕하세요? ^^');
};
if(btn.addEventListener){
btn.addEventListener('click',hello,false);
}else if(btn.attachEvent){
btn.attachEvent('onclick',hello);
}*/
//= 오른쪽 값을 왼쪽에 대입하라.
//jQuery 방식
$(document).ready(function(){
$('#logo').click(function(){
//$('h1')
alert('안녕 jQuery!!');
//경고창 뜸
});
});
------------------------------------------------------------------------
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Basic</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
<link rel="stylesheet" href="css/main_1.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!--
header>h1#logo{Interactive Web Design}
section>div.inner>article>h2{jQuery Basic}
footer>address{Copyright © 2016. Ara}
-->
<header>
<h1 id="logo">Interactive Web Design</h1>
</header>
<section>
<div class="inner">
<article>
<h2>jQuery Basic</h2>
</article>
</div>
</section>
<footer>
<address>Copyright © 2016. Ara</address>
</footer>
</body>
</html>
------------------------------------------------------------------------
main_1.css
@charset "utf-8";
@import url(normalize.css);
body {
background-color: #01b169;
font: 16px Orbitron, sans-serif;
color: #222;
}
/*header*/
header {
background: #fff;
width: 97%;
padding: 20px 0;
padding-left: 3%;
}
#logo {
font-size: 1.5em;
color: #555;
}
#logo:first-letter {
/*first-line도 있음*/
color: hotpink;
font-size: 2em;
}
/*section*/
section {
width: 100%;
}
section > .inner {
width: 800px;height: 500px;
margin: auto;
text-align: center;
line-height: 500px;
}
.inner h2 {
font-size: 3em;
color: #eee;
text-shadow: 2px 2px 5px #333;
letter-spacing: 2px;
}
/*footer*/
footer {
position: fixed;
width: 100%;
bottom: 0;
background: #555;color: #ccc;
line-height: 80px;
text-align: center;
}
footer > address {
font-style: normal;
}
------------------------------------------------------------------------
jQuery 매서드와 매개변수
$('.inner h2').css('','');
" $('.inner h2') "
HTML 요소 -> jQuery 객체로 변경 = 메모리에 저장됨.$anchorScroll
".css()"
jQuery 매서드
"('color','red')"
(매개변수1, 매개변수2)
점(.)과 세미콜론(;)의 역할
jQuery(), $() 함수와 .css() 매서드 사이에는 점(.)으로 jQuery 객체와 jQuery 매서드를 이어준다.
[점(.)의 역할]
-jQuery 객체와 jQuery 매서드를 이어주는 역할
-jQuery 매서드와 jQuery 매서드를 이어주는 역할
(매서드 체인)
[세미콜론(;)의 역할]
-해당 줄(행)의 javascript의 명령 작성이 끝났음을 나타내는 역할;
속성 표기법1 - 중복되어서 과부화 걸릴 수 있다.
$(document).ready(function(){
$('inner h2').css('color','red');
$('inner h2').css('background','blue');
});
속성 표기법2
$(document).ready(function(){
$('inner h2').css({
'color':'red',
'background':'blue'
});
});
속성 표기법3
$(document).ready(function(){
$('inner h2').css({
color:'red',
backgroundColor:'blue'
});
});
------------------------------------------------------------------------