컬쳐N라이프

jquery에서 form 전송에 대해 알아보겠습니다.

jquery form 전송은 간단하게 submit() 함수를 호출하여 전송이 가능합니다.

- html 

<form name="testForm" id="login">
    <input type="text" id="id"/>
    <input type="text" id="pw"/>
    <input type="submit"/>
</form>
<hr/>
<button id="btn">전송</button>

- javascript 

	
$(document).ready(function() {
    $("form").submit(function(event) {
  	var id = $('#id').val();
    var pw = $('#pw').val();
    
   	if (id != "" && pw != "") {
    	alert("id :: " + id + ", pw :: " + pw);
    }
    
    if (id == "") {
    	alert("id를 입력해주세요.");
    	event.preventDefault();
      return;
    }
    
    if (pw == "") {
    	alert("pw를 입력해주세요.");
    	event.preventDefault();
      return;
    }   
  });
  
  $('#btn').click(function () {
  	$("form").submit();
  });
});

<form></form> 내부의 type="submit" 의 input DOM을 두고 form 전송 이벤트를 구현할 수 있다.

별도의 전송 버튼을 이용하여 폼을 전송하고 싶을 때는 버튼을 만들고 $("form").submit() 을 바로 호출하면 버튼을 이용한 전송도 가능하다.

- 예제 : 이동

jQuery를 이용한 css, 스타일 시트 적용에 대해 알아보겠습니다.

.css() 함수를 이용하여 css속성에 대한 값을 가져오고 값을 지정할 수 있습니다.

.css("속성", "value") 의 형태로 사용하시면 됩니다.

<span id="result">&nbsp;</span>

<div class="div" style="background-color:blue;"></div>

<div class="div" style="background-color:rgb(15,99,30);"></div>

<div class="div" style="background-color:#123456;"></div>

<div class="div" style="background-color:#f11;"></div>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<button class="btn" id="change">1번 검정색 변경</button>

<button class="btn" id="change2">2번 노랑 변경</button>

<button class="btn" id="change3">3번 width 100</button>

<button class="btn" id="change4">4번 height 100</button>

- jQuery

$(document).ready(function() {

     var color = $( this ).css( "background-color" );

    $( "#result" ).html( "That div is <span style='color:" +

    color + ";'>" + color + "</span>." );

    $('.btn').off('click').on('click', function() {

     var idx = $('.btn').index(this);

      var div = $('.div').eq(idx);

      if (idx == 0) {

      div.css("background-color", "black");

      }

      else if (idx == 1) {

      div.css("background-color", "yellow");

      }

      else if (idx == 2) {

      div.css("width", 100);

      }

      else if (idx == 3) {

      div.css("height", 100);

      }

  });

});

각 사각형을 클릭했을 때 박스의 rgb 값을 나타내고 있습니다.

또한 각 버튼에 css속성과 값을 적용시켜

색깔을 변경시키거나 가로, 세로 길이를 조정할 수 있습니다.

예제 : 이동

다음 시간에는 jquery를 이용한 텍스트 자르기 붙이기, 비교 등을 알아보겠습니다.

jQuery this에 대해서 알아보겠습니다.

this 즉, 자기자신을 가르키는 변수라고 생각하시면 될꺼 같습니다.

예제를 통해 함께 알아보겠습니다.

<div class="click">1번 div</div>

<div class="click">2번 div</div>

<div class="click">3번 div</div>

지난 시간에는 id를 이용하여 각 DOM 마다 button 클릭 이벤트를 하나씩 설정해줬습니다.

this를 통해서 소스를 깔끔하고 편하게 작성해보겠습니다.

- jQuery

$(document).ready(function() {

   $('.click').click(function() {

    var idx = $('.click').index(this);

        alert(idx + "번 div, 내용 : " + $(this).text());

   });

});

this는 선택된 자기자신을 표현합니다.

1번 DIV가 클릭 됐다면 1번 DIV로 선언된 DOM(<div class="click">1번 div</div>)을 

2번 DIV가 클릭 됐다면 2번 DIV로 선언된 DOM(<div class="click">2번 div</div>)을 

3번 DIV가 클릭 됐다면 1번 DIV로 선언된 DOM(<div class="click">3번 div</div>)을 

나타냅니다.

class 셀렉터를 통해 click 클래스에 클릭 이벤트를 정의했습니다.

index() 함수는 해당 DOM의 순서를 반환합니다. 제일 처음은 0, 1, 2 0번부터 순서대로 증가합니다.

예제 : 이동

this를 통해서 이전과 비교했을 때 코드도 줄고 보기도 편해졌습니다.

this를 활용해서 더 편하고 쉽게 코드를 작성하시기 바랍니다~

다음 시간은 trigger에 대해서 알아보겠습니다.

Jquery 이벤트에 대해서 알아보겠습니다.

1.click() 이벤트

가장 많이 사용하는 click 이벤트입니다.

<div id="click1">1번 div</div>

<div id="click2">2번 div</div>

<div id="click3">3번 div</div>

- jQuery

$(document).ready(function() {

   $('#click1').click(function() {

    alert("1번 div");  

   });

 $('#click2').click(function() {

    alert("2번 div");  

   });

 $('#click3').click(function() {

    alert("3번 div");  

   });

});

# id 선택자 이용하여 click 이벤트가 발생했을 때 알람을 띄우는 간단한 예제를 작성했습니다.

예제 : 이동하기

blur 이벤트는 HTML DOM이 포커스를 잃었을 때 발생하는 이벤트입니다.

보통 input DOM에 적용하여 사용합니다.

아이디나 패스워드 입력을 마치고 포커스를 잃었을 때 유효성 검사를 위해 사용하기도 합니다.

<input type="text" id="iptTest"/>

- jQuery

$('#iptTest').blur(function() {

alert("iptTest out");

 });

# id 선택자 이용하여 iptTest가 포커스를 잃었을 때 알람을 띄우는 간단한 예제를 작성했습니다.

예제 : 이동

다음시간에는 jquery 코드를 줄이기 위한 자기 자신을 가르키는 요소 

this를 이용하는 방법을 알아보겠습니다.

this를 이용하면 반복되는 코드도 줄고 간단하게 기능을 구현할 수 있습니다.