복습
jQuery
- 함수형태의 라이브러리를 지원
- jQuery 라이브러리는 확장자가 .js
- Javascript 파일 또는 jQuery 라이브러리인 .js 파일은 함수단위로 내용이 들어간다
jQuery와 디자인
- 디자인쪽에도 많이 사용된다 (동적인 부분)
- 과거 플래시가 하던 기능들 처리 가능
동기적인 방식
- 페이지가 바뀜
- 부모페이지에서 자식 페이지로 바뀜
- ID 중복검사 시 팝업창을 띄움
비동기적인 방식
- 페이지가 바뀌지 않는다
- 팝업창 띄우지 않고도 ID 중복검사 가능 -> AJAX
- 페이지 바꾸지 않고도 댓글을 바로 쓸 수 있다
jQuery 함수 기본
jQuery(document).ready(function(){
});- Javascript 에서의 document 객체를 의미
- document는 현재문서를 의미한다
- jQuery 대신 $ 로 바꿔쓸 쑤 있다.
- jQuery 함수는 태그를 불러오는 것에만 사용되고, 나머지 기능은 그 뒤의 함수들이 모두 처리 ex) ready(), hide()
- ready() 는 준비가 되었다면 을 의미함
jQuery 함수 간결하게 표기
$(function(){
});
jQuery 함수 안에 들어가는 것
1. HTML 태그
$('div').hide();
2. CSS 선택자
$('#sample1').hide();- 태그가 여러개일때, id 값이나 class 속성값으로 구분
- 그 외 다양한 방법들이 있다
3. document 객체
$(document).ready();
jQuery 이벤트 처리 함수 정리
| click() | 클릭시에 처리를 실행한다. |
| submit() | submit버튼을 클릭할때 실행한다. |
| dblclick() | 더블클릭시에 처리를 실행한다. |
| mousedown() | 마우스의 버튼을 눌렀을 때 처리를 실행한다. |
| mouseup() | 마우스의 버튼이 떨어졌을 때 처리를 실행한다. |
| toggle() | 클릭될 때 마다 다른 처리를 실행한다. |
| mouseover() | 마우스가 오버됐을 때 처리를 실행한다. |
| mouseout() | 마우스가 아웃되었을 때 처리를 실행한다. |
| mousemove() | 마우스가 이동될 때 처리를 실행한다. |
| one() | 이벤트 발생에 한 번만 처리를 실행한다. |
| unbind() | 설정되어 있는 이벤트 처리를 취소한다. |
| live() | 앞으로 추가될 태그에 이벤트 처리를 설정한다. |
| change() | 값의 변화가 발생할때 |
jQuery 예제8
다양한 형태의 선택자 응용 예제1
- sample4.html
<!DOCTYPE html>
<html>
<head>
<title>sample4</title>
<meta charset="UTF-8">
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// $(function(){
$(".first strong").css("color","red");
});
</script>
</head>
<body>
<ul>
<li class="first"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li class="second"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li class="third"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li class="fourth"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>- <li> 태그 안에 자식태그인 <strong> 태그가 있다, <li> 태그는 부모태그, <strong> 태그는 자식태그
- jQuery 코드에서 .first 는 class값이 first 인 태그를 불러온다
- 한칸 띄어쓰기는 자손태그(자식태그 포함)을 의미한다
- 즉 class값이 first 로 되어있는 태그의 자손태그 중 strong 태그를 불러와라는 의미
* 자손태그 = 후손태그 = 자식태그를 포함한 후손의 모든 태그
+ <strong> 태그는 안의 내용을 bold 로 출력
jQuery 예제9
다양한 형태의 선택자 응용 예제2
- sample5.html
<!DOCTYPE html>
<html>
<head>
<title>sample5</title>
<meta charset="UTF-8">
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("li *").css("color","red");
});
</script>
</head>
<body>
<ul>
<li><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li><em> 텍스트 </em> 텍스트 텍스트 텍스트 텍스트 </li>
<li><span> 텍스트 </span> 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트텍스트텍스트텍스트 </li>
</ul>
</body>
</html>- li는 모든 li 태그를 불러와라는 의미이고 한칸 띄워져있으므로 자손태그를 의미한다
- 'li *' 라는 선택자는 <li> 태그의 모든 자손태그를 불러와라는 의미
- 즉 <li> 태그의 자손태그인 <strong>, <em>, <span> 태그들이 해당된다 (<li> 가 아닌 <li>의 자손태그에 해당)
* 자손태그 = 후손태그 = 자식태그를 포함한 후손의 모든 태그
+ <em> 태그 안에 내용은 기울임체
- <li> 태그에만 해당하는 것은 CSS가 적용되지 않음
- <li> 태그의 자손태그에 해당하는 <strong> <em> <span> 부분의 내용만 CSS가 적용됨
jQuery 예제10
다양한 형태의 선택자 응용 예제3
- sample6.html
<!DOCTYPE html>
<html>
<head>
<title>sample6</title>
<meta charset="UTF-8">
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("#first,#third").css("color","red");
});
</script>
</head>
<body>
<ul>
<li id="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>- #first 은 id값이 first로 되어있는 태그를 불러와라는 의미이고, #third는 id값이 third로 되어있는 태그를 불러와라는 의미
- 선택자에서 ',' 가 있을땐 양쪽 두개가 모두 동일한 적용을 받게 된다
- 즉, id값이 first로 되어있는 태그도 불러오고, id값이 third로 되어있는 태그도 불러와라는 의미
- id값이 first 인 li 태그와 id값이 third인 li 태그만 CSS의 적용을 받는다
jQuery 예제11
jQuery 이벤트 처리 예제 1
+ 크롬 브라우저에선 폴더명에 공백이 있으면 실행되지 않음, 이름바꾸기로 공백을 없애주기
- sample1.html (이름은 같지만 어제했던 파일과 다른파일임)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample1</title>
<script src="jquery-1.6.4.min.js"></script>
<script>
jQuery(document).ready(function(){
// $(function(){
// $("input")
// $("input:button")
// $(":button")
// $('input[type=button]')
// $("#b1")
$("#b1").click(function(){
$("img").attr("src","sea.jpg")
.attr("title","바다")
.attr("width",150)
.attr("height",150);
alert("그림이 바꼈습니다.");
});
});
</script>
</head>
<body>
<!--
<button>화면을 변경</button>
<button type="button">화면을 변경</button>-->
<input type=button value="화면을 변경" id="b1">
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html><head>
- jQuery 에선 이벤트를 처리할때, 가장 먼저 이벤트를 발생시킨 태그를 구해와야한다
- input 태그에서 이벤트가 발생하므로, input 태그를 먼저 "#b1"으로 구해온다
- (지금은 input 태그가 1개이므로'input' 으로도 구해올 수 있다)
- click() 함수를 통해 이 버튼을 클릭시 처리해야할 내용은 function의 내용이다
- img 태그를 불러온 다음, attr() 함수를 사용해서
<body>
- 버튼이 만들어져있고, 버튼의 id값은 "b1", 또한 초기 이미지 flower.jpg 가 들어가있다
- attr() 함수로 해당 이미지 태그의 속성값들을 변경하고 있다
- src는 "sea.jpg" 로 변경되고, title은 "바다" 로 변경되고 width 와 height 는 각각 150으로 변경되었다
* Attr() 함수 설명은 아래
* jquery.com 에서 API 찾아보기 설명은 아래
+ 버튼을 누르면 사진이 변경된다
+ 이걸 Javascript로 구현하기는 쉽지 않음, jQuery 에선 지원하는 함수들이 많으므로 더욱 간편하게 구현 가능
* Attr() 함수
용어
| HTML | XML |
| 태그 | Element |
| 속성 | Attribute |
- src, width, height, title 은 속성(Attribute)
+ XML 파일은 반드시 가장 바깥쪽에 사용될 루트 엘리먼트를 반드시 1개 가지고 있어야한다
* 루트 엘리먼트 = XML 에서 가장 바깥쪽에 사용되는 태그
Attr() 함수
- HTML 태그의 속성을 설정/변경
- Attribute 속성을 변경시킬때 사용하는 함수
Attr() 함수의 2가지 용도
1. 속성에 속성값을 설정
- 2개의 매개변수
//attr('속성', '속성값')
attr('src', 'flower.jpg')- 첫번째 매개변수에 속성명, 두번째 매개변수에 속성값을 사용하여 속성을 설정 및 수정
2. 속성을 이용해서 속성값을 구해온다.
- 1개의 매개변수
//attr('속성')
attr('href')- 'href' 속성값을 구해온다
- 해당 속성명의 속성값을 구해온다
* jquery.com 에서 API 찾아보기
.attr() | jQuery API Documentation
Description: Get the value of an attribute for the first element in the set of matched elements. The .attr() method gets the attribute value for only the first element in the matched set. To get the value for each element individually, use a looping constr
api.jquery.com
함수 형식
예제와 데모
jQuery 이벤트 처리 함수 정리
| click() | 클릭시에 처리를 실행한다. |
| submit() | submit버튼을 클릭할때 실행한다. |
| dblclick() | 더블클릭시에 처리를 실행한다. |
| mousedown() | 마우스의 버튼을 눌렀을 때 처리를 실행한다. |
| mouseup() | 마우스의 버튼이 떨어졌을 때 처리를 실행한다. |
| toggle() | 클릭될 때 마다 다른 처리를 실행한다. |
| mouseover() | 마우스가 오버됐을 때 처리를 실행한다. |
| mouseout() | 마우스가 아웃되었을 때 처리를 실행한다. |
| mousemove() | 마우스가 이동될 때 처리를 실행한다. |
| one() | 이벤트 발생에 한 번만 처리를 실행한다. |
| unbind() | 설정되어 있는 이벤트 처리를 취소한다. |
| live() | 앞으로 추가될 태그에 이벤트 처리를 설정한다. |
| change() | 값의 변화가 발생할때 |
- keyup 이벤트 등 이것 외에도 많은 이벤트 함수들이 제공된다
jQuery 예제12
jQuery 이벤트 처리 예제 2
- 하이퍼링크에 click() 을 썼을때 생기는 문제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample2</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
$("img").attr("src","sea.jpg")
.attr("title"," 바다");
alert("이미지 변경");
});
});
</script>
</head>
<body>
<a href="sea.jpg">화면을 변경</a>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>- sample1.html 처럼 버튼이 아니라 텍스트에 하이퍼링크를 걸어서 하이퍼링크를 클릭시 이미지를 변경시키려 하고 있다
- 하이퍼링크 a 태그도 클릭시 클릭 이벤트가 발생한다, 그래서 click() 을 사용하여도 된다
- 하지만 하이퍼링크 클릭시에 image src 가 변경되고 title 값도 변경되지만 이미지가 변경된 이후에 anchor 태그가 같이 동작됨
- 링크걸린 것이 동작이 되어서 브라우저 전체가 이미지를 덮어버리는 문제가 발생한다
+ 이 예제의 문제를 다음 예제에서 해결한다
sample2.html 해결 방법 2가지
1. a 태그로 링크를 걸때 href 에 링크대신 # 또는 javascript:void(0) 으로 수정
- 다음 예제 sample3.html 에서 설명
<a href="sea.jpg">화면을 변경</a>- 이었던 코드를
<a href="#">화면을 변경</a>- 또는
<a href="javascript:void(0)">화면을 변경</a>- 이렇게 변경시 anchor 가 실행되지 않음
- 링크를 걸 내용들이 수정되면 안되는 경우가 있다
2. 이벤트 함수의 마지막에 return false; 추가
$(function(){
$("a").click(function(){
$("img").attr("src","sea.jpg")
.attr("title","바다");
return false;
});
});- 다음 예제 sample4.html 에서 설명
jQuery 예제13
jQuery 이벤트 처리 예제 4
- 하이퍼링크에 click() 을 썼을때 생기는 문제 해결 첫번째 방법
- sample2.html 문제의 해결방법 첫번째
- 하이퍼링크의 기능 무효화 방법 1번
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample3</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
$("img").attr("src","sea.jpg")
.attr("title","바다");
});
});
</script>
</head>
<body>
<a href="javascript:void(0)">화면을 변경</a>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>- # 으로 한것과 같은 의미
jQuery 예제14
jQuery 이벤트 처리 예제 5
- 하이퍼링크에 click() 을 썼을때 생기는 문제 해결 두번째 방법
- sample2.html 문제의 해결방법 두번째
- 하이퍼링크의 기능 무효화 방법 2번
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample4</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
$("img").attr("src","sea.jpg")
.attr("title","바다");
return false;
});
});
</script>
</head>
<body>
<a href="sea.jpg">화면을 변경</a>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>- click() 함수 맨 마지막 줄에 return false를 추가시 anchor 태그로 링크가 걸려있다 하더라도 실행되지 않게 막아줌
- return false는 함수를 빠져나감과 동시에 anchor 하이퍼링크를 실행시키지 않도록 막아줌
- 주로 사용하는 방식이다
이벤트 발생 태그 얻기
- id 나 class 값 말고도 다른 방법으로 태그를 구해오는 방법들
- eq 필터 사용
- this 사용
jQuery 예제 15
이벤트 발생 태그 얻기 예제 1
eq 필터 사용
- id 나 class 값 말고도 다른 방법으로도 태그를 구해올 수 있는 방법들이 있다. 그중 하나
- sample5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample5</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// eq 필터 : 특정 태그안에 지정한 순서의 태그를 구하는 셀렉터
$(function(){
$("a:eq(0)").click(function(){
$("img").attr("src","flower.jpg").attr("title","꽃");
return false;
});
$("a:eq(1)").click(function(){
$("img").attr("src","sea.jpg")
.attr("title","바다");
return false;
});
$("a:eq(2)").click(function(){
$("img").attr("src","Jellyfish.jpg").attr("title","해파리");
return false;
});
$("a:eq(3)").click(function(){
$("img").attr("src","building.jpg").attr("title","건물");
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="Building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>- 이벤트를 발생시킨 태그 4개를 구해오고 있다, 모두 같은 태그인 a 태그로 되어있으므로 id, class 값으로 구해올 수 있다.
- 하지만 여기선 id값이 따로 없기에 구분이 안됨, 동일 태그를 eq 필터를 사용해서 구해오고 있다
- 첫번째 a 태그를 a:eq(0) 으로 구해오고 있다, a 태그 중 첫번째 순서의 태그를 의미한다
- 두번쨰 a 태그를 a:eq(1) 로 구해오고 있다, a 태그 중 두번째 순서의 태그를 의미한다.
- img 태그는 한개이므로 img 태그로 구해와서 attr() 로 src 속성값을 변경하므로서 이미지를 변경시키고 있다
- click() 함수 내부 아래쪽에 return false를 사용해서 anchor 태그의 하이퍼링크 실행을 막는다
- 초기화면은 꽃 이미지이고 4개의 메뉴중 하나를 클릭하면 해당 이미지가 나타남
$(this)
- 코드가 훨씬 간결하고 eq 필터보다 더 많이 사용하는 방식
1. 이벤트가 발생한 태그를 얻어오는 셀렉터가 $(this)
2. click 이벤트만 사용할 수 있다.
jQuery 예제 16
이벤트 발생 태그 얻기 예제 2
this 사용
- id 나 class 값 말고도 다른 방법으로도 태그를 구해올 수 있는 방법들이 있다. 그중 하나
- sample6.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample6</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// $(this)
// 1. 이벤트가 발생한 태그를 얻어오는 셀렉터가 $(this)
// 2. click 이벤트만 사용할 수 있다.
// img 태그의 src 속성과 title 속성을 attr()함수로 설정함
// 클릭한 태그의 href 속성을 $(this).attr("href")로 구함.
// 클릭한 태그안의 텍스트를 $(this).text()로 구함.
$(function(){
$("a").click(function(){
$("img").attr("src",$(this).attr("href"))
.attr("title",$(this).text());
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>- 구체적으로 src 의 속성값, 즉 어떤 이미지를 사용할지를 지정하지 않음
- 이벤트를 발생시키는 태그인 anchor 태그부터 구해온다, 이때 4개의 anchor 태그를 모두 구해옴
- a 태그를 눌렀을때, img 태그를 구해와서 attr() 로 먼저 src 를 변경시키려 한다, attr("src", $(this).attr("href"))
this 사용 1 (sample6.html 부분)
$("img").attr("src",$(this).attr("href")$(this)
- 여기서 this의 의미 : 사용자가 불러왔던 a 태그 중 이벤트를 발생시킨 a 태그 하나
- 사용자가 이벤트를 발생시킨 태그를 의미
ex) '건물'이라는 하이퍼링크를 클릭시 '건물'의 a 태그가 this 가 됨
attr("href")
- attr() 함수의 2번째 형태, 매개변수로 속성명을 쓰면 속성값을 구해줌
ex) '건물' 클릭시 위에서 지정된 $(this) 는 선택된 a 태그를 의미하므로 그 a 태그의 href 속성값인 "building.jpg" 를 구해줌
즉 $(this).attr("href") 는 building.jpg 이고, attr("src", "building.jpg") 와 같으므로 빌딩 이미지로 변경되게 됨
this 사용 2 (sample6.html 부분)
$("img").attr("src",$(this).attr("href"))
.attr("title",$(this).text()); <li><a href="building.jpg">건물</a></li>- 위 코드에서 마찬가지로 '건물' 을 클릭시 $(this) 는 '건물' 이 이 있는 특정 <a> 태그를 구해옴
- text() 함수는 그 태그 안의 내용(값) 을 구해오는 함수이므로 $(this).text() 는 "건물" 이 된다
- 그래서 title 속성값은 "건물" 로 변경된다
jQuery 예제17
jQuery 이벤트 함수 종류 예제 1
- click() 외 또다른 이벤트 함수들
- dblclick() : 더블클릭 이벤트 함수
- sample7.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample7</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// 특정 태그(button)를 더블클릭 하여 이벤트 처리 하고 싶을때 dblclick()를 사용
$(function(){
$("button").dblclick(function(){
$("img").attr("src","sea.jpg")
.attr("title","바다");
});
});
</script>
</head>
<body>
<button>화면을 변경</button>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>- 더블클릭 이벤트를 처리하기 위한 dblclick() 함수가 있다.
- dblclick() 함수 안의 코드는 더블클릭 시 실행됨
jQuery 예제18
jQuery 이벤트 함수 종류 예제 2
- click() 외 또다른 이벤트 함수들
- dblclick() : 더블클릭 이벤트 함수
- 버튼이 아닌 a 태그 하이퍼링크에 더블클릭 이벤트 처리를 하면 생기는 문제와 해결
- sample8.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample8</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// a 태그에 설정한 dblclick()이 동작하지 않을 경우
// a 태그에 dblclick()를 설정한 경우에는 더블 클릭(dblclick())시에는 실행하고
// 싶은 처리를 하고, 클릭(click())시에는 return false; 를 설정해서 링크를
// 무효화 시킨다.
$(function(){
/*
$("a").dblclick(function(){
$("img").attr("src",$(this).attr("href"))
.attr("title",$(this).text());
});
*/
$("a").dblclick(function(){
$("img").attr("src",$(this).attr("href"))
.attr("title",$(this).text());
}).click(function(){
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>- 버튼이 아닌 a 태그의 텍스트에 더블클릭 이벤트를 처리했다
- 더블클릭시 더블클릭 전에 클릭이 먼저 수행되므로 링크가 수행되어 브라우저가 이미지를 덮게 되는 문제가 발생
- 그 문제 해결을 위해 링크를 무효화 해야한다
- 하이퍼링크를 무효화 하기 위해 dblclick() 뒤에 click() 함수를 사용해서 click() 안에 return false를 사용해서 클릭시 링크가 수행되는 것을 막고 있다.
dblclick() 안에 return false; 를 쓰는게 아니라 click() 안에 return false; 를 써야하는 이유
- 이유 : 더블클릭 전에 클릭이 먼저 수행되므로, 클릭 시 하이퍼링크 실행
jQuery 예제19
jQuery 이벤트 함수 종류 예제 3
- click() 외 또다른 이벤트 함수들
- mousedown() : 마우스 버튼을 눌렀을때 이벤트 발생
- sample9.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample9</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// mousedown 이벤트 : 특정 태그위에 마우스 포인터가 있는 상태에서
// 마우스 버튼을 눌렀을 때 이벤트가 발생함.
// cf. click 이벤트는 눌러고 있던 손가락 떨어 졌을때 발생함.
$(function(){
$("a").mousedown(function(){
$("img").attr("src",$(this).attr("href")).attr("title",$(this).text());
$("body").css("background","yellow");
}).click(function(){
return false;
});
});
</script>
</head>
<body>
<div id="test"> 이미지 변경 </div><br><br>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>- click 이벤트와 동작시점이 미묘하게 차이가 있다
- a 태그를 클릭시 body 태그에 CSS를 적용하고 있다
- 이때, 하이퍼링크에 mousedown() 이벤트를 처리했으므로, mousedown 이벤트가 먼저 발생 후 손을 떼는 순간 click 이벤트가 발생함
- 이때, click 시에 하이퍼링크가 실행되는 것을 막기 위해서 click() 을 추가해주고 안에 return false를 추가함
- 여기선 mousedown 이벤트가 먼저 발생하고 손을 떼는 순간 click 이벤트가 다음으로 실행된다
click 이벤트 vs mousedown 이벤트
- click 이벤트 : 마우스를 누른 후 뗐을때, 즉 클릭이 되었을때 발생
- mousedown 이벤트 : 마우스를 누른 직후 발생
jQuery 예제 20
jQuery 이벤트 함수 종류 예제 4
- click() 외 또다른 이벤트 함수들
- mouseup() : 마우스 버튼을 눌렀다가 뗐을때 이벤트 발생
- sample10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample10</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// mouseup 이벤트 : 특정 태그위에 마우스 포인터가 있는 상태에서
// 이미 눌러있던 버튼이 떨어지는 경우에 이벤트가 발생함.
$(function(){
$("a").mouseup(function(){
$("img").attr("src",$(this).attr("href")).attr("title",$(this).text());
$("body").css("background", "green");
}).click(function(){
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>- Click 이벤트는 말 그대로 어떤 컨트롤을 Click 했을때 발생하는 이벤트
- Mouse Up 은 어떤 컨트롤에서 마우스 버튼을 release 할때 발생하는 이벤트
- 마우스로 어떤 컨트롤을 클릭했을때 MouseDown-MouseUp-Click 이벤트 순으로 이벤트 발생
toggle() 함수
- 클릭할 때 마다 다른 처리를 실행하고 싶은 경우에 편리하게 사용할 수 있다
1. 괄호안에 function(){...}을 컴마(,)로 구분하며 여러가지 설정이 가능하고, 클릭한 순서대로 실행한다.
2. 설정해 놓은 처리가 마지막까지 실행되면, 처음 처리로 돌아와서 반복 실행한다
$(function(){ $(셀렉터).toggle(function(){ 처음 클릭했을 때 실행할 문장 },
function(){ 두 번째 클릭했을 때 실행할 문장 },
function(){ (중략...) },
function(){ 마지막 클릭했을 때 실행할 문장 });
jQuery 예제21
jQuery 이벤트 함수 종류 예제 5
- click() 외 또다른 이벤트 함수들
- toggle() : 요소를 클릭할 때마다 로테이션으로 다른 내용들을 실행해줌
- sample11.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample11</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// toggle 이벤트 : 클릭할 때 마다 다른 처리를 실행하고 싶은 경우에 편리하게
// 사용할 수 있다.
// 1.괄호안에 function(){...}을 컴마(,)로 구분하며 여러가지 설정이 가능하고,
// 클릭한 순서대로 실행한다.
// 2.설정해 놓은 처리가 마지막까지 실행되면, 처음 처리로 돌아와서 반복
// 실행한다
/* $(document).ready(function(){
// $(function(){
$(셀렉터).toggle(function(){
처음 클릭했을 때 실행할 문장
}, function(){
두 번째 클릭했을 때 실행할 문장
}, function(){
(중략...)
}, function(){
마지막 클릭했을 때 실행할 문장
});
});
*/
$(function(){
$("button").toggle(function(){
$("img").attr("src","sea.jpg")
.attr("title","바다");
},function(){
$("img").attr("src","Jellyfish.jpg")
.attr("title","해파리");
},function(){
$("img").attr("src","building.jpg")
.attr("title","건물");
},function(){
$("img").attr("src","flower.jpg")
.attr("title","꽃");
});
});
</script>
</head>
<body>
<button type=button>화면을 변경</button>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>- 버튼이 하나뿐이지만 클릭할때마다 이미지들이 로테이션됨
- 달라지는 내용을 따로따로 함수형태로 추가함, 추가된 내용들이 순차적으로 로테이션 됨
- 마치 toggle() 함수의 매개변수를 여러개 넣는 것 처럼 function(){} 을 계속 추가한다
jQuery 예제22
jQuery 이벤트 함수 종류 예제 6
- click() 외 또다른 이벤트 함수들
- mouseover() : 특정 요소에 마우스를 위로 가져다 올리면 실행됨
- mouseout() : 마우스가 올라간 상태에서 마우스를 치우면 실해됨
- sample12.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample12</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// $(function(){
$("img").mouseover(function(){
$(this).attr("src","sea.jpg")
.attr("title","바다");
$("body").css("background","yellow");
}).mouseout(function(){
$(this).attr("src","flower.jpg")
.attr("title","꽃");
$("body").css("background","green");
});
});
</script>
</head>
<body>
<img src="flower.jpg" title="꽃" />
</body>
</html>- 마우스를 이미지로 가져다 대면 mouseover 이벤트가 발생하여 바다이미지로 변경하고 배경색을 노랑색으로 한다
- 마우스를 이미지에서 다른곳으로 치우면 mouseout 이벤트가 발생하여 꽃 이미지로 변경하고 배경색을 초록색으로 한다
- 이벤트를 발생시키는 태그는 img 태그이므로 this 자리에 'img' 를 대신 써도 된다, img 태그는 하나뿐이므로 'img' 로 대체 가능
- img 태그는 공통으로 사용되기 때문에 $("img").mouseover().mouseout() 으로 연결해서 사용하여도 되고, $("img").mouseover() 과 $("img").mouseout() 으로 따로 작성하여도 똑같다.
jQuery 예제23
jQuery 이벤트 함수 종류 예제 6
- click() 외 또다른 이벤트 함수들
- mousemove() : 마우스가 움직일때 실행됨
- sample13.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample13</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// img태그 위에 마우스포인터가 움직이는 경우에 마우스 포인터의 x좌표와 y좌표를
// p태그에 출력하는 스크립트.
$(function(){
$("img").mousemove(function(e){
$("p").html("현재 X좌표:"+e.clientX+"<br> 현재 Y좌표:"+e.clientY);
});
});
</script>
</head>
<body>
<img src="flower.jpg" title="꽃" />
<p></p>
</body>
</html>- p 태그는 좌표값이 출력될 영역
- 좌측 상단을 기준으로 움직일때마다 해당 마우스 포인트의 좌표값을 출력
- mousemove() 함수에 의해 이미지 내에서 마우스를 움직일때마다 mousemove() 안쪽 내용이 실행됨
- function의 매개변수 e 의 ClientX 속성을 통해서 마우스포인터의 x좌표값을 구해온다
- function의 매개변수 e의 ClientY 속성을 통해서 마우스 포인터의 y좌표값을 구해온다
특정 태그 안에 결과를 출력시켜주는 함수
html() 함수
- 불러온 p 태그 사이에 안의 내용을 출력시켜줌, 이 html() 함수는 안의 html 코드를 인식하므로 <br> 을 인식해서 줄을 바꿔서 출력한다
text() 함수
- html() 대신 text() 태그를 쓰면 <br> 태그를 인식하지 못하고 문자로 출력해줌
jQuery 예제24
jQuery 이벤트 관련 함수 1
- 이벤트를 최초 한번만 실행해줌
- one() : 이벤트를 한번만 실행해주는 함수
- sample14.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample14</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// 지정한 태그에서 발생한 이벤트에 대해 한 번만 실행되도록 하는 명령어가 one()
// $(셀렉터).one("이벤트 발생 조건", function(){
// 이벤트 발생시에 실행하는 부분
// }
$(function(){
$("a").one("click",function(){
// $("a").click(function(){
$("img").attr("src",$(this).attr("href"))
.attr("title",$(this).text());
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>- 먼저 이벤트를 발생시키는 태그인 a 태그를 구해옴
- one() 함수로 이벤트가 한번씩만 발생하도록 하고 있다
- one("이벤트명", function(){}); 으로 하면 해당 이벤트를 한번만 실행해준다. 이벤트 발생시 실행되는 내용은 function 안의 내용
- $(this).text() 처럼 text() 함수의 매개변수에 아무것도 없을때는 값을 구해온다
- 처음 한번 클릭시에는 이미지를 변경해주지만 다음에 클릭했을땐 이미지 변경해주지 않음, 그냥 클릭이 되어 하이퍼링크만 실행됨
* text() 함수 설명 아래에
text() 함수
- 매개변수가 없을땐 해당 태그 사이의 값을 구해옴
.attr("title",$(this).text());- 매개변수가 있을땐 그걸 출력시킴
$("p").text("현재 X좌표:"+e.clientX+"<br> 현재 Y좌표:"+e.clientY);jQuery 예제24
jQuery 이벤트 관련 함수 2
- 설정되어있는 이벤트를 취소시켜주는 함수
- unbind() : 설정되어있는 이벤트를 취소시켜줌
- sample15.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample15</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// unbind()는 설정되어 있는 이벤트 처리를 취소하는 명령
// a태그가 클릭되면 img태그를 변경하는 이벤트 처리가 되지만
// 취소라는 버튼을 클릭하면 unbind()에서 a태그의 이벤트를 취소한다.
$(function(){
$("a").click(function(){
$("img").attr("src",$(this).attr("href")).attr("title",$(this).text());
return false;
})
$("button").click(function(){
$("a").unbind("click"); // anchtor 태그에 설정된 click 이벤트를 취소해주는 역할
});
});
</script>
</head>
<body>
<button>취소</button>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>- unbind() 함수로 설정되어있는 click() 이벤트를 취소
- 이벤트 동작이 잘 되다가 취소 버튼을 누르면 이벤트 처리가 되지 않음
- 이벤트를 발생시키는 a 태그에서 click() 이벤트를 처리했는데 이 이벤트를 취소하고 싶으면 해당 태그인 a 태그를 구해야 한다
- 그 후 unbind("click") 로 a 태그에 대한 click 이벤트 취소
- unbind()로 취소하는 코드를 버튼태그 click 이벤트에서 처리하고 있다
jQuery 예제25
jQuery 이벤트 관련 함수 3
- live() : 앞으로 추가될 태그에 대해 이벤트 처리해주는 함수
- sample16.html 은 문제점, sample17.html은 해결법
- 여기선 새로 추가된 태그에 대해 동작하지 않음
- sample16.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample16</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// 실행한 시점에 존재하는 태그와 더불어 앞으로 추가될 태그에도 이벤트 처리를
// 설정할 수 있는 명령어가 live() 입니다.
// click 이벤트로 처리
$(function(){
$("a").click(function(){
$("img").attr("src",$(this).attr("href")).attr("title",$(this).text());
return false;
});
$("button").click(function(){
$("ul").append("<li><a href='building.jpg'>건물</a></li>");
});
});
</script>
</head>
<body>
<button>li 요소를 추가</button>
<ul>
<li><a href="flower.jpg"> 꽃</a></li>
<li><a href="sea.jpg"> 바다</a></li>
<li><a href="Jellyfish.jpg"> 해파리</a></li>
</ul>
<p><img src="flower.jpg" title=" 꽃" /></p>
</body>
</html>- 3개의 a 태그를 모두 불러와서 click() 이벤트 처리를 했다
- 버튼을 누르면 건물이라는 메뉴가 하나 더 나타난다
- append() 함수를 통해 <ul> 태그 안에 <li> 코드를 추가하여 메뉴가 하나 더 나타나게 되는 것
- append() 함수 : 불러온 태그 안에 새로운 내용 추가
- 하지만 새로 나타난 '건물'은 click() 이벤트 처리가 되어있지 않는 문제가 발생
+ 버튼을 누를떄마다 append() 가 실행되고, 누를때마다 <li>가 추가됨
- 건물은 처음부터 있던 요소가 아니므로 이벤트 처리가 되어있지 않음
- 처음에 없던 메뉴이므로 '빌딩' 메뉴는 click 이벤트 적용이 안됨
위 문제 해결방법
- live() : 앞으로 추가될 태그에 대해 이벤트 처리해주는 함수
- sample16.html 은 문제점, sample17.html은 해결법
- sample17.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample17</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// 실행한 시점에 존재하는 태그와 더불어 앞으로 추가될 태그에도 이벤트 처리를
// 설정할 수 있는 명령어가 live() 입니다.
// live 이벤트로 처리
$(function(){
$("a").live("click",function(){
$("img").attr("src",$(this).attr("href")).attr("title",$(this).text());
return false;
});
$("button").click(function(){
$("ul").append("<li><a href='building.jpg'>건물</a></li>");
});
});
</script>
</head>
<body>
<button>li 요소를 추가</button>
<ul>
<li><a href="flower.jpg"> 꽃</a></li>
<li><a href="sea.jpg"> 바다</a></li>
<li><a href="Jellyfish.jpg"> 해파리</a></li>
</ul>
<p><img src="flower.jpg" title=" 꽃" /></p>
</body>
</html>- sample16.html 의 click() 함수가 있던 자리에 live() 함수로 바뀜
- live() 함수 : 현재시점에 존재하는 태그 뿐 아니라 앞으로 추가될 태그까지 이벤트 처리를 할 수 있게 해줌
- live("이벤트명", function(){}); 으로 하면 앞으로 추가될 태그까지 이벤트 처리해줌, 이벤트 발생시 실행되는 내용은 function 안의 내용
+ 버튼 클릭할때마다 append() 함수에 의해 메뉴가 추가됨
jQuery 예제 26
jQuery form 태그 관련 함수 예제 1
- form 태그에 사용되는 jQuery 함수들
- sample1.html (아까의 sample1.html 과 다른 파일)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample1</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// text()메소드의 괄호안에 아무것도 기술하지 않은 경우에는,
// 셀렉터로 지정한 태그에 포함되어 있는 텍스트를 가져온다.
// text()메소드의 괄호안에 값이 설정되어 있을 경우에는
// 셀렉터(button)의 value값을 설정하게 된다.
// (이벤트가 발생되기 전에는 "확인" 버튼 이지만,
// clik이벤트가 발생한 뒤에는 "전송" 버튼으로 변경됨)
// val()메소드는 괄호안에 아무것도 기술하지 않고 사용하면,
// 폼 태그에 입력되어 있는 텍스트나 선택되어 있는 값을 가져온다.
// 셀렉터로 input태그를 지정하면 val()은 폼 태그의 종류를
// 결정하는 type속성에 상관없이 모든 input 태그의 value속성값을
// 가져온다.
$(function(){
$("#con").click(function(){ // 확인
// $("p").text($("input").val()+"로 메일을 전송합니다.");
alert($("input").val());
$("#con").text("전송");//확인->전송
// $("#re").text("cancel");//취소->cancel
$("#re").hide();
});
$("#re").click(function(){ // 취소
$("input").val("");
$("input").focus();
});
});
</script>
</head>
<body>
<p>E-mail 주소：
<input type="text" name="name" /></p>
<button id="con">확인</button>
<button id="re">취소</button>
</body>
</html>- 이벤트 처리가 발생하는 태그인 "확인" 버튼 태그를 구해와서 click() 을 사용함
- 다음으로 $("input").val() 로 사용자가 입력한 이메일 주소값을 가져옴
- val() 함수 : 입력양식 요소의 (text) "값"을 가져옴
- "확인" 버튼을 클릭시, 그 버튼 태그 안의 내용을 text() 함수를 통해 버튼 레이블을 "전송"으로 변경하고 "취소" 버튼은 hide() 로 숨김
+ value() 는 값을 가져오는 기능도 있고 값을 설정하는 기능도 있다
text() vs value()
- text() 함수 : 링크가 걸려있거나 일반 텍스트에 대해 적용
- value() 함수 : 입력양식 / 선택양식 에 대해서만 적용된다
+ 취소 버튼은 누르면 text 내용을 지워주는 기능
jQuery 예제 27
jQuery form 태그 관련 함수 예제 2
- sample2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample2</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// 폼 태그의 내용을 바꾸고자 할 경우에도 val()명령을 사용할 수
// 있다.
// 변경의 대상이 되는 태그를 셀렉터로 지정하고 변경하고 싶은 값은 // 괄호안에 기술한다.
// 클리어 버튼(button)이 클릭되면 val("")을 실행하고 input태그의
// 값을 공백으로 변경하는 스크립트임.
$(function(){
$("#con").click(function(){ // 확인
if($("input").val() == ""){
alert("값을 입력 하세요");
$("input").focus();
}
});
$("#cancel").click(function(){ // 클리어
// $("input").val("");
// $("input").focus();
$("input").val("").focus();
});
});
</script>
</head>
<body>
이름：<input type="text">
<button id="con"> 확인 </button>
<button id="cancel"> 클리어</button>
</body>
</html>- input tex 창에 아무것도 입력하지 않고 확인 버튼을 누르면 alert 창을 띄우고 input text 창에 focus 해준다
- $("input").val() 는 input 태그의 값을 구해준다, 이걸 통해 입력을 하였는지 안하였는지 확인 가능
- 클리어 버튼을 누르면 val("") 로 input 태그의 값을 설정한다
+ Javascript 에서는 값은 value 속성으로 구해왔지만 jQuery 에선 함수 중심이므로 val() 함수로 구해옴
+ 추가
$("input").val("").focus();- 같은 선택자 이므로 이렇게 연결해서 사용 가능하다
$('input').val("")
$('input').focus();- 이렇게 분리해서 사용해도 똑같다
val() 함수 두가지 용도
- 입력양식에 대해서만 사용 가능하다
1. 값을 구해온다
if($("input").val() == ""){
alert("값을 입력 하세요");
$("input").focus();
}2. 값을 설정한다
$("input").val("").focus();
text() vs value()
- text() 함수 : 링크가 걸려있거나 일반 텍스트에 대해 적용
- val() 함수 : 입력양식 / 선택양식에 대해 값을 설정하거나 값을 구해온다
jQuery 예제 28
jQuery form 태그 관련 함수 예제 3
- focus(), blur() 이벤트 관련
- sample3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample3</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// $(셀렉터).focus(function(){
// 셀렉터로 지정한 태그가 포커스되었을 때 실행할 문자
// });
// 폼 태그에 "입력해 주세요" 라는 문자가 회색으로 표시되고, 폼이 포커스되면
// 회색문자가 지워지고 문자가 입력되면 검은색 문자가 입력된다.
$(function(){
$("input").val("입력해 주세요").css("color","#CCC"); // 초기
$("input").focus(function(){ // 포커스 이벤트
$(this).val("").css("color","#000");
});
$("input").blur(function(){ //포커스 아웃
if($(this).val()==""){
$(this).val("입력해 주세요").css("color","#CCC");
}
});
});
</script>
</head>
<body>
이름：<input type="text" value="" />
</body>
</html>- focus() 이벤트 함수 : 입력양식이 focus 되면 이벤트 발생,
- blur() 이벤트 함수 : 입력양식에서 focus가 벗어났을때 이벤트 발생
초기
- HTML 에서 placeholder 가 설정되어 있지 않음에도, jQuery 를 이용해서 비슷한 효과를 적용하고 있다
- 색깔은 회색에 가까운 색으로 "입력해 주세요" 를 나타냄
포커스 시
- focus 이벤트가 발생하여 focus() 안의 내용을 실행, 안의 val 을 "" 로 설정하고(즉, 입력값을 지우고) 글자색을 검은색으로 적용
값을 입력 후 포커스 아웃 시
- blur 이벤트가 발생하여 blur() 안의 내용을 실행, 안의 val 을 다시 "입력해 주세요" 로 설정하고 글자색을 회색으로 적용
jQuery 예제 29
jQuery form 태그 관련 함수 예제 4
- focus(), blur() 이벤트 관련
- login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample5</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// blur()는 focus()와 반대로 폼 태그에서 포커스가 벗어났을 때
// 감지하고 명령을 실행한다.
//
// $(셀렉터).blur(function(){
// 셀렉터로 지정한 태그에서 포커스가 벗어났을 경우에
// 실행될 문자
// });
$(function(){
$("#id").focus(function(){ // 아이디
$("#id").val("");
}).blur(function(){
$("#id").val("아이디");
});
$("#pass").focus(function(){// 비밀번호
$("#pass").val("");
}).blur(function(){
$("#pass").val("비밀번호");
});
});
</script>
</head>
<body>
ID：<input type="text" id="id"
value="아이디"><br>
비밀번호:<input type="text" id="pass"
value="비밀번호"> <br>
<!--<input type=text placeholder="입력">-->
</body>
</html>- 이전에 자바스크립트로 구현했던 내용을 jQuery 로 간단히 구현
- HTML의 placeholder 기능과 비슷하지만, placeholder 는 포커스가 들어가더라도 값이 지워지지 않고, 값을 입력해야만 값이 지워진다는 점이 이 예제와는 다르다.
- focus() 에서 val("") 으로 text 값을 지우고, blur() 에서 val("아이디"), val("비밀번호") 로 text 값을 "아이디" , "비밀번호" 로 설정
- 초기값은 value 가 "아이디" 와 "비밀번호"
- 포커스가 들어가면 값이 지워짐
- 포커스 아웃되면 값(val)이 "비밀번호" 로 설정/수정됨
jQuery 예제 30
jQuery form 태그 관련 함수 예제 5
- change() 이벤트 함수 : select 옵션에서 값의 변화가 일어날때 발생하는 이벤트
- sample6.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample6</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// change()는 폼 태그의 내용이 변경 되는 것을 감지하는 명령
// $(셀렉터).change(function(){
// 셀렉터로 지정한 태그의 내용이 변경되었을 실행될 문장
// });
$(function(){
$("select").change(function(){
$("div").text($(this).val());
});
});
</script>
</head>
<body>
신청자：
<select>
<option value=" 이름">개인</option>
<option value=" 회사명"> 법인</option>
</select>
<p><div>이름</div>
<input type="text" /></p>
</body>
</html>- change : select 옵션에서 값의 변하가 일어날때 발생하는 이벤트
- select 목록에서 선택하는 옵션에 따라서 아래의 양식 변경
ex) <div> 태그 안의 초기 값은 "이름"이며 select 에서 '개인'을 선택시 div태그 안의 값이 "이름" 이 된다
- val() 은 입력양식에 대해서만 적용되고, 여기선 div 태그에 대해 값을 설정해야하므로 입력양식이 아닌 div 태그는 text() 로 값을 설정해야한다
- $(this) 는 선택된 <option> 태그를 의미
ex) select 에서 '법인' 을 선택시 $(this)는 아래 태그이다.
- 즉 $(this).val() 은 "회사명" 을 의
- 그 "회사명"을 text() 를 통해 div 의 값으로 설정하는 것이다
jQuery 예제 31
jQuery form 태그 관련 함수 예제 6
- submit() 이벤트 함수
- submit 이벤트 : 전송기능이 있는 버튼이 클릭되었을때 발생하는 이벤트
- submit 이벤트를 처리할떄는 전송기능이 있는 버튼에 대해서가 아닌 form 태그에 대해 이벤트 처리를 한다
- is() 함수로 라디오버튼/ 체크버튼 유효성 검사
- sample7.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample7</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$(function(){
// $("form").submit(function(){
$("#myform").submit(function(){
if($("#name").val()==""){
$("#name").css("border","1px solid red");
// .after("<span>이름을 입력해 주세요</span>");
alert("이름을 입력 하세요~!!");
$("span").css("color","red")
return false;
}
if($("#gender_man").is(":checked")==false &&
$("#gender_woman").is(":checked")==false){
alert("성별을 선택 하세요");
return false;
}
if($("#age").val() == ""){
alert("연령대를 선택 하세요");
return false;
}
var cnt=0;
if($("#xhtml").is(":checked")) cnt++;
if($("#css").is(":checked")) cnt++;
if($("#javascript").is(":checked")) cnt++;
if($("#php").is(":checked")) cnt++;
if(cnt<2){
alert("2개 이상 선택 하세요");
return false;
}
if($("textarea").val() == ""){
alert("내용을 입력 하세요");
return false;
}
});
});
</script>
</head>
<body>
<form id="myform" action="check.jsp" method="post">
<dl>
<dt> 이름<em>(필수)</em></dt>
<dd><input type="text" name="name" id="name" /></dd>
<dt> 성별</dt>
<dd>
<input type="radio" name="gender" value=" 남성" id="gender_man" />
<label for="gender_man"> 남성</label>
<input type="radio" name="gender" value=" 여성" id="gender_woman" />
<label for="gender_woman"> 여성</label>
</dd>
<dt> 연령</dt>
<dd>
<select name="age" id="age">
<option value=""> 선택해주세요</option>
<option value="10대">10대</option>
<option value="20대">20대</option>
<option value="30대">30대</option>
<option value="40대이상">40대이상</option>
</select>
</dd>
<dt> 스킬</dt>
<dd>
<input type="checkbox" name="xhtml" value="XHTML" id="xhtml" />
<label for="xhtml">XHTML</label>
<input type="checkbox" name="css" value="CSS" id="css" />
<label for="css">CSS</label>
<input type="checkbox" name="javascript" value="JavaScript" id="javascript" />
<label for="javascript">JavaScript</label>
<input type="checkbox" name="php" value="PHP" id="php" />
<label for="php">PHP</label>
</dd>
<dt> 코멘트</dt>
<dd>
<textarea name="comment"></textarea>
</dd>
<input id="sub" type="submit" value=" 전송" />
</dl>
</form>
</body>
</html>
<!--
is() 함수
is() 함수는 값의 유형을 검사하고 그 결과에 따라 true 또는 false를 반환함
라디오 버튼이나 체크박스가 체크되면 true를 반환하고, 체크되지 않으면 false를 반환함.
-->- 여러가지 양식과 유효성 검사 관련 내용
- "전송" 버튼은 전송기능이 있는 버튼이므로 클릭시 submit 이벤트가 발생한다
- 다만, 기존 이벤트와 달리 이벤트가 발생하는 "전송" 버튼의 input 태그를 구해온 뒤 submit 이벤트 처리를 하면 유효성 검사가 안되고 무조건 넘어간다
$("form").submit(function(){}); // 이러면 안됨- 전송기능이 있는 버튼일때는 그 버튼에 대해 submit 이벤트처리를 해서는 안됨
- 버튼이 아닌 해당 form 태그를 구해와서 이벤트 처리를 해야함
// $("form").submit(function(){});
$("#myform").submit(function(){}); // 이렇게 해야됨- form 태그 자체 또는 form 태그의 id값으로 form 태그를 구해와도 된다.
- 한개의 페이지에 여러개의 form 태그가 있을때 id로 해당 form 태그 구하기
+ jQuery 에서 name 값 없어도 유효성 검사 가능하다, 단 id 값은 존재해야함
is() 함수 사용 라디오 버튼 유효성 검사 (sample7.html 부분)
if($("#gender_man").is(":checked")==false &&
$("#gender_woman").is(":checked")==false){
alert("성별을 선택 하세요");
return false;
}- Javascript 에선 chekced 속성으로 체크 유무를 확인했고, jQuery 에선 체크 유무를 확인해주는 함수 is() 를 사용
- is() 함수 : 값의 유형을 검사하고 그 결과에 따라 true / false 반환
- 라디오버튼이나 체크박스가 체크되면 is() 함수가 true를 반환, 체크되지 않았으면 false를 리턴함
필터 선택자 ":chekced"
- :checked 는 필터선택자 이다
- is(:checked) 는 라디오 버튼이 선택되면 true를 리턴하고 선택되지 않으면 false를 리턴
select 옵션 유효성 검사 (sample7.html 부분)
if($("#age").val() == ""){
alert("연령대를 선택 하세요");
return false;
} <select name="age" id="age">
<option value=""> 선택해주세요</option>
<option value="10대">10대</option>
<option value="20대">20대</option>
<option value="30대">30대</option>
<option value="40대이상">40대이상</option>
</select>- 아무것도 선택하지 않았을때, value 는 "" 이므로 유효성검사에서 val()=""일떄 경고창을 띄우게 해서 유효성 검사를 한다
checkbox 유효성 검사 (sample7.html 부분)
var cnt=0;
if($("#xhtml").is(":checked")) cnt++;
if($("#css").is(":checked")) cnt++;
if($("#javascript").is(":checked")) cnt++;
if($("#php").is(":checked")) cnt++;
if(cnt<2){
alert("2개 이상 선택 하세요");
return false;
} <dt> 스킬</dt>
<dd>
<input type="checkbox" name="xhtml" value="XHTML" id="xhtml" />
<label for="xhtml">XHTML</label>
<input type="checkbox" name="css" value="CSS" id="css" />
<label for="css">CSS</label>
<input type="checkbox" name="javascript" value="JavaScript" id="javascript" />
<label for="javascript">JavaScript</label>
<input type="checkbox" name="php" value="PHP" id="php" />
<label for="php">PHP</label>
</dd>- 선택이 될때마다 cnt 변수값을 1 증가시켜서 유효성 검사를 한다
- 라디오버튼과 마찬가지로 is(:chekced) 로 is() 함수와 :checked 필터선택자로 체크 유무를 확인한다
+ val() 은 입력양식에 입력된 값을 구해오거나 입력양식에 값을 설정함
jQuery 예제 32
jQuery form 태그 관련 함수 예제 7
- :input 필터선택자
- sample9.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample9</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// :input은 입력 폼 태그 전부(input, textarea,select, button)를
// 한번에 선택 할 수 있는 필터
$(function(){
$(":input").focus(function(){
$(this).css("background","#DFEEFF");
}).blur(function(){
$(this).css("background","yellow");
});
});
</script>
</head>
<body>
<dl>
<dt> 이름<em>(필수)</em></dt>
<dd><input type="text" name="name" /></dd>
<dt> 연령</dt>
<dd>
<select name="age">
<option> 선택해주세요</option>
<option value="10대">10대</option>
<option value="20대">20대</option>
<option value="30대">30대</option>
<option value="40대이상">40대이상</option>
</select>
</dd>
<dt> 코멘트</dt>
<dd>
<textarea name="comment"></textarea>
</dd>
</dl>
<input type="reset" value="리셋" />
<input type="submit" value="전송" />
<button>확인</button>
</body>
</html>- 입력양식을 선택할때마다 색이 바뀜
:input 필터선택자 (sample7.html 부분)
$(":input").focus(function(){});- 입력양식과 관련된 태그들을 모두 구해온다
- input 태그, textarea 태그, select 태그, button 태그 모두 구해온다
- 이 태그들에 대해 한꺼번에 어떤 기능 적용가능함
$(":input").focus(function(){
$(this).css("background","#DFEEFF");
}).blur(function(){
$(this).css("background","yellow");
});- this 는사용자가 focus 를 준 태그, 즉 이벤트가 발생한 태그를 의미함
- 코멘트 textarea 부분을 클릭시 this 는 textarea 태그가 된다
- 그 태그에 대해 배경색을 노랑색으로 적용하고 있음
jQuery 예제 33
jQuery form 태그 관련 함수 예제 8
- :text 필터선택자
- sample10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample10</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// :text는 type 속성값에 "text"가 설정되어 있는 input태그만을
// 선택하는 필터
// 한줄 입력 폼이 포커스 되면 strong태그 안에 있는 내용을 HTML을
// 추가하고, 포커스가 사라지면 추가했던 strong태그를 제거 합니다.
$(function(){
$(":text").focus(function(){
$(this).after("<strong>필수 항목 입니다</strong>");
}).blur(function(){
$("strong").remove();
});
});
</script>
</head>
<body>
이름：<input type="text" name="name" />
</body>
</html>- 필터선택자 :text 는 input type 값이 text인 태그를 모두 구해온다
- after() : 특정 태그에 요소 추가, 형제 요소로 추가
- 포커스가 들어갈때
- 포커스 아웃일때
after() vs append()
- after() : 특정 태그에 요소 추가, 형제 요소로 추가
- append() : 특정 태그에 요소 추가, 자식 요소로 추가
remove() 함수
- 선택한 요소(태그)를 HTML 에서 제거
ex)
$( "p" ).remove();- 선택된 태그인 p 태그가 삭제됨
jQuery 예제 34
jQuery form 태그 관련 함수 예제 9
- :password 필터선택자
- sample11.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample11</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(":password").focus(function(){
$(this).after("<p> 패스워드는 여섯 자 이상이어야 합니다</p>");
}).blur(function(){
$("p").remove();
});
});
</script>
</head>
<body>
패스워드：<input type="password" name="pass" />
</body>
</html>- 필터선택자 :password 는 input type 값이 password인 태그를 모두 구해온다
그 외 필터 선택자
:checkbox 필터선택자
- input type 이 checkbox인 태그를 모두 구해온다
- 이걸 활용해서 모두 동의하기 버튼을 누르면 모든 체크박스에 체크를 하거나, 모두 체크를 해야 다음 페이지로 넘어갈 수 있도록 하게끔 할 수 있다.
'국비지원 과정 > 웹표준' 카테고리의 다른 글
| 코딩 45일 / 2022.08.23 / jQuery 유효성 검사, Ajax 1 (0) | 2022.08.23 |
|---|---|
| 코딩 44일 / 2022.08.22 / jQuery의 필터 선택자,함수,유효성 검사,패턴 정규식 검사 (0) | 2022.08.22 |
| 코딩 39일 / 2022.08.12 / 자바스크립트 사용자 정의 함수,배열,객체,String 객체,Math 객체 (0) | 2022.08.12 |
| 코딩 38일 / 2022.08.11 / 자바스크립트 연산자,제어문,내장 함수2 (0) | 2022.08.11 |
| 코딩 37일 / 2022.08.10 / 부트스트랩2,아파치 톰캣에 배포,자바스크립트 기초,내장함수1 (0) | 2022.08.10 |