컬쳐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 change함수에 대해 알아보겠습니다.

jquery chage함수는 DOM의 상태 변경 등의 이벤트가 발생했을 때 사용할 수 있습니다.

- html 

<div>
  <select id="sweets">
    <option>Chocolate</option>
    <option>Candy</option>
    <option>Taffy</option>
    <option>Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>
</div>
<hr/>
<div>
  <input type="text" id="txt"/>
  <span id="result"></span>
</div>

- javascript

$(document).ready(function () {
	$('#sweets').change(function () {
  		alert($(this).val());
  });
  
  $('#txt').change(function() {
  	// validation check 
    $('#result').text($(this).val());
  });
});

첫번째는 change 함수를 이용해서 HTML의 select 변경이 일어났을 때 선택된 이름을 알림창으로 나타냅니다.

두번째는 change 함수를 이용해서 HTML input 값을 다 입력하고 input의 focus가 사라졌을 때 

span에 input에 입력된 값을 표시합니다.

input에 적용된 change 함수의 경우에는 텍스트가 입력될 때 마다 적용되는게 아니라

focus가 사라졌을 때 적용된다는 점을 주의해주시기 바랍니다.

예제보기

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 trigger에 대해서 알아보겠습니다.

trigger를 굳이 해석하자면 방아쇠, (어떤) 계기등으로 해석할 수 가 있습니다.

jQuery에서 trigger는 어떤 함수를 실행시켜주는 함수로 보시면 될꺼 같습니다.

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

- jQuery

$(document).ready(function() {

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

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

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

   });

   $('.trigger').trigger('click');

});

trigger클래스의 클릭 이벤트로 alert창에 간단한 내용이 뜨도록 정의했습니다.

trigger를 작성하지 않았을 때는 trigger 클래스를 가진 DOM을 클릭했을 때 alert창이 떴는데

현재는 trigger를 선언했기 때문에 자동으로 alert창이 뜨는걸 확인할 수 있습니다.

click, change, blur, dbclick 등등 다양한 이벤트를 적용할 수 있습니다.

예제 : 이동

다음 시간은 jquery를 이용하여 input value의 값을 셋팅하고, 값을 가져오는 것과 일반 DOM에 텍스트 값을 반영하는 방법에 대해 알아보겠습니다.

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에 대해서 알아보겠습니다.

class 추가나 삭제는 css에 선언된 class를 이용하여 active 효과를 줄 때 보통 많이 사용합니다.

<div class="test">테스트입니다.</div>

<button class="btn">변경</button>

- css 선언

.test.active {

color:red;

}

위의 선언은 test라는 class를 가진 DOM에 active class가 함께 있으면 color를 red로 변경하라는 선언입니다.

jQuery를 이용하여 class를 추가해 변경되는 모습을 확인해보겠습니다.

- jQuery

$(document).ready(function() {

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

// test class를 포함하는 DOM 객체가 active class를 포함하면 true 아니면 false를 반환

       if ($(".test").hasClass("active")) { 

// active class 제거

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

       }

       else {

// active class 추가

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

       }

   });

});

jQuery hasClass() 함수를 통해 active 를 포함하고 있는지 확인하고

포함하고 있지 않으면 addClass() 함수를 통해 추가하고

포함하고 있으면 removeClass() 함수를 통해 삭제합니다.

예제 : 이동하기

가장 많이 사용되는 id와 class 셀렉터를 먼저 알아보겠습니다.

1. class 셀렉터

<div class="test">class 테스트입니다.</div>
<div id="test">id 테스트입니다.</div>

ex) $( ".text" ).text( "The DOM is now loaded" );

=> 실행 결과

<div class="test">class 테스트입니다.</div>
<div id="test">id 테스트입니다.</div>

1. all selector  ("*")

ex) $("*").css("border", 3px solid red");

-----------------------------------------------------------------------------------------------

2. 속성 prefix 셀렉터 [name|=”value”]

<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>

ex) $( "a[hreflang|='en']" ).css( "border", "3px dotted green" );

=> 실행 결과

Some text Some other text will not be outlined

-----------------------------------------------------------------------------------------------

3. 문자를 포함하는 셀렉터  [name*=”value”]

<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

ex) $( "input[name*='man']" ).val( "has man in it!" );

=> 실행 결과

-----------------------------------------------------------------------------------------------

4. 단어를 포함하는 셀렉터  [name~=”value”]

<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

ex) $( "input[name*='man']" ).val( "mr. man is in it!" );

=> 실행 결과

-----------------------------------------------------------------------------------------------

jquery 셀렉터에 대해 간략하게 소개하였습니다~

다음 강의에서 만나요~

+ More jQuery

 - [jQeury] jquery this, 코드 줄이기, jquery index, 인덱스

 - [jQuery] - jQeury] val(), text() 값 셋팅, 값 가져오기 setValue, setText

 - [jQuery] - [jQeury] jquery 클래스 추가(addClass), class 추가 삭제(removeClass) 및 확인(hasClass)

 - [jQuery] - [jQeury] jquery tigger, jquery 함수 실행, 이벤트 실행

 - [jQuery] - [jQeury] jQuery css, jQuery 스타일 적용