오랜만에 jQeury관련 글을 올려봅니다. 한동아 블로그에 관심을 끄고 있다가 요 근래 들어 다시 블로그에 관심을 기울이고 있습니다. 앞으로는 꾸준히 블로그를 관리할 계획입니다.

오늘은 jQuery를 이용한 HTML DOM에 접근하는 방법에 대하여 정리해보겠습니다.

 

jQuery의 강력한 기능인 HTML DOM을 탐색하는 기능에 대해 알아보겠습니다. jQuery의 DOM 탐색은 CSS Selecter를 사용하고 있어, CSS의 표현식을 알고 있다면 보다 쉽게 셀렉터를 이해 할 수 있습니다.

jQuery에서는 원하는 HTML의 DOM 요소를 찾기 위해 $(Selector), jQuery(Selector)와 같은 표현식을 사용합니다.

 

$는 jQuery의 축약어로 같은 역할을 하며, 다음과 같은 형태로 사용하여 원하는 DOM 요소를 선택 할 수 있습니다.

 

셀렉터 종류 

 셀렉터 표현방법

 All Selector

$("*") 

 ID Selector

$("#id") 

 Element Selector

$("elementName") 

 Class Selector

$(".className") 

 Multiple Selector

$("selector1, selector2, selectorN") 

 

$(Selector), jQuery(Selector)를 사용하여 선택한 DOM의 요소는 "document.getElementByID"를 이용한 것과는 다르게 해당 객체를 jQuery 객체로 랩핑해서 반환해주기 때문에 jQuery에서 지원하는 기능을 쉽게 적용할 수 있는 장점이 있습니다.

 

All Selector : $("*")

HTML DOM을 탐색하여 모든 요소를 배열형식의 Jquery 객체로 반환합니다.

 

 

 

 

 

jQuery를 페이지에 로딩 시키고 $(document).ready() 함수를 통해 모든 객체를 선택한 후 선택된 jQuery 객체를 눈에 잘 보이게 붉은색의 1pixel 테두리를 설정 하도록 해 보겠습니다.

 

$(document).ready() 또는 $(function() {})는 페이지의 HTML DOM이 모두 로드가 되면 실행이 되는 함수로 자바스크립트의 onload 메서드의 확장된 역할을 하고 있습니다. jQuery를 사용하실 경우 onload 이벤트의 사용보다 $(document).ready() 또는 $(function() {})를 사용하시길 적극 추천 드리면 관련 내용에 대해서는 마지막 부분에 다시 한번 정리를 하도록 하겠습니다.

 

 

 

위의 화면과 같이 jQuery를 통해 선택된 모든 요소에 붉은색 테두리가 설정된 것을 확인 할 수 있습니다. 이러한 기능이 가능한 것은 일반적인 DOM 객체가 아닌 jQuery 객체로 반환이 되었기 때문입니다.

 

ID Selector : $("#ID")

문서 안에 있는 여러 엘리먼트 중 ID 값이 동일한 엘리먼트를 찾아 반환합니다.

동일한 값(동일 ID)의 엘리먼트가 여러 개일 경우에는 최상위에 있는 엘리먼트를 선택 반환하여, 한 문서(HTML)에는 한 ID만 존재하는 것이 원칙으로 동일한 값을 통해 접근을 하고 싶을 경우에는 class 또는 attribute의 동일한 값을 설정하여 사용하길 권장합니다.

 

 

 

 

Element Selector ; $("element")

자바스크립트의 getElementByTagName("tagName")과 비슷한 역할을 하여 DOM 개체를 구성하는 태그와 동일한 객체를 찾아 다수의 jQuery 객체를 반환합니다.

아래의 소스는 jQuery를 통해 선택된 "h1" 개체의 테두리를 노란색으로 변경합니다.

 

 

 

 

 

class Selector : $(".class")

자바스크립트의 getElementByClassName()과 동일한 역할을 하고 있는 셀렉터입니다.

getElementByClassName() 메서드의 경우 몇몇 브라우저에서 지원을 하고 있지 않기 때문에 크로스브라우징을 지원해야 하는 개발이라면 올바르게 동작하지 않는 문제가 발생할 수 있습니다.

IE8이하 버전에서는 지원을 하고 있지 한다고하며, IE9와 HTML 차기버전이 HTML5에서는 기본적으로 지원 합니다.

 

프런트 부분을 개발하다 보면 위와 같은 문제로 인하여, 많은 개발자가 고민하고 해결책을 찾다가 많은 시간을 허비하는 경우가 상당합니다. 문제를 찾기 위해 자바스크립트 디버깅을 해 보지만 상당한 노가다를 필요로 하는 경우도 많을 뿐더러 브라우저마다 에러를 내는 행식이 다르기 때문에 상당한 골치 덩어리 입니다.

 

여기서 다시 하번 jQuery의 강점인 크로스브라우징에 대한 강조를 jQuery의 Class Selector의 경우 현존하는 대부분의 브라우저에서 사용이 가능하니, 위와 같은 문제를 미연에 방지 할 수 있으며 이러한 문제에 대해 고민을 할 필요가 없습니다.

 

다음은 문서(HTML)내의 클래스명이 article인 요소를 찾아 테두리의 색상과 배경을 변경하는 예저입니다.

 

 

 

Multiple, Complex Selector : $("selector1, selector2, selectorN"), $("#id div.class")

위에서 설명한 셀렉터의 나열이나 조합을 통하여 개발자가 원하는 객체를 보다 쉽고 정확하고 빠르게 탐색할 수 있습니다.

셀렉터를 ","를 통하여 나열할 경우 각각의 셀렉터를 통해 탐색된 객체의 집합을 반환하며, 셀렉터의 조합을 통하여 탐색을 했을 경우 각 셀렉터의 교집합 조건의 객체가 탐색되어 반환 됩니다.

 

$("#content","div","a",".article") 경우 ID의 값이 "content"인 객체, "div","a" 태그를 가지는 객체, 클래스 명이 article인 객체를 탐색하여 반환을 하게 되는 반면 $("div.article")의 경우 "div" 태그로 구성되었으며 동시에 클래스명이 "article"인 객체를 반환합니다.

 

다음 두가지 예제를 통해 두 가지 셀렉터의 동작과 차이점을 알아보겠습니다.

 

첫번째 예제 : ID 값이 content이며 ul요소를 찾아 테두리를 파랑색으로 변경합니다.

 

 

두번째 예제 : DIV 요소중에 클래스명이 searchbar-container인 요소를 찾아 테두리를 파랑색으로 변경합니다.

 

 

오늘은 jQuery의 셀렉터의 기본적인 내용을 정리했습니다.

셀렉터는 jQuery에서 가장 많이 사용하는 부분이며, 동적인 웹 개발에 필수적인 항목으로 반드시 알아두어야 하는 부분입니다.

  1. 꿀벌 2018.08.27 07:46

    꿀벌방금
    k01050030014@gmail.com 입니다
    안녕하세요 전 드론으로 항공촬영사진을 티스토리에서 올려서 여러사람들이 볼수있게끔 작가활동식으로 하고 싶습니다 잘 부탁드려요 4개월 동안 댓글을 달았지만 아직도 채택이 안되었는지 안되네요 ㅜㅜ
    잘 부탁드리겠습니다

  2. 꿀벌 2018.08.27 07:46

    k01050030014@gmail.com 입니다
    안녕하세요 전 드론으로 항공촬영사진을 티스토리에서 올려서 여러사람들이 볼수있게끔 작가활동식으로 하고 싶습니다 잘 부탁드려요 4개월 동안 댓글을 달았지만 아직도 채택이 안되었는지 안되네요 ㅜㅜ
    잘 부탁드리겠습니다

