2013년 12월 17일 화요일

jQuery study 정리, selector, 주요 method, event

이전 블로그에서 이전 함 (원본 글 2013/12/17 작성)

jQuery, a fast, small, and feature-rich JavaScript library.

 
 jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery 에 대해서 잘 소개한 블로그 post

일반 JavaScript 코드와 jQuery를 사용한 JavaScript 코드
style만 보라고 넣어 둔거고 사실 아래 처럼 간단한 코드는 일반 javascript로 해결하기에 간단하지만 다수 element들의 조작, 검색, 변경에 대해서는 jQuery가 훨 편하다.

 <!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {

var elem = document.querySelector("#hello");
alert(elem.textContent);
console.log(elem.textContent);
};
</script>
</head>
<body>
<h1 id="hello">Hello World</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').on({
click : function() {
alert($(this).text());
console.log($(this).text());
}
});
});
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>


* jQuery 의 메서드르 사용하기 위해서는 jQuery 객체이어야 한다. 자바스크립트 객체를 jQuery 객체로 바꾸려면


[간단 비교 정리]


JavaScript
jQuery 사용 
 DOM element 선택
 document.getElementById()
document.querySelector("selector")
$("selector")
$("selector", context) 
Event 
Object.onXXX = function(event) {}
Object.addEventListener("event", callback)
 $Object.on("event_name", function() {}
$Object.click(function() {})
 DOM 로드 후 실행
(function() {}) ();
window.onload = function() {}
script tag 에 defer 속성 추가 
 $(function() {});
 속성 변경
대부분 속성으로 정의 되어 있음. 
대부분 함수 형태로 되어 있어 method chain으로 사용 가능 

* jQuery 메서드를 사용하기 위해서는 jQuery 객체여야 한다. 자바스크립트 객체를 jQuery 객체로 바꾸려면 $(Javascript_object) 로 변환 할 수 있음.


[jQuery Selectors]

- 전역선택자 : $("*")
 - 태그 선택자 : $("tag_name")
 - 아이디 선택자 : $("#id_value")
 - 클래스 선택자 : $(".class_value")
 - 자손 선택자 : $("parent > a_child")
 - 후손 선택자 : $("parent all_childs")
 - 속성 선택자 :  [속성=값]   |, ~, ^, $, *
 - 가상클래스선택자 : $(:button)

   : 자세한 설명과 소스코드는 아래 링크 참고 
 http://learn.jquery.com/using-jquery-core/selecting-elements/ 


[DOM element 관련 주요 jQuery 메서드]

 - 엘리먼트의 값 관련 메서드
  . html(), text()
  . val() : form tag들에 입력되거나 선택된 값들 

 - 속성 관련 메서드
  . attr(속성이름) : 속성의 값을 반환
  . attr(속성, 값) : 속성의 값을 지정
  . removeAttr(속성이름) : 속성 자체를 지운다

 - Javascript 속성 과 jQuery의 메서드 비교
  . innerHTML -> html()
 . textContent -> text()
 . value -> val()
 . AJAX -> ajax(), get(), post()
 . 스타일 변경  -> css()

 . each() : 배열 관리
   $.each(object, function(index, item){ } )
   $("selector").each(function(index, item){ })

http://api.jquery.com/jQuery.each/
 If an object is used as the collection, the callback is passed a key-value pair each time:
1
2
3
4
5
6
7



var obj = {







  "flammable": "inflammable",







  "duh": "no duh"







};







$.each( obj, function( key, value ) {







  alert( key + ": " + value );







});
Once again, this produces two messages:
flammable: inflammable 
duh: no duh

 Suppose you have a simple unordered list on the page:
1
2
3
4



<ul>







  <li>foo</li>







  <li>bar</li>







</ul>
You can select the list items and iterate across them:
1
2
3



$( "li" ).each(function( index ) {







  console.log( index + ": " + $( this ).text() );







});
A message is thus logged for each item in the list:
0: foo 
1: bar

* 기존 JavaScript 객체들에 대해서 사용하던 for( var key in item) 는 사용 못할 수도 있다.

: 자세한 설명은 아래 링크 참조 
http://learn.jquery.com/using-jquery-core/iterating/



[객체 탐색]

- filter() : 조건에 맞는 객체 선택
  . $("h3:even").css
  . $("h3").filter(":even").css
  . $("h3").filter(function(index) {
        return index %  3 == 0;
       });

- end() : 문서 객체 탐색 종료
  . $("h1").css("background", "orange").filter(":even").css("color", "red").filter(":odd"); 
   => filter 사용 시 전체 결과가 리턴되는 것이 아니라 filter된 element들만 리턴되어 의도대로 처리되지 않는다. 이를 해결하기 위해서는 아래와 같이 메서드 체이닝을 분리해서 처리하던가
    
    $("h1").css("background", "orange");
    $("h1:even).css("color", "white");
    $("h1:odd).css("color", "red");

   end() 메서드를 사용하여 filter전 element들을 대상으로 처리하도록 해야 함.
    $("h1").css("background", "orange").filter(":even").css("color", "white").end().filter(":odd").css("color", "red");


 - eq(), first(), last() : 조건에 맞는 객체 선택
  . $("h1:frist").css()
  . $("h1").first().css()

 - is() : true/false , 인자로 넣은 선택자 인지 아닌지
  . $("h1").each(function() {
      if($(this).is('.selected')) {
          //현재 실행되는 엘리먼트에 selected라는 클래스 속성이 있으면 실행하는 코드
        }
      }

 - find() 특정 엘리먼트를 찾아준다.


[Event]

 - event를 등록하는데는 특정 이벤트에 해당되는 메서드를 사용하거나 on 메서드를 사용해서 등록하거나 할 수 있으며 on 메서드는 필요에 따라 여러 event를 한번에 등록 가능.

  ex) <input type="button" value="확인">

  $("input").on("click", function(event) {
      //클릭됐을 경우 실행할 문장
  });

  $("input").click(function(event) {
      //클릭됐을 경우 실행할 문장
  }); 

http://learn.jquery.com/events/event-basics/

1
2
3
4



// Event setup using a convenience method







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







    console.log( "You clicked a paragraph!" );







});
1
2
3
4



// Equivalent event setup using the `.on()` method







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







    console.log( "click" );







});

 <!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.reverse {
           background: black;
           color: white;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function() {
           $("h1").on({
                     click: function() {
                                console.log($(this).text());
                     },
                     mouseenter: function() {
                                $(this).addClass("reverse");
                     },
                     mouseleave: function() {
                                $(this).removeClass("reverse");
                     }
           });
});
</script>
</head>
<body>
<H1>event - 1</H1>
<H1>event - 2</H1>
<H1>event - 3</H1>
</body>
</html>


 - 이벤트 관련 메서드들이 많이 제공된다.
   . blur(), focus(), load(), click(), mousedown(), submit(), keydown(), ready()

 - 이벤트 제거 : off()
    이벤트를 한번만 실행 : one()



1
2
3
4
5
6
7



// Switching handlers using the `.one()` method







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







    console.log( "You just clicked this for the first time!" );







    $( this ).click(function() {







        console.log( "You have clicked this before!" );







    });







});


1
2



// Unbinding all click handlers on a selection







$( "p" ).off( "click" );
1
2
3
4
5
6
7
8
9
10
11
12
13



// Unbinding a particular click handler, using a reference to the function







var foo = function() {







    console.log( "foo" );







};







 







var bar = function() {







    console.log( "bar" );







};







 







$( "p" ).on( "click", foo ).on( "click", bar );







 







// foo will stay bound to the click event







$( "p" ).off( "click", bar );

시간:
라벨: , , ,

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)