달리는 자동차
jQuery 정리 본문
제이쿼리란
-자바스크립트 수석 개발자였던 존 레식이 창시
-자바스크립트 라이브러리 언어이며, 자바스크립트의 호환성을 해결하였다.
-자바스크립트보다 애니메이션을 쉽게 구현할 수 있도록 개발되었다. 즉, 우리가 웹에서 여러가지 효과를 나타낼 때 자바스크립트를 활용해 아주 어렵고 복잡하게 기능 구현 하는 것을 제이쿼리는 아주 간단하게 구현하게 도와주는 자바스크립트 라이브러리 이다.
-제이쿼리 소스는 <head></head>사이에 위치하고 그냥 사용해서는 안되며 <script type="text/javascript"></script> 사이에 넣게 된다.
<!DOCTYPE html>
<html>
<head>
<title>제이쿼리</title>
<script type="text/javascript">
//이곳에 작성
</script>
</head>
<body>
</body>
</html>스크립트 태그안에 제이쿼리 소스의 기본형을 써야한다.
<script type="text/javascript">
$(function(){
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<!--자바스크립트를 쉽게 표현하기 위해 바꿔놓은 제이쿼리 라이브러리 파일을 같이 불러와야한다.-->
<script type="text/javascript">
$(function(){
});
</script>
</head>
<body>
</body>
</html>최신버전의 제이쿼리 라이브러리 파일 경로는 http://code.jquery.com/jquery-3.2.0.min.js 이다.
제이쿼리 셀렉터 (선택자)란?
선택자는 HTML 요소를 선택하여 가져온다.
<!--클래스 선택하기-->
$('.class_name')
<!--아이디 선택하기-->
$('#id_name')
<!--태그 선택하기-->
$('div')클릭했을때 무언가 실행하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('.content').click(function(){
$('.content').hide();
});
});
</script>
</head>
<body>
<div class="content">hello world<div>
</body>
</html>
<!--content클래스를 선택-->
$('.content')
<!--선택자 뒤에 점을 찍고 클릭 함수를 적는다-->
$('.content').click();
<!--이것을 클릭할 때 어떤 일이 생기게끔 해야하므로 click()안에 함수를 써준다.-->
$(.'content').click(function(){
$('.content').hide();
});
});| hied( ) ->숨기는 함수 / show( ) -> 보여주는 함수 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('.btn_show').click(function(){
$('.btn_word').show();
});
$('.btn_hide').click(function(){
$('.btn_word').hide();
});
});
<script>
</head>
<body>
<button class="btn_show" style="padding:3px">show</button>
<button class="btn_hide" style="padding:3px">hide</button>
<div class="btn_word">Hello world!!</div>
</body>
</html>
-> 버튼 클릭시 글이 보였다가 안보였다가 할 수 있다.
제이쿼리로 css값 변경하기
css에서 글씨 색값을 지정 : selector{color:red}
제이쿼리 : $('SELECTOR').css('color','red'); => css('CSS속성','값');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<style>
.box{width:50px;height:20px;background:yellow}
.btn{cursor:pointer}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
var box=$('.box');
var btn_100px=$('.btn_100px');
var btn_200px=$('.btn_200px');
var btn_300px=$('.btn_300px');
btn_100px.click(function(){
box.css('width','100px');
});
btn_200px.click(function(){
box.css('width','200px');
});
btn_300px.click(function(){
box.css('width','300px');
});
});
</script>
</head>
<body>
<div class="box"></div>
<p class="btn btn_100px">100px</p>
<p class="btn btn_200px">200px</p>
<p class="btn btn_300px">300px</p>
</body>
</html>| 페이드 효과 fadeIn(), fadeOut() fadeIn( ) ->누르면 서서히 나오고, fadeOut( )-> 서서히 사라진다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
var ex_show=$('.ex_show');
var ex_hide=$('.ex_hide');
var ex_box=$('.ex_box');
ex_show.click(function(){
ex_box.fedeIn();
});
ex_hide.click(function(){
ex_box.fadeOut();
});
});
</script>
<style type="text/css">
.ex_show{float:left;margin-right:20px;cursor:pointer}
.ex_hide{float:left;cursor:pointer}
.ex_box{clear:both; float:left; width:100px; height:50px; background-color:yellow; border:1px solid skyblue; margin:50px; border-radius:10px}</style>
</head>
<body>
<b class="ex_show">show click!!</b>
<b class="ex_hide">hide click!!</b>
<div class="ex_box"></div>
</body>
</html>위 해당 페이드 효과의 시간을 조절할 수 있다.
| fadeIn(1000), fadeOut(500), fadeIn('slow'), fadeOut('fast') 1000은 1초를 뜻한다. 0.5초는 1초의 절반이므로 500초가 된다. fast는 200이고 slow는 400을 뜻한다. |
<!--빨리나타나고 천천히사라짐-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
var ex_show_3000=$('.ex_show_3000');
var ex_hide_fast=$('.ex_hide_fast');
var ex_box_3f=$('.ex_box_3f');
ex_show_3000.click(function(){
ex_box_3f.fadeIn(3000);
});
ex_hide_fast.click(function(){
ex_box_3f.fadeOut('fast');
});
});
</script>
<style type="text/css">
.ex_show_3000{folat:left;margin-right:20px;cursor:pointer}
.ex_hide_fast{float:left;cursor:pointer}
.ex_box_3f{clear:both;float:left;width:100px;height:50px;background-color:yellow; border:1px solid skyblue; margin:50px;border-radius:10px}
</style>
</head>
<body>
<b class="ex_show_3000">show click</b>
<b class="ex_hide_fast">hide click</b>
<div class="ex_box_3f"></div<
</body>
</html>| 슬라이드 효과 slideUp( ), slideDown( ) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
var ex_show=$('.ex_show');
var ex_hide=$('.ex_hide');
var ex_box=$('.ex_box');
ex_show.click(function(){
ex_box.slideDown();
});
ex_hide.click(function(){
ex_box.slideUp();
});
});
</script>
<style type="text/css">
.ex_show{float:left;margin-right:20px;cursor:pointer}
.ex_hide{float:left;cursor:pointer}
.ex_box{clear:both; float:left; width:100px; height:50px; background-color:yellow; border:1px solid skyblue; border-radius:10px}
</style>
</head>
<body>
<b class="ex_show">클릭보이기</b>
<b class="ex_hide">클릭숨기기</b>
<div class="ex_box"></div>
</body>
</html>animate()
| $('.hello').animate({ top:100, left:200}); 위 소스는 어떤 특정 요소를 아래로 이동시키는 jquery소스이다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('.hello').animate({
top:100,
left:200
});
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>시간 설정하기
| $('.class_Name').animate({ },시간값); 위의 소스를 5초로 설정하여 넣어본다면 $('.hello').animate({top:100, left:200}, 5000); |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('.hello').animate({
top:100, left:200},5000);
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>| 어떤 행위가 끝나고 이어서 다른행위 시작하기 : function(){ }; 펑션을 animate가 끝난후 넣어준다. 단, fucntion(){}의 앞에 , 를 넣어준다. animate({ },function(){ }; }); |
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('.hello').animate({
top:100,left:200
},function(){
$('.hello').animate({
top:50,
left:50
});
});
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>| 내용 변경 하기 - text( ), html( ) text( ) 어떤 p태그 안에 내용이 hello가 있다면 text()를 사용해서 방가방가로 변경 할 수 있다. 반대로 아무것도 쓰지 않는다면 해당하는 요소가 감싸는 텍스트를 가지고 오는 기능도 있다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script type="text/javascript">
$(function(){
$('.change_greeting').text('방가방가');
});
</script>
</head>
<body>
<p class="change_greeting">hello</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리 강좌</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
var i = $('.hello').text();
alert(i);
});
</script>
</head>
<body>
<p class="hello">hello</p>
</body>
</html>| html( ) html( )도 text( )와 비슷한 기능을 한다. text( )는 텍스트만 불러오지만 html( )은 html태그도 불러온다. 예를들어, $('.class_Name').html('<p>hello</p>'); ->위의 예제를 사용하면 hello를 볼드가 들어간 방가방가로 변경해 주는 소스이다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('.change_greeting').html('<b>방가방가</b>');
});
</script>
</head>
<body>
<p class="change_greeting">hello</p>
</body>
</html>| 클래스 추가하기 -> 대상체클래스.addClass( '추가할 클래스 이름'); var base=$('.base'); base.addClass('base_text'); 위의 소스는 base클래스에 base_text를 추가한다는 뜻이다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
var base=$('.base');
base.addClass('base_text');
});
</script>
<style>
.base{border:4px solid yellow}
.base_text{font-weight:bold;color:hotpink}
</style>
</head>
<body>
<p class="base">hello world</p>
</body>
</html>| 클래스 삭제하기 -> 대상체클래스.removeClass('삭제할 클래스이름'); |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
var id2=$('#each2');
id2.removeClass('common');
});
</script>
<style>
.common{font-size:20px;color:hotpink}
</style>
</head>
<body>
<div id="each1"class="common">hello world</div>
<div id="each2"class="common">hello world</div>
</body>
</html>| 위의 결과에서 $(function(){})이 없다면 둘다 스타일css가 적용되어 핫핑크색의 hello world가 찍힌다. removeClass 함수를 사용하면 해당 클래스명의 효과를 제거해주는 기능을 한다. |
| 요소의 속성값 변경하기 -> attr('속성','속성값'); attr( )은 우리가 태그안에 부가적으로 쓰는 src=" " alt=" " title=" " 등의 값을 변경해 주는 기능을 제공한다. 예를들어, <img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney">에서 src의 속성값을 다르게 변경해주거나 alt의 속성값인 disney를 변경할 수 있게 해준다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
var myimage=$('.myimage');
myimage.click(function(){
myimage.attr('src','/material/images/jQuery/asimo.png'); <!--attr(속성, 속성값)-->
});
});
</script>
<style>
</styel>
</head>
<body>
<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney"/>
</body>
</html>
| 태그이동하기 -> append( ); 먹을 대상.append(먹힐 대상); |
<div class="ex_wrap" style="width:200px;height:100px;border:1px solid #000"></div>
<p>asimo</p>
<p>honda</p>
<p>iphone5</p>
<p>macbook</p>
| 위 소스는 div태그와 p태그가 동일선상에 있다. |
<div class="ex_wrap" style="with:200px;height:100px;border:1px solid #000">
<p class="ex_p">asimo</p>
<p class="ex_p">honda</p>
<p class="ex_p">iphone5</p>
<p class="ex_p">macbook air</p>
</div>
| 두번째 소스는 div태그 안에 p태그들이 들어가 있다. append( ) 사용시 해당소스를 이렇게 옴길 수 있다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
var ex_wrap = $('.ex_wrap');
var ex_p = $('.ex_p');
ex_wrap.append(ex_p); <!--먹을 대상과 먹힐대상-->
});
</script>
<style>
.ex_wrap{float:left;border:1px solid #000000}
.ex_wrap p{clear:both;float:left;margin-left:20px;border:0}
</style>
</head>
<body>
<div class="ex_wrap"></div>
<p class="ex_p">네모 안에 들어간다.</p>
<p class="ex_p">gg</p>
<p class="ex_p">aa</p>
<p class="ex_p">bb</p>
</body>
</html>empty( ) 요소의 내용을 완전히 비어버리는 기능
| HTML 소스 <div class="hello">hello world</div> jQuery 소스 $('.hello').empty( ); |
예를 들어 HTML의 소스에서 hello world를 없애 버리는 기능을 empty( )가 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>empty</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('.hello').empty();
});
</script>
<style>
</style>
</head>
<body>
<div class="hello">hello world</div>
</body>
</html>
<!--실행시 hello world가 안나타난다.-->| remove( )와 empty( ) 함수의 차이 1. empty( )는 비어버리는 기능만을 제공했고 , div태그는 그대로 남아있고 내용만 사라졌다. 그러나 remove( )는 태그 자체가 사라져 버리는 기능을 제공한다. HTML소스 <div class="hello">hello world</div>에서 div 태그를 없애버리는 기능을 한다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>remove( )</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('.hello').remove();
});
</script>
<style>
.hello{border:3px solid yellow}
</style>
</head>
<body>
<div class="hello">hello world</div>
</body>
</html><!--val()은 텍스트의 필드값을 변경해 주는 기능을 제공한다.
만일 텍스트 창 안에 input your name을 한글로 바꾸고 싶을때 아래 val() 함수를 사용하면 된다.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script?
<script type="text/javascript">
$(function(){
$('.text1').val('이름을 입력하세요');
});
</script>
<style>
</style>
</head>
<body>
<input type="text" class="text1" value="input your name"/>
</body>
</html>
input 태그를 마우스로 클릭하여 입력상태로 만든것을 포커스를 얻었다고 한다.
입력상태를 떠난 것을 포커스가 벗어났다고 한다.
그러면 포커스를 얻었을때 어떠한 행위가 나타나도록 하자.
| 포커스를 얻을때 어떤 행위 하기 $('.class_Name').focus(); |
| 포커스를 벗어날 때 어떤 행위 하기 $('.class_Name').blur(); |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
var text1=$('.text1');
text1.focus(function(){
text1.val('포커스를 얻었습니다.');
});
text1.blur(function(){
text1.val('포커스를 벗어났습니다.');
});
});
<script>
<style>
</style>
</head>
<body>
<input type="text" class="text1" value="input your name"/>
<input type="text" class="text2" value="input your id"/>
</body>
</html><!--this의 미사용시-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>this</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
window.onload=function(){
//window.onload=function()을 사용하여 스크립트를 나중에 로드 시켜준다.
$('.click1').click(function(){
$('.click1').text('1번클릭');
});
$('.click2').click(function(){
$('.click2').text('2번클릭');
});
$('.click3').click(function(){
$('.click3').text('3번클릭');
});
$('.click4').click(function(){
$('.click4').text('4번클릭');
});
$('.click5').click(function(){
$('.click5').text('5번클릭');
});
}
</script>
<style>
.click1{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click2{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click3{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click4{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click5{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
</style>
</head>
<body>
<div class='click1'>클릭1</div>
<div class='click2'>클릭2</div>
<div class='click3'>클릭3</div>
<div class='click4'>클릭4</div>
<div class='click5'>클릭5</div>
</body>
</html>
<!--this사용-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>this</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('.view').click(function(){
$(this).text('저만 클릭하셨군요.');
});
});
</script>
<style>
.view{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
</style>
</head>
<body>
<div class="view">이곳만 누르고 글이 나오게끔 하기.</div>
<div class="view">이곳만 누르고 글이 나오게끔 하기.</div>
<div class="view">이곳만 누르고 글이 나오게끔 하기.</div>
<div class="view">이곳만 누르고 글이 나오게끔 하기.</div>
</body>
</html>
<!-- 코드설명
this는 이벤트를 발생시킨 자기 자신을 선택시에 같은 클래스를 갖더라도
자기 자신만을 선택하여 처리해준다. 만일 this를 모를시 아래의 코드가 나오게 된다.-->
| find( ) 어떤 특정 태그 안에 속한 태그를 선택하는 기능을 가지고 있다. HTML <div class="hello"> <p>php</p> <b>html5</b> <h4>css3</h4> </div> 위 소스를 보면 각각 다른 태그로 감싸져 있다. find를 이용해서 h4클래스를 선택할 수 있다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>find()</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
var hello=$('.hello');
var h4=hello.find('h4'); <!--find함수를 이용하여 h4클래스를 선택-->
h4.css('border','1px solid red'); <!--hello클래스 안에 있는 h4클래스만 빨간색 외곽선-->
});
</script>
<style>
</style>
</head>
<body>
<div class="hello">
<p>php</p>
<b>html5</b>
<h4>css3</h4>
</div>
</body>
</html>file업로드 시 목록을 리스트로 보여준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>선택한 파일 목록보기</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
<!--id값으로 선택-->
$("#fileUpload").change(function(){
<!--change()함수는 id가 fileUpload인 값이 바뀔때 마다 이벤트를 발생시킨다.-->
fileList=$("#fileUpload")[0].files;
console.log(fileList.length);
<!--$().files;사용시 선택한 파일의 목록을 볼수 있다.
선택자로 인덱스값을 주어야 파일값을 보여준다.-->
fileListTag='';
for(i=0;i<fileList.length;i++){
fileListTag+="<li>"+fileList[i].name+"</li>";
}
$('#fileList').html(fileListTag);<!--#id값을 선택자로 가져오고
.은 클래스를 가져올 수 있다. html은 태그값을 함께 불러줘서
아래 ul태그에 보여준다.-->
});
});
</script>
</head>
<body>
<form method="post" action="upload-multiple.php" enctype="multipart/form-data">
<input type="file" id="fileUpload" name="upload[]" multiple>
<!-- 여기에 파일 목록 태그 추가 -->
<ul id="fileList"></ul>
<input type="submit" value="send">
</form>
</body>
</html>
Comments