오랜만에 글을 올립니다. 오늘은 jquery 이벤트 관련 메서드 중 동적으로 이벤트를 맵핑 할 수 있는 메서드를 정리해보겠습니다. 

자바스크립트 등과 같은 웹용 개발언어에서 조금은 불편한 것이 동적인 부분의 처리가 어렵다는 것이었습니다. 그러니 jquery의 live 메서드와 die 메서드는 그런 부족한 부분을 채워주는 메서드 입니다.


.live

 

 


 .live()의 메서드는 jqeury 플러그인으로 개발되어 사용이 되어오다가 jquery 버전 1.3 부터 정식 메서드로 추가되었습니다. 메서드 단어의 뜻으로는 정확히 어떤 기능을 하는 메서드인지 감이 잡히지 않습니다. 간단하게 설명하자면 개체(요소)에 이벤트라는 생명을 불어 넣어준다고 생각하시면 됩니다.


이해가 잘 안되시죠?(저도 잘 안됩니다. 메서드 이름의 단어 뜻만 가지고 설명하려고 하다보니 이해가 잘 안됩니다.)


좀더 쉽게 설명을 해보면 .click(), .bind() 등의 메서드는 HTML문서에 로드가 완료된 개체들에게만 이벤트를 맴핑을 했다면, .live() 메서드는 동적으로 생성되거나 앞으로 생성될 개체들에게도 이벤트를 맴핑 시켜 줄 수 있습니다.


예를 들어 $("a").click(function () { alert('a clicked');});의 경우 이미 로드가 완료된 HTML 문서 내에 존재하는 "a" 개체를 찾어 마우스 클릭 이벤트를 맴핑 합니다. 이후 에 동적으로 추가되는 "a"의 개체에는 이벤트를 맴핑 할 수 없습니다. 하지만 $("a").live('click',function() { alert('live click a'); });  처럼 사용한다면 처음 로드된 개체 및 로드 후에 동적으로 생성되는 모든 "a" 개체에도 동일한 이벤트가 적용됩니다.


사용형태는 .bind() 메서드와 사용형태가 전체적으로 비슷합니다. .bind()와 동일하게 여러 이벤트를 한번에 등록하는 것도 가능합니다. 



<!DOCTYPE html>

<html>

