J query 동작 / Event / Effect

.text( );

• HTML문서객체의 elements의 contents를 변경
• innerText와 관련된 동작

//1. innerText로 값 집어 넣기
//p요소의 contents를 변경한다.
$("p").text("gura!");

//2. innerText값을 읽어오기
$("#one").text();

 

.css( );

• CSS를 inline으로 HTML문서객체의 elements에 넣는다.

//1. CSS값 집어 넣기
//클래스가 my-class인 요소에 css를 삽입하는 경우
$(".my-class").css("color","red")

//2. CSS값 갖을 읽어오기
$("#one").css("font-size")

 

.val( );

• value 값과 관련된 동작

//1. value 값을 집어 넣기
//아이디가 two인 요소의 value 값을 넣는것
$("two").val("해골");

//2. value 값을 읽어오기
$("two").val();

 

Event 

---

.on("이벤트명", 콜백함수 ); / .이벤트명(콜백함수);

• addeventListner 동작

//문법1. 
.on("이벤트명","콜백 함수")

//#sendBtn을 클릭했을때 실행할 함수
$("#sendBtn").on("click",function(){});


//문법2.
.이벤트명(콜백함수);

$("#sendBtn").click(function(){});

 

.appendTo( );

append와 같은 동작

 

 

 

.focus( );

 

 

Effect

---

.hide( ); / .show( ); / .toggle( );

.hide( );

• .css("display", "none") 동작이랑 똑같음.
• .hide(1000); : 1초동안 천천히사라짐
• .hide(1000, function(){}); : 1초뒤에 함수가 있으면 동작해라

$("#one").hide();

 

.show( );

 

• .css("display", "block"||"inline") 동작이랑 똑같음.
• $("#one").show();

 

.toggle( );

• .hid(); + .show(); 동작을 합쳐 놓은 동작
• $("#one").toggle();

 

 

.fadeOut(); / .fadeIn(); /.fadeToggle();

.fadeOut();

일치하는 요소를 투명하게 페이딩하여 숨기기

$(this).fadeOut(1000);

 

.fadeIn();

일치하는 요소를 투명하게 페이딩하여 숨기기

$(this).fadeIn(1000);

 

.fadeToggle();

.fadeOut(); + .fadeIn(); 을 동작을 합쳐 놓은 동작

$(this).fadeToggle(1000);

 

addClass(클래스명); / removeClass(클래스명); / toggleClass(클래스명);

css에서는 자주 사용되는 속성과 값들을 css로 지정해 놓고 필요할때마다 불러쓴다.

"jquery/Step04_Class" 파일 참고

 

addClass(클래스명);

$(this).addClass("active");

 

removeClass(클래스명);

$(this).removeClass("active");

 

toggleClass(클래스명);

 

 

 

.each();

배열 안에 있는 문서객체를 각각 하나씩 다른 동작을 해주고 싶을때 사용하는 함수

.each(function(i, item){}) -> i번째 방에 있는 문서객체를 i번째 item에 넣어서 어떤 동작을 각각에 입혀준다.