jQuery는 다양한 이벤트를 처리할 수 있도록 함수를 제공한다.
이벤트의 이름과 동일한 함수를 이용해 이벤트를 처리할 수 있다.
Form태그 선택자
:input : 모든 입력에 관련된 태그들을 선택
- type 속성의 중류에 따른 input 태그를 선택
:text | password | radio | checkbox | submit | reset | button | image | file- disabled속성에 따른 input 태그 선택
:enabled : 활성 상태인 input 태그가 선택
:disabled : 비 활성 상태인 input 태그가 선택- 기타
:selected : select 태그 내의 option 태그 중 현재 선택되어 있는 태그 를 선택
:checked : checked나 radio에서 현재 check 되어 있는 태그를 선택Form 태그 선택자를 활용하면 input 태그에 접근 할 수 있다.
<HTML>
<input type="text"><br>
<input type="password">활성 상태<br>
<input type="text", disabled="disabled">비활성 상태<br>
<script>
$(function(){
$(":text").css("background-color","yellow");
$(":password").css("background-color","red");
$(":enabled").css("background-color","yellow");
$(":disabled").css("background-color","red");
});
</script>이벤트 함수
.click | dbclick | mouseenter, mouseleave | mousedown, mouseup | hover
여러개의 이벤트 함수를 사용할때 묶어서 하나의 $(function(){}으로 묶을수 있음
<script>
$(function(){
$("#a2").dblclick(function(){
$("#a2").css("background-color","black");
$("#a2").css("color","white");
});
//hover 을 사용할 때는 함수를 두개를 쉼표로 묶어서 사용
$("#a5").hover(function(){
$("#a5").css("background-color","black");
$("#a5").css("color","white");
}, function(){
$("#a5").css("background-color","white");
$("#a5").css("color","black");
}
);
});
</script>.focus : 포커스가 주어졌을 때
.Blur : 포커스를 잃었을 때
$("#a6").focus(function(){
$("#a6").css("background-color","blue");
})
$("#a6").blur(function(){
$("#a6").css("background-color","red");
})on : 이벤트를 설정하는 함수(지정된 이벤트를 등록할 수 있다.)
off : 설정된 이벤트를 제거하는 함수(지정된 이벤트를 제거할 수 있다.)
one : 이벤트를 설정하고 이벤트가 발생했을 때 자동으로 제거on(1회성 이벤트)
<script>
$("#a7").on("click",function(){
alert('a7');
});
$("#a8").one("click",function(){
alert('a8');
});
$("#a9").on({
click : function(){
alert('click');
},
mouseenter : function(){
$("#a9").css("background-color","black");
},
mouseleave : function(){
$("#a9").css("background-color","white");
}
});
function remove_event(){
$("#a7").off("click");
}
</script>DOM
get은 가져오고 set은 넣고
text : 태그 사이의 문자열을 제어
<div id="a1">a1문자열</div>
<button onclick="getA1()">a1 문자열 가져오기 </button>
<div id="a2">
<a href="http://www.google.co.kr">google</a>
</div>
<button onclick="getA2()">a2문자열 가져오기</button>
<div id="a3"></div>
<button onclick="setA3()">a3문자열 설정하기</button>
<button onclick="setHtml()">a3html 설정하기</button>
<script>
function getA1(){
var str = $("#a1").text(); //이미 입력되있는것 보여줌(a1문자열 가져오기)
alert(str);
}
function getA2(){
var str = $("#a2").text(); //a링크의 텍스트를 가져오진 않음
alert(str);
}
function setA3(){
$("#a3").text("문자열 설정"); //비어있는 div에 '문자열설정'을 입력
}
function setHtml(){
$("#a3").text("<a href='http://apple.co.kr'>apple</a>");
} // 잘못된 사용, apple의 링크가 아닌 html을 텍스트로서 입력하게됨
</script>html : 태그 내부의 html을 제어
val : 입력 도구들의 value 속성값을 제어
<html>
<div id="a1">
<a href="http://www.google.com">google</a>
</div>
<button onclick="getHtml()">html 가져오기</button>
<button onclick="setHtml()">html 셋팅하기</button>
<br>
<input type="text" id="a2">
<br>
<button onclick="getA1()">value값 가져오기</button>
<button onclick="setA1()">value값 셋팅하기</button>
<script>
function getHtml(){
var html= $("#a1").html();
alert(html); //'<a href="http://www.google.com">google</a' 를 호출함
}
function setHtml(){
$("#a1").html("<a href='http://www.apple.co.kr'>apple</a>");
} //google링크를 apple 링크로 바꿈
function getA1(){
var value = $("#a2").val();
alert(value); //텍스트창에 입력된 값을 호출
}
function setA1(){
$("#a2").val("1234"); //텍스트창에 1234를 입력
}
</script>attr : 태그의 속성을 제어
<script>
function getAttr(){ //가져오기
var src =$("#a1").attr("src");
var width = $("#a1").attr("width");
var height = $("#a1").attr("height");
var id = $("#a1").attr("id");
$("#result").html("src : "+src+"<br/>"+
"width: " + width + "<br>"+
"height: " + height + "<br>"+
"id: " + id + "<br>");
};
function setAttr(){ //설정하기
$("#a1").attr("width",544);
$("#a1").attr("height",184);
};
</script>append : html코드나 태그를 태그 '내부의' 뒤에 추가
prepend : 앞에 추가
기준인 p태그 text위로 쌓인걸 두고 위에 쌓임
<script>
function append1(){
$("#a1").append("<p>새롭게 추가한 p1</p>")
}
//같은것을 표현
function append2(){
var p = $("<p>");
p.text("새롭게 추가한 p2");
$("#a1").append(p);
}
</script>after : html코드나 태그를 태그 '다음에' 배치
before : 앞에 배치
기준인 p태그 위로 쌓인것을 위로 올리면서 쌓임
<script>
function after1(){
$("#a1").after("<p>새롭게 추가한 p1</p>")
}
//같은것을 표현
function after2(){
var p = $("<p>");
p.text("새롭게 추가한 p2");
$("#a1").after(p);
}
</script>remove : 태그를 제거
empty : 태그 내의 모든 태그를 제거
<script>
function remove_a2(){
$("#a2").remove();
}
function empty_a1(){
$("#a1").empty();
}
</script>
안뇽하세용