<head>

  <style>

  p { background:yellow; font-weight:bold; cursor:pointer;

      padding:5px; }

  p.over { background: #ccc; }

  span { color:red; }

  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

  <p>Click me!</p>


  <span></span>

<script>

$("p").live("click", function(){

  $(this).after("<p>Another paragraph!</p>");

});

</script>


</body>

</html>


Click me를 누를때 마다 <p>요소가 추가 되는 내용입니다. 추가된 <p> 요소에도 이벤트가 맴핑되어 역시 같은 기능을 수행합니다.









.die()



 

앞서 설명한 .live()와는 반대의 개념을 가진 메서드로서 동적으로 맴핑된 이벤트를 해제하는 기능을 하는 메서드입니다.

동적으로 맴핑된 이벤트를 해제하는 이유는 클라이언트에서 HTML문서의 변화를 계속 감지하기 때문에 클라이언트의 부하를 줄여주기 위한 것도 있으며, 어느 순간 해당 기능이 없어지는 경우 불필요한 부하를 막거나 계속되는 이벤트 맴핑으로 인한 오류를 미연에 방지하기 위함입니다.



<!DOCTYPE html>

<html>

<head>

  <style>

button { margin:5px; }

button#theone { color:red; background:yellow; }

</style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

  <button id="theone">Does nothing...</button>

<button id="bind">Bind Click</button>

<button id="unbind">Unbind Click</button>


<div style="display:none;">Click!</div>

<script>


function aClick() {

  $("div").show().fadeOut("slow");

}

$("#bind").click(function () {

  $("#theone").live("click", aClick)

              .text("Can Click!");

});

$("#unbind").click(function () {

  $("#theone").die("click", aClick)

              .text("Does nothing...");

});


</script>


</body>

</html>


bind click을 누르게 되면 이벤트를 동적으로 맴핑을 시켜줍니다. 그 이후 부터는 클릭을 하게되면 click 이벤트가 동작을 하게 됩니다.


반대로 unbind를 클릭하게 되면 동적으로 맴핑되었던 이벤트를 해제시켜 줍니다. 간단하게 동적으로 이벤트를 맴핑하거나 맴핑 해제를 시킬 수 있다는 것이 너무 환상적입니다.



 

  







.one()





 .bind()와 동일한 방식으로 이벤트를 추가합니다.  .bind()메서드로 맴핑된 이벤트는 HTML 문서가 오픈 되어 있는 동안에 계속 사용할 수 있습니다.  하지만 .one() 메서드로 맴핑된 이벤트는 딱 한번만 실행이 되고는 사라집니다. 


딱 한번만 실행이 됩니다. 실행되는 걸 확인해 보고 싶으시다면 http://api.jquery.com/one/ 을 방문하여 확인해보시기 바랍니다.









 

jquery 이벤트 메서드들 중에서 가장 중요한 메서드인 bind() 메서드를 정리해보았습니다. 


.bind()




이 메서드는 단어로 이해를 하면 묶어준다는 뜻입니다.  개체와 이벤트를 묶어주는(연결해주는) 역할을 합니다.


다른 event 관련 메서드는 직접 호출하지만, bind()의 경우 파라미터의 값으로 이벤트 이름을  대입하여 해당 이벤트를 체크합니다.


$("span").click(function() { alert('click'); }); 


event 메서드는 이렇게 사용했다면, bind() 메서드를 통해서는 다음과 같이 표현됩니다.


$("span").bind('click', function() { alert('bind click');});


두 메서드의 차이점은 .click() 메서드는 직접 호출을 하는 것이 아니고, bind() 메서드는 click() 메서드의 이름을 파라미터로 넘겨 동일한 효과를 얻는 것입니다.


이런 기능을 통해 조건에 따라 간단한 이벤트를 동적으로 할당 할 수 있습니다. 또한, 여러가지의 이벤트를 쉽게 선택한 개체(요소)에 적용할 수 있습니다. 두 개의 이벤트를 적용한 아래의 예제를 통하여 bind() 메서드에 대해 자세하게 알아보겠습니다.


<!DOCTYPE html>

<html>

<head>

  <style>

p { background:yellow; font-weight:bold; cursor:pointer; 

padding:5px; }

p.over { background: #ccc; }

span { color:red; }

</style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

  <p>Click or double click here.</p>

<span></span>

<script>

var count = 0;


$("p").bind("mouseenter mouseleave", function(event){

   count++;

  $("span").text(count + " enter or leave");

$(this).toggleClass("over");

});


</script>


</body>

</html>






mouseenter, mouseleave 이벤트를 이용하였습니다.  마우스를 움직이면 카운터가 올라가는 것을 확인할 수 있습니다. 두개의 이벤트를 지정 시에도 문제없이 동작하는 것을 확인 할 수 있습니다.


.bind() 메서드의 파라미터와 eventData를 사용하여 각각의 이벤트를 어떻게 확인하는지 확인해보겠습니다.


<!DOCTYPE html>

<html>

<head>

  <style>

p { background:yellow; font-weight:bold; cursor:pointer; 

padding:5px; }

p.over { background: #ccc; }

span { color:red; }

</style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

  <p>Click or double click here.</p>

<span></span>

<script>

var countEnter = 0;

var countLeave = 0;


$("p").bind("mouseenter mouseleave", function(e){

  if(e.type == 'mouseenter') {

    countEnter++;

    $("span").text(countEnter + " Mouse enter");

  } 

  else {

     countLeave++;

     $("span").text(countLeave + " Mose Leave");

  }

});

</script>

</body>

</html>








각각의 이벤트에 따라 값이 변하는 걸 볼 수 있습니다.


<!DOCTYPE html>

<html>

<head>

  <style>

p { background:yellow; font-weight:bold; cursor:pointer; 

padding:5px; }

p.over { background: #ccc; }

span { color:red; }

</style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

  <p>Click or double click here.</p>

<span></span>

<script>

var countEnter = 0;

var countLeave = 0;


$("p").bind({

  mouseenter : function(){

    countEnter++;

    $("span").text(countEnter + " Mouse enter");

  }, 

  mouseleave : function() {

     countLeave++;

     $("span").text(countLeave + " Mose Leave");

  }

});


</script>

<pre>

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

  &lt;style&gt;

p { background:yellow; font-weight:bold; cursor:pointer; 

padding:5px; }

p.over { background: #ccc; }

span { color:red; }

&lt;/style&gt;

  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;p&gt;Click or double click here.&lt;/p&gt;

&lt;span&gt;&lt;/span&gt;

&lt;script&gt;

var countEnter = 0;

var countLeave = 0;


$("p").bind({

  mouseenter : function(){

    countEnter++;

    $("span").text(countEnter + " Mouse enter");

  }, 

  mouseleave : function() {

     countLeave++;

     $("span").text(countLeave + " Mose Leave");

  }

});

&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

</pre>

</body>

</html>






바로 위 스크립트 소스를 변경하여,bind() 메서드 파라미터에 eventData를 대신에 각각의 이벤트에 관련 함수를 연결하여 해당 이벤트를 구분 하고 있습니다. 마찬가지로 동일한 동작을 수행하는 것을 확인할 수 있습니다.


이벤트를 제어하기 위해서 꼭 알아야 하는 메서드이니 기억해 두시면 좋을거 같습니다.

jquery 이벤트에 정리를 해보도록 하겠습니다. jquery는 이벤트를 쉽고 간단하게 핸들링할 수 있는 여러 메서드를 제공하고 있습니다. jquery를 사용하지않는다면 직접 이벤트 지원 메서드를 사용자가 작성해야 하지만 jquery를 사용한다면 그런 수고를 덜 수 있습니다.

지원되는 메서드는 마우스 클릭 부터 더블클릭 그리고 마우스 휠에 대한 이벤트까지 쉽게 처리하고 사용할 수 있습니다.


jquery에서 제공하는 이벤트 관련 메서드는 수 없이 많습니다. jquery를 사용하는 개발자는 많은 jquery를 이벤트를 쉽게 이용할 수 있고, 다양한 UX를 만들 수 있다는 장점이 있습니다.(저 같이 게으른 게발자에게는 더 없이 좋은 일입니다.)  오늘은 jquery 이벤트 지원 메서드에 대해 정리를 해보았습니다.


종류 설명
.blur() 요소에서 포커스를 잃을 경우 발생하는 이벤트
.change() <input /> <textarea /> <select /> 요소의 값 변경시 발생하는 이벤트
.click() 마우스 클릭 시 발생하는 이벤트
.dblclick() 마우스 더블클릭시 발생하는 이벤트
.focus() 요소에 포커스 되었을때 발생하는 이벤트
.hover() 마우스가 요소위에 위치했을때 발생하는 이벤트
.keydown() 키 입력시 발생하는 이벤트, 모든 키에 적용
.keypress() keydown 이벤트와 동일하게 키 입력시 발생
enter, tab 등 특수키에는 발생하지 않습니다.
.keyup() 키 입력후 발생하는 이벤트
.mousedown() 마우스 클릭시 발생하는 이벤트
.mouseenter() 선택한 요소의 영역에 마우스가 위치했을때 발생되는 이벤트
.mouseleave() 선택한 요소의 영역에서 마우스가 벗어 났을때 발생되는 이벤트, 인터넷익스플롤러에서만 발생되는 이벤트
jquery는 브라우저 관계없이 사용되도록 시뮬레이터 됩니다.
.mouseout() 선택한 요소의 영역에서 마우스가 벗어났을 때 발생되는 이벤트입니다.
.mouseup() 마우스 클릭 후 발생하는 이벤트
.ready() DOM이 모두 준비가 되었을 때 발생하는 이벤트
.resize() resize() 될 경우 발생되는 이벤트
.scroll() HTML 문서가 스크롤 되었을때 발생하는 이벤트
.select() 선택한 개체를 마우스를 통해 선택할 때 발생하는 이벤트
.submit() submit가 일어날 떄 발생하는 이벤트입니다.(form 메서드 참고)


jquery에서 지원하는 이벤트 목록을 보면 정말 많습니다. 많은 목록의 이벤트를 다 외워둘 필요는 없습니다. 사용법은 거의 대동소이합니다. 따라서 이러한 jquery에서 이런 이벤트를 지원하는 구나 하는 정도로만 알고계시면 됩니다. 어떤 이벤트가 필요하다고 생각되시면 그때 목록을 보시고 사용하시면 됩니다.


가장 많이 사용되는 click 이벤트의 사용법을 예제를 통해 보시면 어떤 방법으로 jquery에서 HTML 요소에 이벤트를 할당하고 처리하는지 아시게 될것입니다.


[이전방식]

<script type="text/javascript">

   function pClick(obj) {

      alert(obj);

   }

</script>


<p onclick="pClick('p tag 1 ');">p tag 1</p>

<p onclick="pClick('p tag 2 ');">p tag 2</p>


[필요한 함수를 만들고, 이벤트가 필요한 요소에 일일이 적용]


추천방식

<script type="text/javascript">

   $(document).ready(function() {

      $("p").click(function() {

         alert($(this).text());

     });

   });

</script>



<p>p tag 1</p>

<p>p tag 1</p>


HTML 요소에는 아무런 작업을 하지 않음.


위와 같은 방식으로 하는 것이 처음에는 어색하고 그렇지만 HTML에서 사용하는 이벤트가 많아지고 동적으로 이벤트와 HTML요소를 맵핑하는 기능을 구현할 경우에는 막노동을 깔끔하게 해결하는 최고의 방법입니다. 또한 HTML 문서를 보기가 깔끔해지며 유지보수도 편하게 할 수 있습니다.

전에 프로그램 개발일을 할 때 주변 지인들과 이야기를 할때 프로그램 개발일이 알고보면 첨단 3D 업종이라고 했던 적이 있습니다.

jquery를 사용하게되면 일일이 수작업을 해야했던 일들이 많이 줄어드는 걸 알 수 있습니다.


.click()


jquery click


  

마우스 클릭시 동작하는 이벤트입니다. 선택한 객체에 마우스 클릭 이벤트가 발생할 경우 정의한 메서드(함수)가 실행 되며, 매개변수로 eventData로 이벤트에 대한 값이 전달 됩니다.


 $("p").click(function () { alert('마우스 클릭');  });


정의 할 경우 HTML 문서에 존재하는 <p> 태그요소에 클릭 이벤트가 할당되고, 정의 메서드의 결과인 alert('마우스 클릭');을 실행하게 됩니다.



<!DOCTYPE html>

<html>

<head>

   <title>jQuery Click 이벤트 사용</title>

  <style>

  p { color:red; margin:5px; cursor:pointer; }

  p:hover { background:yellow; }

  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

  <p>첫번째 문단</p>

  <p>두번쨰 문단</p>

  <p>세번째 문단</p>


<script>

    $("p").click(function () {

      alert('마우스 클릭');

    });

</script>


</body>

</html>



클릭 이벤트가 필요한 요소의 셀렉터를 통해 선택하고, 선택된 모든 요소에 일괄적으로 이벤트가 적용됩니다. 이런 식으로 개발을 하면 코드의 양을 줄이고, 관련 메서드(함수)를 수정할때 일이 확 줄어드는 이점이 있습니다. 코드의 양이 줄어들기 떄문에 클라이언트로 전송되는 데이터도 적어지므로 트래픽에 대한 부담도 줄 일 수 있습니다.


웹에서는 거의 사용되지는 않지만 더블클릭을 구현하고 싶으시다면 위 예제에서 click() 부분을 dblclick()으로 변경하시면 됩니다.


<script>

    $("p").dblclick(function () {

      alert($(this).text());

    });

</script>



마지막으로 키보드 입력시 키보드의 키 값을 알아내는 예제를 통해 eventData의 사용법을 간단하게 알아보겠습니다.


.keydown()


jquery keydown




.keydown() 메서드를 사용하는 이유는 엔터키와 특수키 입력 체크를 위해서이며, 특수키에 대한 값이 필요 없을 경우 .keypress()를 사용하면 됩니다.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<style>

    div,pre {background : #FFF; padding:10px; margin:10px;}

table {border:1px solid #aaa;}

td { border:1px solid #aaa; width:25px; height:25px;}

.selected { font-wei:bold; color:white; background-color:red;}

</style>

    <script type="text/javascript">

  $(document).ready(function() {

   $("#txtinput").keydown(function(e) {

$("#txtKeyCode").val(e.keyCode);

});

  });

   </script>

</head>


<body style="padding:10px">

   <h2>jQuery selector</h2>

   <p>jQery에 대한 자세한 것을 보려면  jquery.com을 방문하세요.</p>

   <input type="text" id="txtinput" /><br /> 

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

</body>

</html>







입력되는 키에 따른 "keycode" 값이 노출 될 것입니다. "enter", "ctrl","tab" 등의 특수 키보드의 값도 확인 할 수 있습니다. jquery에서 지원하는 이벤트 관련 메서드는 많습니다. 모든 것을 다 정리하기는 어렵고 이렇게 사용한다 하는 정도만 정리하였습니다.


jQuery form 관련 메서드를 정리해보겠습니다. 웹 프로그램에서 Form은 매우 중요한 요소입니다. 물론 웹프로그램을 만들 필요가 없다면 별로 중요하지 않을 수 있습니다.  사용자의 데이터를 서버로 전송하는 역할을 합니다. 


form하면 항상 등장하는 메서드가 submit()입니다. "submit"는 form에 있는 데이터를 사용자가 지정한 곳에 보내는 역할을 합니다.


jQeury에서 지원하는 .submit() 도 동일한 역할을 합니다.






.submit(handler(eventObject))를 살펴 보면, 뒤에 handler라는 것이 존재를 하고 있습니다. submit()를 클릭하게 되면 정의된 handler가 실행이 되어 실행되고 난 후 결과에 따라 서버로 데이터를 전송 할 것인지 말 것인지를 결정하게 됩니다.


일반적인 사용방법은 다음과 같습니다.


function SendData() {

   if(document.getElementById("txtName").value == '')

   {

         alert("자료를 입력하세요");

         return;

   } else {

        document.form.submit();

   }

}


위 방법을 jQuery에서 제공하는 .submit()를 사용하면 다음과 같습니다.


$('form').submit(function() {

   if($('#txtName').val() = '') {

         alert('자료를 입력하세요');

         return false; 

   } else {

        return ture;

   }

});



조금 형태만 달라졌을 뿐이지 기본적인 개념은 기존과 동일합니다. 사용하는데 큰 어려움 없이 바로 사용할 수 있을 것입니다.




서버와의 데이터 통신을 위해서 form에 있는 데이터를 직렬화 하거나 url을 통해 전달하는 경우가 있습니다. 특히 Ajax를 이용한 비동기 통신에서는 데이터 직렬화를 많이 사용하고 있습니다. 이런 데이터를 직렬화를 위해서 jQuery에서는 form 데이터를 직렬화 시킬 수 있는 메서드를 제공하고 있습니다.


.serialize(), serializeArray()




   

메서드의 명칭이 직렬화 입니다.  두 메서드의 역할은 동일하며, 반환되는 값에서 약간의 차이가 있을 뿐입니다.

.serialzie()는 선택한 form의 값을 'data=1&form=2&button=3'의 형태로 반환하며,  .serializeArray() 메서드는 jQuery 배열 개체로 반환합니다.


Ajax관련 데이터를 만들 때는 .serialize()를 사용하시면 됩니다.



<form>

  <div><input type="text" name="a" value="1" id="a" /></div>

  <div><input type="text" name="b" value="2" id="b" /></div>

  <div><input type="hidden" name="c" value="3" id="c" /></div>

  <div>

    <textarea name="d" rows="8" cols="40">4</textarea>

  </div>

  <div><select name="e">

    <option value="5" selected="selected">5</option>

    <option value="6">6</option>

    <option value="7">7</option>

  </select></div>

  <div>

    <input type="checkbox" name="f" value="8" id="f" />

  </div>

  <div>

    <input type="submit" name="g" value="Submit" id="g" />

  </div>

</form>



$('form').submit(function() {

  alert($(this).serialize());

  return false;

});



결과값은 a=1&b=2&c=3&d=4&e=5 의 형태로 나타날 것입니다.



.serializeArray()는 다음과 같이 사용됩니다.


<form>

  <div><input type="text" name="a" value="1" id="a" /></div>

  <div><input type="text" name="b" value="2" id="b" /></div>

  <div><input type="hidden" name="c" value="3" id="c" /></div>

  <div>

    <textarea name="d" rows="8" cols="40">4</textarea>

  </div>

  <div><select name="e">

    <option value="5" selected="selected">5</option>

    <option value="6">6</option>

    <option value="7">7</option>

  </select></div>

  <div>

    <input type="checkbox" name="f" value="8" id="f" />

  </div>

  <div>

    <input type="submit" name="g" value="Submit" id="g" />

  </div>

</form>




$('form').submit(function() {

  console.log($(this).serializeArray());

  return false;

});



결과값은 다음과 같습니다.


[

  {

    name: "a",

    value: "1"

  },

  {

    name: "b",

    value: "2"

  },

  {

    name: "c",

    value: "3"

  },

  {

    name: "d",

    value: "4"

  },

  {

    name: "e",

    value: "5"

  }

]



  웹프로그램을 만들때 쿼리스트링을 만들기 위해 많은 노력을 합니다.일면 노가다 작업이라고 합니다. 그런 작업을 하지 않아도 된다는 것입니다. form 데이터를 전송하게 되면 자동으로 직렬화가 이루어지지만, Ajax와 같은 특수한 상황에서는 정말로 필요한 메서드라고 생각합니다.


 

요즘 하는 일이 바쁘다 보니 jQuery 정리하는 것이 뒷전으로 밀렸습니다.  잠시나마 시간을 내어 jQuery element 속성을 제어하는 메서드들에 대해 공부한 후 정리를 해놓으려고합니다. 이렇게 정리를 해두어야 필요할 때 바로 이용할 수 있습니다.(제가 정리를 잘 못합니다.)

 

 

먼저 HTML 문서의 속성을 제어하는 메서드입니다.

HTML element에서 이름을 제외한 나머지 요소는 모두 속성이 될 수 있습니다. 

 <img src="/images/reply.png" alt="답글" />이라는 HTML 태그가 있다면 src, alt는 모두 요소가 됩니다. 정의되지 않은 값을 사용자 임의로 넣어 사용 가능합니다.

(주의 : 사용자 정의 속성은 특별한 오류를 나타내지는 않지만, 간혹 웹브라우저(익스플로러,크롬,사파리,오페라 등) 특성으로 오류가 발생하는 경우가 있습니다.)

 

.attr()

 

 

 CSS 제어 메서드인 .css() 메서드와 이름만 다를 뿐, 동작하는 방법은 동일합니다.


  jQuery Document의 정의를 보면 

 

   "Get the value of an attribute for the first element in the set of matched elements." 
   "검색된 요소들 중 첫번째 속성의 값(value)를 가져온다"라고 번역할 수 있겠네요(제가 영어가 약합니다.)

 다음의 간단한 예제를 보시면 쉽게 이해를 하실 수 있습니다.

 

<p>
     jQuery attribute 메서드  <em title="huge, gigantic">.attr() 설명</em> 입니다.
</p>

  타이틀 강조는 :<div></div>

<script>
var title = $("em").attr("title");  ==> em요소의 title 속성을 가져옵니다.
  $("div").text(title);               ==> div 요소에 출력을 합니다. 이글 아래에서 설명
</script>

 

 

결과 :
 타이틀 강조는 : huge, gigantic

 

요소에 속성값을 설정하기 위해서는  .attr(attributename, value)을 사용합니다.

 

<img id="greatphoto" src="/images/photo-1.jpg" alt="photo1" />
$('#greatphoto').attr('alt', 'Photo one');   // img 요소의 alt 속성을 photo one을 변경합니다.

$('#greatphoto').attr('title', 'Photo by hong');  //img 요소의 title 속성을 phpto by hong으로 변경합니다.
$('#greatphoto').attr({ alt: 'Photo one',  title: 'photo by hong'});  // 두번에 걸쳐서 변경 했던 것을 array를 사용하여 한번에 변경합니다.

 

속성값을 설정할 경우 해당 속성이 존재하면 기존 속성에 덮어쓰기를 하며, 속성이 존재하지 않을 경우에는 새로운 속성을 할당하게 됩니다.

 

.removeAttr()

 


  jQuery.com의 정의를 보면

 "Remove an attribute from each element in the set of matched elements."
 일치하는 요소들의 집합에서 각 요소들로 부터 속성을 제거( 번역이 이상하다 흉보지 마시기를.....)


    간단하게 설명하면 선택된 요소에서 속성을 제거하는 메서드라고 생각하시면 됩니다.

 

  attr()메서드를 통해서 속성값을 추가, removeAttr() 메서드를 사용하여 해당 속성에 대한 이름과 값을 제거할 수 있습니다.

 

 

.val() 

 

 

  선택된 요소의 값을 가져오는 메서드입니다.  jQuery에서 input, select, textarea 등의 요소에서 value(값)에 해당되는 값을 가져오거나 설정을 할때 사용하는 메서드입니다.

 

자바스크립트의 document.getElementById("txtName").value; 와 동일한 역할을 합니다.

 

<input type="text" name="txtName" id="txtName" />
var name=$("#txtName").val();  // 입력된 값 가오기
$("#txtName").val("val을 이용한 입력하기"); // 값 입력하기

 

 

.text()/ .html() 

 

 

 

 

  선택된 요소의 text 또는 html을 가져오거나 지정하는 값으로 설정하는 메서드입니다.
  .text()와 .html()의 차이는 다음 예를 보시면 이해를 하실 수 있을 것입니다.

 

  .html() 

 

    <div class="container">
      <div class="box">컨텐츠를 표시할 박스입니다.</div>
    </div>

   $('div.container').html();  ==> 1

   $('div.container').text();  ==> 2

   
1의 결과는 

<div class="box">컨텐츠를 표시할 박스입니다.</div>

 

 이 출력될 것입니다.


2의  결과는

컨텐츠를 표시할 박스입니다.

 

출력될 것입니다.

 

 .text()와 .html()의 큰 차이점은 text()는 순수 text(문자열)을 가져오거나 지정하는 메서드 이며  .html()은 html 형태의 문자열을 가져오거나 지정하는 메서드라는 것입니다. 이것만 기억하면 사용하는데는 큰 어려움은 없을 것이라 생각합니다.

 

'IT > jquery' 카테고리의 다른 글

jquery 이벤트 지원 메서드 정리  (0) 2012.12.21
jQuery Form 관련 메서드 정리  (0) 2012.12.17
jQuery element(요소)의 속성 관련 메서드 정리  (0) 2012.12.13
jQuery CSS 제어 메서드 정리  (1) 2012.11.29
[jQuery]jQuery Core 란?  (0) 2012.11.26
jQuery 문법  (0) 2012.11.23

  jQuery에서는 굉장히 많은 메서드를 제공하고 있습니다. 그 많은 메서드를 다 외워서 사용하기에는 불가능할 것이라 생각됩니다. 저 역시도 이제 막 새롭게 시작하다보니 메서드를 거의 외우지 못하고 있습니다.

 

제가 다른 컴퓨터 언어(Delphi, C, C++, C# )등을 공부할떄 기본 문법만 익히고 나서 나머지 함수(function 등)은 함수 목록을 한번 훑어보고 이러한 기능을 하는 함수들이 있구나 하고 넘어가고 실제 개발할 때 그 함수 목록을 검색하면서 개발을 했고, 지금도 그렇게 개발을 하고 있습니다.

 

따라서 jQuery를 공부하는데 있어서도 마찬가지 방법으로 공부를 하면 될 것이라고 생각하고 있으며, 지금은 jQuery를  이용하여 복잡한 개발을 할 생각은 없고 단지 운영하고 있는 블로그에 간단하게 몇가지만 적용할 계획인 관계를 가장 많이 사용되고 , 가장 필수적으로 사용되는 jQuery  메서드들만 우선적으로 공부하고 정리할 생각입니다.

 

오늘은 jQuery에서 CSS를 제어하는 기본적은 메서드를 정리해보려고 합니다.

먼저 HTML 문서의 스타일을 제어하는데 사용되는 API를 정리해 보도록 하겠습니다.

 

 

.addClass()

 

 

 

$("selector").addClass("ClassName") 의 형태로 사용되어 셀렉터를 통해 가져온 객체에 ClassName의 CSS 클래스를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .addClass test</title>
<style>
   .noListStyle
   {
      list-style-type:none;
   }
   .horizontal
    {
      float:left;
      width:120px;
      height:100px;
      border:1px solid black;
      margin:10px;
    }
</style>

  <script

src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type = "text/javascript">
  $(document).ready(function () {
  });
</script>

</head>
<body>
    <ul>
        <li> jQuery addClass 테스트입니다.</li>
        <li> jQuery는 가볍고 사용하기 쉬운 javascript Library입니다.</li>
        <li> jQuery를 이용하여 블로그에 적용하고 싶어서 jQuery를 공부하고 있습니다.</li>
    </ul>
</body>
</html>

 

 

 

 


 

위 이미지를 보면 <body> 태그 내부를 보면 속성을 하나도 주지 않았기 때문에 스타일이 적용이 되지 않았습니다.

 

<script type = "text/javascript">
  $(document).ready(function () {
     $("li").addClass("noListStyle");
     $("li").addClass("horizontal");
  });
</script>

이제  위와 같이 .addClass를 사용하여 스타일을 적용시켜 주면 다음과 같은 이미지처럼 변하게 됩니다.

 

 

 

 

 

다음은 function 파라미터를 통한 클래스를 제어에 대해 정리해보겠습니다.

.addClass(function(index, currentClass))는 jQuery 버전 1.4에서 추가되었으며 함수가 추가되면서 추가적인 기능을 수행할 수 있습니다.

 

-index :  element의 위치를 function으로 전달 (Returns the index position of the element in the set)
-currentClass : element의 현재 class를 function으로 전달(Returns the current class name of the selected element)

                
저는 저렇게 이해를 했습니다. index와 currentClass가 function으로 매개변수로 해서 전달되어 function 내부에서 사용이 되는거 같습니다.(제가 잘못 이해 할 수 있습니다.)


addClass 함수가 실행되는  방식은 element에 class를 추가하기 전에 function이 먼저 실행됩니다.
index는 현재 선택된 요소(element)의 위치를 의미하며 currentClass는 선택된 요소(element)에서 사용된 클래스를 의미합니다.

 


예제를 보면 이해가 빠를 것이라 생각합니다. index는 문서내에서 selector "div" 요소의 순서를 의미합니다. 그리고 currentClass는 그 요소(element)의 현재 class를 의미하며, 그 index와 현재 클래스를 function을 전달하는 것입니다.
함수 내부를 보시면  if(currentClass ="red" && index == 2) 부분을 보시면 이해가 금방 될 것입니다. 문서 내  div 태그의 순서가  세번째이고 그 currentClass가  "red"인 경우 class 이름을 "green"을 리턴하여 전체 div 태그 중 두번째 요소(element)에 클래스를 추가하는 것입니다.

 

<!DOCTYPE html>
<html>
<head>
  <title>jQuery CSS 제어하기</title>
  <style>
  div { background: white; }
  .red { background: red; }
  .red.green { background: green; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <span> jQuery 사이트를 방문해보세요. </span>

 <div class="red">This div should be white</div>
 <div class="red">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div  class="red">This div should be white</div>
 <p>There are zero green divs</p>

<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;

    if ( currentClass === "red" && index == 2 ) {
      addedClass = "green";
      $("p").text("There is one green div");
    }
 
    return addedClass;
  });
</script>
</body>
</html

 


.css

 

  스타일을 가져오거나 적용합니다.

  $("p").css("background-color"); 의 "P" 문서내의 전체 "P"태그 중 첫번째 객체의 배경색상을 가져옵니다.

 새로운 스타일을 적용하고 싶으면 css(propertyname, value) 메서드를 사용하면 됩니다. 이 메서드를 사용하여 스타일을 적용하면 됩니다.

 

 

문서내의 파란색 배경의 Paragraph가 빨간색 배경을 변경이 되었습니다.


.css(propertyname, function(index,value)) 의 형식으로 확장하여 사용할 수 있습니다. index와 value가 있습니다.  index의 경우 선택한 객체의 순서, vaule는 해당 객체의 현재 스타일 속성값입니다.

다음의 예제를 보시면 이해가 빠르실 것이라 생각합니다.

 

 




.hasClass(className)

 

 

 

선택된 개체에 className과 같은 클래스가 있는지 검사하여 결과를 true/false로 반환합니다.

<p class="intro">This is a paragraph.</p>

$("P").hassClass("intro"); ==> true 를 반환합니다.
$("P").hassClass("intro1"); ==> false 를 반환합니다.

 

.removeClass(className)

 


  addClass()와 반대로 해당 객체의 className을 삭제합니다.


 
.toggleClass()

 


   선태간 객체를 스위치처럼 켯다(addClass()), 껏다(removeClass())하는 기능을 하는 메서드입니다.

  $("p").toggleClass("intro")


   선택한 객체에 intro가 적용 시 intro를 삭제하고, intro가 미적용시 intro를 추가하는 역할을 합니다.

 

  

 

 

toggleClass(className, switch)
   두번째 파라미터 switch 값을 통해 사용자가 toggle 상태를 지정할 수 있습니다. true라면 addClass와 같은 효과를 반대라면 removeClass와 같은 효과를 나타냅니다.

 

이 메서드 역시 function을 통한 확장된 제어가 가능합니다.
이전 메서드와 같이 동일한 형태를 취하고 있는 걸 확인할 수 있습니다. function의 역할은 toggle할 클래스명이 리턴 될 것 같습니다. 

 


 .position() .width() .height() 
  메서드 이름만 봐도 어떤 역할을 하는지 금방 알거 같습니다.

01

02

03

  .position

 개체의 위치값을 반환   

width()

가로의 길이 반환 및 설정

height() 

세로의 길이 반환 및 설정


  

 

 

 

 

 

 

 

 

 

개체의 가로길이를 가져올때는 $("p").width(), 세로 길이를 가져올 떄는 $("p").height() 의 형태로 사용하면 됩니다.

 가로길이나 세로길이를 설정하려면 .width(100), .height(100)의 형식으로 사용하면 됩니다.

 

 

jQuery에서 CSS 스타일을 제어하는 방법은 아주 간단합니다. jQuery 메서드는 아주 많이 있습니다. 모든 메서드를 외울 수는 없을 것입니다. 저 역시도 그렇게 정리하도록 할 것입니다. 많이 사용하는 메서드 위주로 정리하고 나머지는 메서드는  jquery.com에서 검색해서 사용하는 것이 좋을거 같습니다.

'IT > jquery' 카테고리의 다른 글

jQuery Form 관련 메서드 정리  (0) 2012.12.17
jQuery element(요소)의 속성 관련 메서드 정리  (0) 2012.12.13
jQuery CSS 제어 메서드 정리  (1) 2012.11.29
[jQuery]jQuery Core 란?  (0) 2012.11.26
jQuery 문법  (0) 2012.11.23
[jQuery]jQUERY란?  (0) 2012.11.21
  1. BlogIcon 균스 2013.01.09 12:31

    솔직히 티스토리는 html 이나, css 같은 걸 알아야만이 더욱 유용하게 이용할 듯 싶어요.
    저 같은 경우엔 네이버 블로그 만 이용하다, 처음 티스토리 로 이용을 하고 있는데 쉬운게 하나 없더군요.

    암튼 미리수님 블로그 를 보면서 공부를 해 볼까 싶네요^^ 좋은 정보 잘 보고 갑니다~~

 간단하게 jQuery에 대한 간단한 설명, jQuery의 기초적인 문법에 대해 요약을 했습니다. 그것만 가지고는 jQuery를 이용해서 개발을 하기는 어려울 것입니다. 저는 jQuery관련 전문적으로 개발을 하는 사람이 아닌 관계로  깊이 있게 들어가지는 못했습니다.
그냥 어느정도 공개된 jQuery 플러그인을 가져다가 블로그나 웹페이지에 붙여넣어 사용하는 정도의 수준입니다.

그렇지만 공개된 jQuery 플러그인을 사용한다고 하더라도 기본적인 jQuery에 대한 문법 등은 알고 있어야 블로그에 적용하는데 어려움이 없을거라 생각하여 정리한 내용입니다.

 

jQuery Core?

  이번에는 jQuery core에 대해 정리 해보고자 합니다.

jQuery 함수들을 살펴보면 jQuery 대신 "$"를 사용하고 있는 것이 보입니다. jQuery소스를 확인해 보면 jQuery대신 $문자를 사용할 수 있도록 설정할 수 있는 부분이 있습니다.


첫번째로 jQuery(==$)를 사용하여, jQuery 객체를 생성하는 방법에 대해 정리해보면
셀렉터를 통해 가져오는 값은 jQuery 객체입니다. jQuery 객체는 셀레터를 통해서 가져오거나, 개발자가 ()안에 특별한 값을 넣는 것으로 객체를 만들 수 있습니다.

$(html)
$("<div>div tag</div>")
$("<div/>")

위와 같은 형태로 사용자 마음대로 jQuery 객체를 만들 수 있습니다.

 

 

 

 

$()는 ()안에 들어가는 표현식에 따라 서로 전혀 다른 기능을 수행하고 있습니다.
   셀렉터 문법을 사용하면 $는 셀렉터가 되며, 표현식에 함수가 들어갈 경우 document.onload와 대응이  되는 역할을 하게 되며, $(document).ready(function(){});의 함축적인 표현으로 $(function(){});를 사용하기도 합니다.

jQuery 객체는 javascript의 개체와는 전혀 다르며, 사용법 또한 많은 부분에서 차이가 납니다.

$("#id")와 document.getElementById("id")를 통해 가져온 객체를 alert() 메서드를 통해 확인해보면 $("#id")의 경우 object형식을, 후자의 경우 HTML Elemet로 나타다는 걸 확인 할 수 있습니다.

jQuery.noConflict()
예약어로 사용되는 "$"문자를  다른 라이브러리와 충돌이 나지 않도록 하게 하는 역할을 합니다.
대표적으로 prototype이라는 라이브러리가 "$"를 사용하고 있으며, ProtoType에서 jQuery로 옮겨가고 있는 사이트나 개발 시 꼭 Prototype과 혼용해서 사용하는 경우가 있다면, noConflict() 메서드를 통해 jQuery의 "$"를 무력화 시키거나 다른 약어로 변경할 수 있습니다.

우선 jQuery의 noConflict의 내부를 보면  "$"를 _$ 또는 _jQuery로 변경하는 것을 확인 할 수 있습니다.

noConflict: function(deep) {
   window.$ = _$;
   if(deep) {
     window.jQuery = _jQuery;
   }
   return jQuery;
},

"$" "X"로 변경하기
var X = jQuery.noConflict();
단순히 변수를 하나 지정하고, noConflict()를 실행하기만 하면 됩니다.

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>jQuery Selector</title>
   <style>
       div,pre { background : #FFF; padding:10px; margin:10px; }
       table { border:1px solid #AAA; }
       td { border:1px solid #AAA; width:25px; height:25px;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
     var X = jQuery.noConflict();
     X(document).ready(function () {
       X("td").not(function (index) {
          return index % 3 == 0;
       }).css("background","red");
    });
   </script>
</head>
<body style="padding:10px;">
   <h2>jQuery 시작 Selector</h2>
   <p>jQuery에 대한 자세한 내용을 보려면 jquery.com을 방문하세요.</p>
   <div>
    <table>
      <tr>
         <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
      </tr>
      <tr>
         <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> 
      </tr>
      <tr>
         <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
      </tr>
      <tr>
         <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
      </tr>
      <tr>
         <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
       </tr>
      </table>
     </div>
  </body>
</html>

 

 

 

$=> X로 변경 후에도 동작에는 전혀 문제가 발생되지 않습니다.

간단하게 jQuery Core에 대해 정리하였습니다. 다음에는 jQuery에서 CSS(Style) 관련 메서드에 대해 정리해보도록 하겠습니다.

'IT > jquery' 카테고리의 다른 글

jQuery element(요소)의 속성 관련 메서드 정리  (0) 2012.12.13
jQuery CSS 제어 메서드 정리  (1) 2012.11.29
[jQuery]jQuery Core 란?  (0) 2012.11.26
jQuery 문법  (0) 2012.11.23
[jQuery]jQUERY란?  (0) 2012.11.21
[JQUERY]티스토리 블로그에 JQUERY 불러오기  (0) 2012.11.19

jQuery를 블로그에 적용하기 위해서는  jQuery 문법을 알고 있어야 적용하기 쉬울거라 생각하여 먼저 jQuery의 기본적인 문법을 정리하였습니다.

 

jQuery 문법
jQuery 문법은 선택자와 액션으로 구성되어 있으며 선택자는 엘리먼트를 지정하는 부분, 액션 함수는 요소가 수행할 액션을 지정합니다


jQuery 문법 예제
 $(this).hide();
     해당 요소를 감추게 하는 jQuery hide() 메소드

$("divid").hide();
    id가 divid인(id = "divid") 요소를 감추게 한다.

$("p").hide();
    모든 <p> 요소를 감추게 한다.

$(".menu").hide();
     CSS 클래스가 menu인(class=".menu") 모든 요소를 감추게한다.


jQuery 문법


  jQury 문법은 HTML 요소를 원하는대로 선택하고 그 요소에 어떤 액션을 수행하게 만드는 형식으로 작성합니다.

 

  기본 문법은 $(selector).action()의 형식으로 구성됩니다.
    - $ 표시는 jQuery라는 것을 정의
    - (selector)는 "질의하거나 찾을" HTML 요소를 의미하여
    - jQuery action()은 이 요소가 수행할 액션입니다.

 

   jQuery 문법 예제를 들어보면
     $(this).hide() - 현재의 요소를 감춘다.
     $("p").hide() - 모든 <P>요소를 감춘다.
     $("p.test").hide() - class가 test인(class="test") 모든 단락을 감춘다.
     $("#divid").hide() - id가 divid인(id="divid") 모든 요소를 감춘다.

 

   jQuery는 XPATH와 CSS selector 문법을 혼합해서 사용합니다.


jQuery 실행의 기본

 

jQuery의 모든 메서드나 함수들은 document.ready() 함수 안에 위치하게 될 것입니다.


  $(document).ready(function(){
     /*  여러가지 jQuery 함수들 작성 */

});

 

코드 완성의 예

 

 

$(document).ready(function(){

   /* Complete code */

       $("a").click(function(event){
     alert("Thanks for visiting!");
   });
 });

 

jQuery 메서드가 document.ready() 함수 안에 위치하는 것은 jQuery 코드가 문서가 로딩이 끝나기 전(혹은 문서가 준비되기 전)에 실행 되는 것을 막기 위한 것입니다.


지금까지 jQuery를 사용하기 위한 가장 기본적인 문법을 정리하였습니다.

 

다음은 jQuery의 셀렉터에 대하여 정리하도록 하겠습니다.

 

jQuery selectors
   - jQuery의 가장 강력한 부분은 요소를 마음대로 탐색할 수 있다는 것입니다.
   - jQuery selectors는 여러개 또는 한 개의요소를 선택하고 조작할 수 있습니다.

 

[jQuery Element Selectors]
  jQuery는 요소를 선택할 때 CSS 셀렉터를 사용합니다.
    $("P") 는 모든 <P> 엘레먼트를 선택
    $("p.test") 는 class="test"인 모든 <P>를 선택
    $("p#demo")는 id="demo" 인 모든 <P>를 선택

 

[jQuery 속성 셀렉터]
  jQuery는 XPATH 표현을 사용하여 특정 속성을 가진 요소를 선택할 수 있습니다.
  $("[href]")는 href 특성을 가진 모든 요소를 선택
  $("[href=#]")는 href의 값이 '#'인 모든 요소를 선택
  $("[href!=#]")는 href 특성이 '#'이 아닌 모든 요소를 선택
  $("[href$='.jpg']")는 href 특성이 '.jpg'로 끝나는 모든 요소를 선택

 

[jQuery CSS 셀렉터]
  jQuery CSS 셀렉터는 요소의 CSS 속성을 변경할 수 있습니다.
  다음의 예제는 모든 p 요소의 배경색을 빨간색으로 변경하는 예제입니다.
   $("p").css("background-color","red")

 

[jQuery 추가 예제]
   $(this) : 현재의 모든 요소
   $("p") :  모든 <p> 요소
   $("p.intro") : class="intro"인 모든 <P> 요소
   $("p#intro) : id="intro"인 모든 <P>  요소
   $("p#intro:first') :  id="intro"인 <P>요소 중 첫번째 요소
   $(".intro") : class="intro"인 모든 요소
   $("#intro") : id="intro"인 모든 요소
   $("ul li:first") : 첫번째 ul의 첫번째 li 요소
   $("[href$='.png']") : '.png'로 끝나는 href 특성을 가진 요소
   $("div#intro.head") : id=intro인 div 요소 안의 class="head"인 모든 요소


다음에는 jQuery의 이벤트에 대하여 정리 후 블로그 디자인을 바꾸면서 jQuery를 적용해보도록 하겠습니다.

'IT > jquery' 카테고리의 다른 글

jQuery element(요소)의 속성 관련 메서드 정리  (0) 2012.12.13
jQuery CSS 제어 메서드 정리  (1) 2012.11.29
[jQuery]jQuery Core 란?  (0) 2012.11.26
jQuery 문법  (0) 2012.11.23
[jQuery]jQUERY란?  (0) 2012.11.21
[JQUERY]티스토리 블로그에 JQUERY 불러오기  (0) 2012.11.19

  jquery(제이쿼리)를 티스토리 블로그에서 사용해보고자 마음 먹고 앞서 글에선 티스토리 블로그에 jquery(제이쿼리)를 티스토리에 불러오는 방법에 대해 포스팅했습니다. 어려울 것이라 생각했는데 시도를 해보니 그렇게 어렵지 않게 적용이 되었습니다. 오늘은 간단하게 jquery(제이쿼리)에 대해 정리를 해보고자 합니다.

 

jquery(제이쿼리)는 JavaScript Library입니다.

  - JavaScript Library의 종류는 Prototype, Dojo toolkit, Extjs, Mochkit등 여러 종류가 있지만 현재는 kQUERY가 대세인거 같습니다.

  -  jquery(제이쿼리)는 JavaScript 프로그래밍을 매우 단순하게 해줍니다.

  -  jquery(제이쿼리)를 사용하지 않는다면 직접 코딩 해줘야 할 부분이 무척이나 많습니다.  간단한 예를 보도록 하겠습니다.

   /** XHConn - Simple XMLHTTP Interface - **/

function XHConn() {
  var xmlhttp, bComplete = false;
  try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
  catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
  catch (e) { try { xmlhttp = new XMLHttpRequest(); }
  catch (e) { xmlhttp = false; }}}
  if (!xmlhttp) return null;
  this.connect = function(sURL, sMethod, sVars, fnDone) {
    if (!xmlhttp) return false;
    bComplete = false;
    sMethod = sMethod.toUpperCase();
    try {
      if (sMethod == "GET") {
        xmlhttp.open(sMethod, sURL+"?"+sVars, true);
        sVars = "";
      } else {
        xmlhttp.open(sMethod, sURL, true);
        xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
        xmlhttp.setRequestHeader("Content-Type",
          "application/x-www-form-urlencoded");
      }
      xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && !bComplete) {
          bComplete = true;
          fnDone(xmlhttp);
        }};
      xmlhttp.send(sVars);
    }
    catch(z) { return false; }
    return true;
  };
  return this;
}

var myConn = new XHConn();
if (!myConn) alert("XMLHTTP not available. Try a newer/better browser.");
var fnWhenDone = function (req) { alert(req.responseText); };
myConn.connect("mypage.php", "POST", "foo=bar&baz=qux", fnWhenDone);

 

 

이것은 Ajax 객체를 최소한으로 구현한 것입니다. 무척이나 복잡합니다.

 

JavaScript Library를 사용하면 다음과 같습니다.

new Ajax.Request("mypage.php", {
  method: "POST", parameters: "foo=bar&baz=qux“,
  onSuccess(req){ alert(req.responseText); }
});

 

이렇게 간단하게 구현할 수 있습니다. 결과는 동일합니다.

 

jquery(제이쿼리)는 배우기가 무척이나 쉽습니다.

 

저 역시도 자바스크립트를 공부해보고 사용해봤지만 jquery(제이쿼리)를 접하고 난 후에는 jquery(제이쿼리)를 사용합니다. jquery(제이쿼리)를 사용하지 않는다면 직접 구현하는데 시간을 소비해야 하는데 그렇지 않고 다양한 기능을 쉽게 사용할 수 있습니다.

 

 jquery(제이쿼리)는 자신의 블로그 스킨이나 웹페이지에 단 한줄만 추가하여 사용할 수 있습니다.

추가하는 방법은 [jquery(제이쿼리)]티스토리 블로그에 jquery(제이쿼리) 불러오기 보시면 됩니다.

 

이글을 보시는 분은 기본적으로 HTML, CSS, JavaScript에 대한 기본적인 사항을 아실 것이라 믿습니다.

 

JQuery의 특징?

 - HTML 엘리먼트 선택 
 - HTML 엘리먼트 조작 
 - CSS 조작 
 - HTML 이벤트 함수 
 - javascript 효과 및 에니메이션 
 - HTML DOM traversal과 수정 
 - AJAX 
 - Utilities 등의 특징이 있습니다.

 

 

[jQuery 기본 예제]

다음 예제는 JQuery의 hide()메소드를 설명하는 것입니다. 이 hide()메소드는 문서내에 있는 모든 <p>태그를 감추는 기능을 합니다.

 

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
       $("button").click(function() { 
          $("p").hide(); 
       }); 
  }); 
</script> 
</head> 

<body> 
<h2>이 부분은 타이틀입니다.</h2> 
<p>이 부분은 단락입니다.</p> 
<p>이 부분은 또다른 단락입니다.</p> 
<button>Click me</button> 
</body> 
</html> 

 

'IT > jquery' 카테고리의 다른 글

jQuery element(요소)의 속성 관련 메서드 정리  (0) 2012.12.13
jQuery CSS 제어 메서드 정리  (1) 2012.11.29
[jQuery]jQuery Core 란?  (0) 2012.11.26
jQuery 문법  (0) 2012.11.23
[jQuery]jQUERY란?  (0) 2012.11.21
[JQUERY]티스토리 블로그에 JQUERY 불러오기  (0) 2012.11.19

+ Recent posts