|
|
머리말
모던 웹을 위한 JavaScript JQuery 입문 책을 보고 있는 데요. 데모로 구현된 JQuery 중에서 몇가지만 정리 하여 보았습니다.
준비하기
JQuery 기본문서 형식과 참조하는 방법입니다. JQuery 를 사용하기 위한 기초 작업입니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="../../script/jquery.js"></script>
JQuery 를 참조하는 방법은 2가지가 있는 데 직접 참조하는 방식과 CDN 호스트를 사용하는 방법이 있습니다.
파일의 경우에는
jquery-1.7.js (Uncompressed 버전)
jquery-1.7.min.js (Minified 버전)
이렇게 여러개의 파일이 있습니다. Minified 버전이 파일용량을 최소화하려고 지핑한 파일로 용량이 5배이상 차이가 납니다.
JQuery 보조 파일
마이크로소프트에서 제공하는 JQuery 보조 파일은
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7-vsdoc.js 입니다.
TextArea 에 타이핑한 글자수를 보여주게 구현하기
미투데이(SNS)에서 자신의 생각을 적으면 바로 TextAre 에 입력할 수 있는 남은 글자수가 옆에 나오게 됩니다.
(위의 그림)스크립트 부분 처럼 문서에서 textarea 태그에 keyup 이벤트를 연결합니다.
현재 textarea 의 글자수를 150 에서 뺀 나머지를 H2 태그의 rtext 라는 ID 에 html 로 바꾸어서 넣어 주게 됩니다.
<div>
<textarea cols="70" rows="5"></textarea>
</div>
<h2 id="rtext">150</h1>
위 코드는 <body> 안에 내용입니다.
h2 태그 중에서 rtext 아이디로 되어 있는 것을 선택하여 남은 글자수를 계산하여 넣어주게 되는 코드입니다.
무한 스크롤 이벤트
Mixsh.com 사이트 처럼 스크롤을 내리게 되면 밑으로 스크롤이 다시 늘어나면서 나머지 데이타를 불러 오는 무한 스크롤 입니다.
위 그림은 스크립트 부분입니다.
스크롤에 이벤트를 연결합니다. 그리고 문서의 스크롤과 창의 스크롤를 비교 계산하는 데요. 200 정도 갭을 두기 때문에 스크롤이 내려가면 하단부에 문자를 출력하게 되어 있습니다. 하단부는 <H2 id="pagebottom"> 태그의 pagebottom 이라는 아이디에 삽입하게 만들었습니다.
<h2 id="pagebottom"></h2>
<body> 태그의 하단 부분의 코드입니다.
전체 소스 및 기타 예제보기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="../../script/jquery.js"></script>
<style>
.reverse
{
background:Black;
color:White;
}
</style>
<script type="text/javascript">
var foodlist = [];
foodlist.push({분류:'1류', 명칭:'고철3', 가격:3000});
foodlist.push({분류:'1류', 명칭:'고철23', 가격:3500});
foodlist.push({분류:'1류', 명칭:'고철1', 가격:3500});
for(var key in foodlist)
{
var data1 = foodlist[key].명칭 + "\t" + foodlist[key].가격 + "\n";
}
function fill_div()
{
document.getElementById("testArea").innerHTML="<input type='button' />";
}
// 페이지를 로드할때 수행합니다. onLoad 처럼.
$(document).ready(function () {
// <h3> 태그의 색상을 blue로 찾아서 변경해줍니다.
$('h3').css('color', 'blue');
// class 를 추가합니다. 속성을 추가할 수 있습니다.
$('h3').addClass('item');
// class 를 추가합니다. 속성을 추가할 수 있습니다. (콜백함수)
$('h3').addClass(function (index) {
return 'class' + index;
});
//h1 태그의 스타일을 배열에 있는 색상으로 지정합니다.
var color = ['Red', 'Green', 'Purple'];
$('h1').css('color', function (index) {
return color[index];
});
//h1 태그의 스타일을 배열에 있는 색상으로 지정합니다. (배경색을 지정합니다)
var color = ['Red', 'Green', 'Purple'];
$('h1').css({
color: function (index) {
return color[index];
}, backgroundColor: 'Black'
});
//<h1> 태그에 문자열 추가하기 (내용추가)
$('h1').html(function (index, html) {
return '★' + html + '☆';
});
//동적으로 body에 객체생성하기
$('<h1>동적으로 삽입</h1>').appendTo('body');
// 이벤트 연결하기
//h1 태그중 h1click 라는 id를 클릭하면 문자에 +를 붕ㅌ여 준다.
$('h1#h1click').bind('click', function () {
$(this).html(function (index, html) {
return html + '+';
});
});
// 마우스 올렸을 경우 이벤트
// 마우스를 올리면 Style를 추가해준다.
// bind 이벤트는 한번에 여러 종류의 이벤트를 연결하거나 간단한 이벤트를 연결할 수 없을 때 사용.
$('h1#h1style').bind({
mouseenter: function () { $(this).addClass('reverse') },
mouseleave: function () { $(this).removeClass('reverse'); }
});
//이벤트 연결하기 hover
$('h1#h1style2').hover(function () {
$(this).addClass('reverse');
}, function () {
$(this).removeClass('reverse');
});
// 그림태그의 속성을 정의 합니다. (사이즈 변경처리)
$('img.image1').attr({
width: function (index) {
return (index + 1) * 100;
}, height: 100
});
// 함수실행 2초마다 첫번째 이미지를 마지막으로 보낸다
setInterval(function () {
$('img.image2').first().appendTo($('div#imagelist')); //imagelist 이름의 id의 위치에 image2이름인 class의 이미지를 붙여 넣는다.
}, 2000);
// 타이머를 이용하여 현재 시간을 출력합니다.
var clock = document.getElementById('clock');
setInterval(function () {
var now = new Date();
clock.innerHTML = now.toString();
}, 1000);
// 콤보를 수정할 경우 5초 타이머 이후 출력합니다.
// select > option 은 select 의 부모를 이야기함.
// setTimeout(function(){
// var value = $('select > option:selected').val();
// alert(value);
// }, 5000);
//textare의 글짜 갯수를 출력한다.
$('textarea').keyup(function () {
var inputLength = $(this).val().length;
var remain = 150 - inputLength;
$('h2#rtext').html(remain);
});
// 자동으로 늘어다는 스크롤
// 스크롤 이벤트시 발생
$(window).scroll(function () {
var scrollHeight = $(window).scrollTop() + $(window).height();
var documentHeight = $(document).height();
if (scrollHeight + 200 >= documentHeight) {
for (var i = 0; i < 10; i++) {
//스크롤이 내려가면 pagebottom 하단에 문자열을 추가한다.
//(예: Mixsh.com 하단에 데이타 가져오는 부분처럼)
$('<h1>Infinity Scroll</h1>').appendTo('H2#pagebottom');
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>sdfsdafsdfsda</h1>
<h1 id="h1click">h1 click event add : bind()</h1>
<h1>sdfsdafsdfsda</h1>
<h1 id="h1style">mouse enter style!</h1>
<h1 id="h1style2">mouse hover event style!</h1>
<input type="button" value="click!" onclick="fill_div();" />
<div id="clock"></div>
<select>
<option>Apple</option>
<option>Cat</option>
<option>Dog</option>
</select>
<img src='1-1.jpg' class ="image1" />
<img src='1-1.jpg' class ="image1" />
<img src='1-1.jpg' class ="image1" />
<br />
<br />
<div id="imagelist">
<img src='images/1.jpg' class ="image2" />
<img src='images/2.jpg' class ="image2" />
<img src='images/3.jpg' class ="image2" />
<img src='images/4.jpg' class ="image2" />
<img src='images/5.jpg' class ="image2" />
</div>
<div></div>
<div></div>
<div></div>
<br />
<div>
<textarea cols="70" rows="5"></textarea>
</div>
<h2 id="rtext">150</h1>
<h2 id="pagebottom"></h2>
</div>
</form>
</body>
</html>
출력결과
|
|
