[JQuery 개념 복습] (ing...)

[jQuery 기본 함수]

   ① jQuery()
   ② jQuery(document).ready()
   ③ $()
   ④ $(document).ready()

→ 페이지가 요청되었을 때, 클라이언트가 아무런 이벤트를 발생시키지 않아도 자동으로 동작한다.

---

[jQuery 선택자를 통한 객체 가져오기]

`$("선택자")`

$("선택자")

① $("#선택자") → id 선택
② $(".선택자") → class 선택
③ $("h1")  → Element 선택

---

[jQuery 클릭 이벤트 처리]

$("선택자").click( function() {  } );

ⓐ <h1> 엘리먼트가 클릭되었을 때 특정 동작 수행하도록 하기
  $("h1").click( function() {  } );

ⓑ 클릭된 객체의 내용(HTML) 경고창(alert)에 띄우기

  $("h1").click(function()
  {
    alert( $(this).html() );
  });

---

[jQuery 이벤트 처리 - 『on』] - 이벤트가 발생할 때마다

$("선택자").on("이벤트", 기능·동작·행위)
→ 『$("h1").on("click", function() {  } );』


(* example)
$("h1").on("click", function()
{
  alert("h1 객체 클릭");
});

 

---

[jQuery 이벤트 처리 - 『one』] - 이벤트가 처음 발생했을 때 한 번만

$("선택자").one("이벤트", 기능·동작·행위)
→ 『$("h1").one("click", function() {  } );』

 

---

[jQuery 클릭된 객체의 내용(HTML) 뒤에 특수문자 붙이기]

 

[방식 1]

 $("h1").click(function()
 {
   alert( $(this).html( $(this).html() + "◎" );
 });

 

[방식 2]

 $("h1").on("click", function()
 {
     $(this).html(function(index, html)
     {
        return html + "◎";

     });
 });

---

[jQuery 여러 이벤트에 대한 여러 기능 동작시키기]

$("선택자").on({이벤트:기능, 이벤트:기능, ....});

$("h1").on(
{      
  이벤트:function() {  }, 이벤트:function() {  }

});

---

[jQuery 마우스에 대한 이벤트 처리]

mouseenter	마우스 진입 이벤트
mouseleave	마우스 이탈 이벤트
hover	mouseenter와 mouseleave 가 합쳐져 있는 형태의 이벤트.
mousemove	마우스가 요소에서 움직이는 이벤트
mouseout	마우스가 요소에서 떠나는 이벤트
mouseup	마우스를 눌렀다가 뗐을 때의 이벤트

 

---

[jQuery 클래스 추가·제거 이벤트 처리]

   ⓐ `$("선택자").addClass("클래스명")` : 클래스 추가
   ⓑ `$("선택자").removeClass("클래스명")` : 클래스 제거

 

[jQuery "h1" 객체에 마우스 진입시 "item" 클래스 추가]

$("h1").mouseenter(function()
{
	$(this).addClass("item");
});

---

[jQuery hover 이벤트를 이용한 마우스 진입·이탈 이벤트 처리]

hover 이벤트가 발생했을 때, 총 두 개의 기능(function())이 동작하도록 구성. 

 

『$("h1").hover( function() {  }, function() {  });』	

$("h1").hover(function()
{
	$(this).addClass("item");

}, function()
{
	$(this).removeClass("item");
});

 

---

[jQuery 클릭된 <div> 객체 내부의 <h1>과 <p> 태그 선택하기]

$("div").click(function()
{
    alert( $("h1", this).text() );
    // div 내부의 h1 태그 텍스트를 출력한다.

    alert( $("p", this).text() );
    // div 내부의 p 태그 텍스트를 출력한다. 
});

 

---

[jQuery 이벤트 강제 발생시키기 : trigger(트리거)]
  

$("선택자").click( function() {  } );

(*example) <input> 태그의 type="button"인 객체가 클릭 됐을 때
         <h1> 태그의 첫 번째 객체와 마지막 객체에
         강제 클릭 이벤트 발생시키기.


// h1 객체를 클릭했을 때, h1객체의 html 끝에 "Ⅹ" 문자를 추가한다.   
$("h1").click(function()
{
  $(this).html(function(index, html)
  {
     return html + "Ⅹ";
  });

});

 
             
  
   // <input> 태그의 type="button"인 객체가 클릭 됐을 때
   // 강제로 h1 태그의 첫 번째 객체와, 마지막 객체가 클릭되는 이벤트를
   // 발생시킨다.
   $("input[type=button]").click(function()
   {
     $("h1").first().click();
     $("h1").last().click();
   });
  

[jQuery 키보드 관련 이벤트]

   ① keydown : 키보드가 내려가기 시작했을 때.
   ② keypress : 키보드가 끝까지 다 눌려졌을 때 (접점에 닿았을 때)
   ③ keyup   : 눌렸던 키보드에서 손을 떼어, 키가 위로 올라갔을 때

[jQuery textarea에 키보드로 내용을 입력할 때 이벤트 처리]

   $("textarea").keydown(function() {  });
   $("textarea").keypress(function() {  });
   $("textarea").keyup(function() {  });

 

[jQuery 입력 컨트롤(textarea)에 입력된 값을 경고창을 통해 확인하기]

 

   ⓐ keydown 이벤트가 발생했을 때, 입력 값 확인하기 Ⅹ

      $("textarea").keydown(function()
      {
         alert( $(this).text() );
         alert( $(this).html() );

      });
      → 입력 값을 확인할 수 없다. 『""』


   ⓑ keypress 이벤트가 발생했을 때, 입력 값 확인하기 Ⅹ

      $("textarea").keypress(function()
      {
         alert( $(this).text() );
         alert( $(this).html() );
      });
      → 입력 값을 확인할 수는 있으나, 한 박자 느리게 확인 된다.

         ▶ 실제 입력 : "ㄱ" → "ㅏ" → "ㅈ" → "ㅣ"             
 
         ▶ alert 결과 : "" → "ㄱ" → "ㅏ" → "ㅈ"
         
         keydown으로 구성했을 경우, 내가 입력하기 이전의 값을 가져온다.
         키보드 입력 한 사이클이 끝난 다음에 입력 값을 가져와야 하기 때문에
         keyup 이벤트가 발생했을 때 입력 값을 가져와야 제대로 된 입력값을
         가져와 주는 것이다.
        

   ⓒ keyup 이벤트가 발생했을 때 입력 값 확인하기 ◎

      $("textarea").keypress(function()
      {
         alert( $(this).text() );
         alert( $(this).html() );
      });   
      → 모든 입력 값이 제대로 가져와지는 것을 확인할 수 있다.
         키보드 입력 이벤트 한 사이클이 지난 후에 입력 값을 가져오므로
         한 번의 입력에 대한 문자를 제대로 가져와 주는 것을 확인할 수 있다.

[jQuery 키보드 입력에 대한 글자 수 측정하기]

 

   $("textarea").keyup(function()
   {
      // "textarea" 객체에 적힌 모든 글자들(val())의 길이를 저장.
      var len = $(this).val().length;

      // 만약, 입력 가능한 글자 수를 30자로 제한했을 때
      // 현재의 입력 글자 수에 대한 나머지 작성 가능 글자 수를 저장.
      var remain = 30 - len;
   });