목차
1. jQuery 이벤트 처리 함수
2. jQuery 폼(form) 태그 기능
3. each() 함수
1. jQuery 이벤트 처리 함수
1) unbind()
- 설정되어 있는 이벤트 처리를 취소하는 함수
- 형식: .unbind(“적용될 이벤트”);
- ex) $("button").click(function(){
$("a").unbind("click"); // a 태그를 클릭할 때 발생하는 click 이벤트를 취소시키는 역할
});
2) live()
- 앞으로 추가될 태그에도 설정한 이벤트가 적용될 수 있도록 하는 함수
- 형식: .live(‘이벤트명’, 이벤트처리기 함수)
- ex) $("button").live(“click”, function(){
$("ul").append("<li><a href='building.jpg'>건물</a></li>");
});
* append() : 선택한 태그(엘리먼트) 내용의 끝에 새로운 콘텐츠를 추가시키는 함수
2. jQuery 폼(form) 태그 기능
1) text() & val()
- text() 함수와 val() 함수는 선택한 태그의 텍스트 내용을 받아오거나 설정할 수 있다.
- 각 메소드의 괄호 안에 아무것도 기술하지 않은 경우에는, 선택한 태그에 포함되어 있는 텍스트를 가져온다.
- 각 메소드의 괄호 안에 값이 설정되어 있을 경우에는, 선택한 태그의 value 값을 설정한다.
- ex)
<script type="text/javascript">
$(function(){
$("#con").click(function(){ // 확인
alert($("input").val());
$("#con").text("전송"); // 확인 -> 전송
$("#re").hide();
});
$("#re").click(function(){ // 취소
// $("input").val("");
// $("input").focus();
$("input").val("").focus();
});
});
</script>
2) focus() & blur()
- focus() 함수: 마우스 포인터가 대상 태그에 위치할 때 이벤트를 처리하는 이벤트 핸들러
- blur() 함수: 대상 태그에서 포커스가 벗어났을 때 이벤트를 처리하는 이벤트 핸들러
- ex) focus 상태일 때
- ex) blur 상태일 때
3) change()
- change() 함수는 선택된 태그의 value에 변화가 생길 경우 실행되는 함수이다.
4) is()
- is() 함수는 값의 유형을 검사하고 그 결과에 따라 true 또는 false를 반환함
- 라디오 버튼이나 체크박스가 체크되면 true를 반환하고, 체크되지 않으면 false를 반환함
- ex) if($("#gender_man").is(":checked")==false &&
$("#gender_woman").is(":checked")==false){
alert("성별을 선택하세요!");
return false;
5) 입력 양식 필터 선택자
- 기호 ‘ : ‘ 를 포함한 선택자를 필터 선택자라고 한다.
- 폼 필터는 입력 양식(text, checkbox, password, radio, file)을 기반으로 하는 폼 태그를 선택할 때 사용하는 필터
| 선택자 형태 | 설명 |
| :input | 모든 입력 양식을 선택(input, textarea, select, button 태그) |
| :text | Input 태그 중 type 속성이 text인 문서 객체를 선택 |
| :password | Input 태그 중 type 속성이 password인 문서 객체를 선택 |
| :radio | Input 태그 중 type 속성이 radio인 문서 객체를 선택 |
| :checkbox | Input 태그 중 type 속성이 checkbox인 문서 객체를 선택 |
| :submit | Input 태그 중 type 속성이 submit인 문서 객체를 선택 |
| :image | Input 태그 중 type 속성이 image인 문서 객체를 선택 |
| :reset | Input 태그 중 type 속성이 reset인 문서 객체를 선택 |
| :button | Input 태그 중 type 속성이 button인 문서 객체를 선택 |
| :file | Input 태그 중 type 속성이 file인 문서 객체를 선택 |
| :checked | 체크된 입력 양식을 선택 |
| :selected | option 객체 중 선택된 태그를 선택 |
3. each() 함수
- 배열이나 객체를 반복적으로 처리할 때 사용되는 함수
- 형식: .each(function(index, element)) {실행 함수}
- ex)
$(function() {
var list = ['Jessica', 'Tiffany', 'Sunny', 'crystal', 'G.NA']
$.each(list, function(index, value) { // 임의의 매개변수명
alert(index+":"+value);
$('ol').append('<li>'+value+'</li>');
});
});