css 적용
<script>
$(document).ready(function(){
var $test1=$("#test_1");
alert($test1.css("color"));
});
</script>
<script>
$(document).ready(function(){
$("#test_1").css("position","absolute");
$("#test_1").css("left","200px");
$("#test_1").css("border","solid 4px red");
});
</script>
여러 css를 한번에 적용하려면 대괄호{}로 묶어줘야 함
<script>
$(document).ready(function(){
$("#test_1").css({position:"absolute",left:"200px",border:"solid 4px blue"});
});
</script>
속성 얻어내기
<script>
$(document).ready(function(){
var $test1=$("#test_1");
alert($test1.attr("class"));
});
</script>
속성 제어
<script>
$(document).ready(function(){
var $test1=$("#test_1");
$test1.attr("class","myClass");
});
</script>
제이쿼리로 자바스크립트 명령을 사용하려면 인덱스 주소를 정확하게 지정해줘야 함
<script>
$(document).ready(function(){
var $test1=$("#test_1");
$test1[0].className="myClass"
});
</script>
속성 제거
<script>
$(document).ready(function(){
var $test1=$("#test_1");
$test1.removeAttr("style");
});
</script>
이벤트
bind, unbind (addEventListener, removeEventListener)
<script>
var $info;
var $btn_1;
$(document).ready(function(e) {
$btn_1=$("#btn_1");
$info=$("#info");
$btn_1.click(function(){
$info.html($info.html()+"마우스가클릭되었습니다.<br>");
})
});
</script>
함수를 외부로 뺄수도 있음
<script>
var $info;
var $btn_1;
$(document).ready(function(e) {
$btn_1=$("#btn_1");
$info=$("#info");
$btn_1.click(onClick);
});
function onClick(){
$info.html($info.html()+"마우스가클릭되었습니다.<br>");
}
</script>
<script>
var $info;
var $btn_1;
$(document).ready(function(e) {
$btn_1=$("#btn_1");
$info=$("#info");
$btn_1.bind("click",onClick);
});
function onClick(){
$info.html($info.html()+"마우스가클릭되었습니다.<br>");
}
</script>
<style>
body
{
font-size: 9pt;
}
#info{
border:1px solid #000000;
}
#btn_target{
width:300px;
height:100px;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"> </script>
<script>
var $info;
var $btn_1;
var $btn_2;
$(document).ready(function(e) {
$btn_1=$("#btn_1");
$btn_2=$("#btn_2");
$info=$("#info");
$btn_1.bind("click",onAdd);
$btn_2.bind("click",onRemove);
});
function onAdd(){
addInfo("이벤트등록시작");
$("#btn_target").bind("mouseover",onOver);
}
function addInfo(str){
$info.html($info.html()+str+"<br>");
}
function onOver(){
addInfo("마우스오버되었습니다.");
}
function onRemove(){
addInfo("이벤트등록되지않습니다.");
$("#btn_target").unbind("mouseover",onOver);
}
</script>
애니메이션
제이쿼리에서 애니메이션을 적용하려면 플러그인을 먼저 설치해야 한다
easing
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
show, hide
<script>
$(document).ready(function(){
var $img1=$("#test_1");
$("#btn_show").bind("click", function(){
$img1.show(3000,"easeOutCubic",function(){
alert("show완료");
});
});
$("#btn_hide").bind("click",function(){
$img1.hide(3000,"easeInCubic",function(){
alert("hide완료");
});
});
});
</script>
toggle
<script>
$(document).ready(function(){
// 움직일 대상 찾기.
var $img1 = $("#test_1");
$("#btn_show").bind("click", function(){
$img1.toggle(3000, "easeOutCubic", function(){
alert("토글기능완성");
});
});
});
</script>
slideUp, slideDown
<script>
$(document).ready(function(){
var $test1=$("#test_1");
$("#btn_show").bind("click", function(){
$test1.slideDown(1000,"easeOutCubic");
});
$("#btn_hide").bind("click", function(){
$test1.slideUp(1000,"easeOutCubic");
});
});
</script>
slideToggle
<script>
$(document).ready(function(){
var $test1=$("#test_1");
$("#btn_show").bind("click", function(){
$test1.slideToggle(1000,"easeOutCubic");
});
});
</script>