제이쿼리 기본요점 정리

제1장. jQuery 개요1. core - jQuery( ) 함수jQuery의 핵심 개념은 jQuery( ) 함수이다. jQuery 의 모든 기능은 jQuery( ) 함수로 시작되고 끝난다고 보아도 무리가 없다. jQuery( )함수의 매개변수로 들어가는 형식에 따라 세 가지 정도로 나뉜다. -jQuery(selector) -jQuery( HTML코드) -jQuery(다른 함수)[방법①] jQuery( ) 함수의 매개변수로 selector가 들어가는 경우 예) jQuery(‘div’):모든 div 노드를 선택하여 jQuery객체로 만들어준다 jQuery(‘div p’):div 다음에 나오는 모든 p노드를 선택하여 jQuery객체로 만들어준다[방법②] jQuery( ) 함수의 매개변수로 HTML 코드가 들어가는 경우 예) jQuery(‘<div align=center>제목</div>’).appendTo(‘body’); <body>태그에 <div>태그를 추가한다.[방법③] jQuery( ) 함수의 매개변수로 다른 함수가 들어가는 경우 예) jQuery( function( )    {     confirm‎‎‎(“진행을 계속하시겠습니까?”)    } ) Confirm‎‎‎함수를 실행 2. jQuery(document).ready() jQuery(document).ready()의 코드는 jQuery를 사용하는 웹페이지라면 사용해야만 하는 기본코드이다.        <script>     jQuery(document).ready( function() {          실행코드…    } );    </script>  다음의 자바스크립트 코드와 같은 기능을 한다.    <script>    window.xxxxxxonload = function() {    ……..    } ;   </script> jQuery문법에서는 jQuery(document).ready()의 코드가 너무 길기 때문에 다음과 같은 축약형을 사용하고 있다.     jQuery(document).ready( function() {    코드    } );  jQuery( function() {   코드  } );  $( function() {  코드  } ); 따라서 가장 간단한 jQuery코드는 다음과 같다        <script>        $( function() {              ……         } );    </script>   3. jQuery의 기능 범주 Core : jQuery( )함수가 핵심 Selector : 조작을 원하는 HTML노드를 선택 Attributes / CSS : 선택한 노드의 속성값을 가져 오거나 변경 Manipulation : DOM에 대해 다양한 조작(생성,삭제,갱신 등) Traversing : DOM에 접근하여 원하는 노드를 찾는 방법을 제공 Events : 여러가지 이벤트에 의한 처리 Effects : fadein,fadeout,slideup,slidedown 등의 특수효과 Ajax : 서버와 비동기식으로 데이터를 교환하는 자바스크립트 프로그래밍 방식1) Core jQuery Object  jQuery(), jQuery.noConflict(), jQuery.sub(), jQuery.when() DOM Element Methods  .get(), .index(), .size(), toArray() Internals .jquery, .context, jQuery.error, .length, .pushStack(), .selector Deferred Object Callbacks Object[Call back 함수] 자바스크립트 문장은 라인 바이 라인으로 실행된다.  그런데, 효과에서는 코드의 다음 라인이 효과가 끝나지 않았음에도 실행될 수 있다. 이러한 경우 에러가 발생된다. 이런 에러를 발생시키지 않기 위해서  callback function을 사용할 수 있다.  callback function은 현재 효과가 다 끝난다음 실행된다. 문법  $(selector).hide(speed,callback);2) 선택자(selector) 웹 페이지 구조에서 접근하고자 하는 HTML 노드(즉, 태그)를 선택하고자 할때 사용하는 문법  선택자의 종류 Basics Hierarchy Basic Filters Content Filters Visibility Filters Attribute Child Filters Forms3) Attributes / CSS Attributes : .attr(), .prop(), .removeAttr(), .removeProp(), .val() CSS : .addClass(), .css(),  .hasClass(), .removeClass(), .toggleClass() Dimensions: .height(), .innerHeight(), .innerWidth(), .outerHeight(), .outerWidth(), .width() Offset : .offset(), .offsetParent(), .position(), .scrollLeft(), .scrollTop() Data : jQuery.data(), .data(), jQuery.hasData(), jQuery.removeData(), .removeData()4) Manipulation Copying DOM Insertion, Around DOM Insertion, Inside DOM Insertion, Outside DOM Removal DOM Replacement5) Traversing Filtering .eq(), .filter(), .first(), .has(), .is(), .last(), .map(), .not(), .slice() Miscellaneous Traversing .add(), .andSelf(), .contents(), .end() Tree Traversal .children(), .closest(), .find(), .next(), .nextAll(), .nextUntil(), .parent(), .parents(), .parentsUntil(), .prev(), .prevAl‎‎‎l(), .prevUntil(), .siblings()6) Events Browser Events Document Loading Event Handler Attachment Form Events Keyboard Events Mouse Events Event Object7) Effects Basics : .hide(), .show(), .toggle() Custom : .animate(), .clearQueue(), .delay(), .dequeue(), jQuery.dequeue(), jQuery.fx.interval, jQuery.fx.off, .queue(), jQuery.queue(), .stop() Fading : .fadeIn(), .fadeOut(), .fadeTo(), .fadeToggle() Sliding : .slideDown(), .slideToggle(), .slideUp() 제2장. 기본 선택자(Basics)1. 모든 태그( * )‘*’ selector는 HTML, <head>와 <body>등 문서의 모든 요소를 선택합니다. ‘*’ selector 가 다른 요소와 함께 사용되는 경우, 지정된 요소 내에 있는 모든 자식 요소를 함께 선택합니다. 문법 : $("*")  ‘*’ selector 를 사용할 경우 일부 브라우저에서 처리 할 때 무거워 질 수 있습니다.2. 아이디( #id )# ID 선택은 특정 ID를 가진 요소를 선택합니다. id는 HTML 요소의 id 속성을 나타냅니다. id 속성은 웹 문서 내에서 고유해야합니다. 문법 : $("#id") id 속성을 숫자로 시작하면 일부 브라우저에서 오동작을 유발할 수 있습니다.3. 클래스( .class ).class 는 특정 클래스를 가진 모든 요소를 선택합니다. .class 는 HTML 요소의 클래스 속성을 참조합니다. .class 속성은 여러 HTML 요소의 특정 스타일을 설정하는 데 사용되기도 합니다. .class 속성을 숫자로 시작하면 일부 브라우저에서 오동작을 유발할 수 있습니다. 문법 : $(".class")4. 여러 개의 클래스 ( .class,.class ). class selector는  여러 클래스를 선택하는 데 사용할 수 있습니다. 쉼표로 클래스를 분리한다. 문법 : $(".class1,.class2,.class3,...") .class 속성을 숫자로 시작하면 일부 브라우저에서 오동작을 유발할 수 있습니다.5. element특정 태그를 선택하고자 할 때 사용한다. 문법 :    $("element") 예) $(“p"),  $(“div"), $(“a")6. 다중 elementjQuery selector로 여러 개의 다중 element를 사용할 수 있다. 각 element의 구분은 쉼표로 한다. 문법 $("element1,element2,element3,...") 제3장.  계층 선택자 : Hierachy1. parent > child“parent > child”  코드는 바로 아래 자식 element를 설정하기 위한 selector이다. 즉 자손 element는 포함시키지 않느다는 것이다 문법 : ("parent > child") 예)  $("div > span"). $("div > p").2. parent descendantparent descendant는 특정 element 하위의 모든 자손 element 를 모두 선택한다. 모든 자손 element 란 바로 아래 노드, 그 아래 노드, 그 아래 아래의 노드를 모두 의미한다. 문법 : ("parent descendant") 예) $("div span")3. element + next("element + next") selector는 지정된 " element "의 다음에 따라오는 element 를 선택합니다. next element 는 다음에 배치되어야 합니다. 예를 들어, 바로 <div> element, 이 구문 이후 두 요소가있는 경우, $ ( "DIV + P")는  <div> element 의 다음 element (다른 element 가 무시됩니다) 때문에 만, 첫 번째 element 를 선택합니다 또 다른 예로, <div> element 뒤에 <H2> element 및 요소, 이 구문이있는 경우 ,$ ( "DIV + P")는 - <div> 요소의 다음 element 가 <H2> 요소이기 때문에, element 를 선택하지 않습니다 지정된 element 가 모두 같은 부모를 공유해야합니다. 문법 : ("element + next")4. element ~ siblings ("element ~ siblings") selector 구조는 특정 element의 다음에 나오는 모든 sibling 들을 선택한다. 예를 들어 $("div ~ p") 라는 코드는 <div> element 다음에 나오는 모든  sibling인 모든     element를 선택한다. 지정된 element 가 모두 같은 부모를 공유해야합니다. 문법 : ("element ~ siblings“) 제4장. jQuery 속성 선택자 : attribute1. [attribute][attribute] selector는 각 selector의 특정 속성을 선택한다. 문법 : $("[attribute]") 예) $("[href]"), $("[src]"), $("[size]")2. [attribute=value][attribute=value] selector는 특정 속성과 값을 가진(일치하는) 각  element를 선택한다. 문법 : $("[attribute=value]") 예) $("[id=id이름]")3. [attribute!=value][attribute!=value] selector 는 특정 속성과 값을 가지지 않는 selector를 설정한다. 즉, 선택된 값과 다른 값을 가지고 있는 selector가 선택이 된다. 문법 : $("[attribute!='value']") 예) $("p[class!=‘abc']")4. [attribute$=value][attribute$=value] selector는 특정 문자값으로 끝나는 selector를 선택한다. 문법 : $("[attribute$='value']") 예)  $("a[href$='.org']"), $(“img[src$=‘.jpg]")5. [attribute|=value][attribute|=value] selector 는 특정문자로 시작하는 속성과 속성 값을 설정한다. 문법 : $("[attribute|='value']") 예) $("a[hreflang|='en']") 6. [attribute^=value][attribute^=value] selector는 특정 속성이 특정 속성값으로 시작하는 값을  갖는 selector을 설정한다. 문법 : $("[attribute^='value']") 예) $("input[name^=‘fruit']"), $("input[name^=‘nut']") 예) $("a[hreflang|='en']")7. [attribute~=value][attribute~=value] selector는 특정 속성이 특정 값을 포함하는 selector를 설정한다. 문법 : $("[attribute~='value']") 예) $("input[name~='nation']"), $("input[name~=‘food']")8. [attribute*=value][attribute*=value] selector는 특정 속성이 특정 문자열을 포함하는 selector를 선택한다. 문법 : $("[attribute*='value']") 예) $("input[name*=‘abc']"), $("input[name*=‘fruit']") 제5장. jQuery 기본 필터 선택자 : Basic filters1. :animated:animated selector 는 현재 애니메이션의 모든 요소를 선택합니다. 문법 : $(":animated") 예) $(":animated")2. :eq(): EQ( )를 선택하여 특정 인덱스 번호를 가진 요소를 선택합니다. 인덱스 번호는 0부터 시작하므로 첫 번째 요소는 인덱스 번호는 0 (1이 아님)이다. 이것은 대부분의 그룹의 특정 인덱스 요소를 선택하기 위해 다른 selector와 함께 사용됩니다. 문법 : $(":eq(index)")3. :even :even selector는 짝수 인덱스 번호를 선택한다 인덱스 번호는 0부터 시작한다. 이 선택자는 혼자 사용되는 것보다는 다른 선택자와 함께 사용되어 짝수 인덱스 번호를 선택하는 역할을 한다. 문법    :even selector 예) $("tr:even")4. :odd:odd  selector는 홀수 인덱스 번호를 선택한다 인덱스 번호는 0부터 시작한다. 이 선택자는 혼자 사용되는 것보다는 다른 선택자와 함께 사용되어 홀수 인덱스 번호를 선택하는 역할을 한다. 문법    :odd selector 예) $("tr:odd")5. :gt( ) :gt( ) selector 는 주어진 인덱스보다 큰 숫자의 인덱스를 선택한다. 인덱스 번호는 0부터 시작합니다. 이것은 주로 그룹의 마지막 요소 을 선택하기 위해 다른 selector 와 함께 사용됩니다. 문법 $(":gt(index)") 예) $("tr:gt(3)")6. :header:header selector는 문서내의 모든 h태그를 선택합니다. 즉, <h1>에서 <h6>태그를 선택합니다. 문법 $(":header") 예) $(":header")7. :first:first selector는 첫번째 요소를 선택한다. 이 selector는 하나의 single element를 선택 가능하다. 반면에 :first-child selector는 같은 부모의 하나 이상의 요소를 선택가능하다. 문법   $(":first")  예) $("p:first")8. :last:last selector는 마지막 요소를 선택한다. 이 selector는 하나의 single element를 선택 가능하다. 반면에 :last-child selector는 같은 부모의 하나 이상의 요소를 선택가능하다. 문법 $(":last") 예) $("p:last")9. :lt():lt() selector는 특정한 인덱스번호 미만의 요소를 선택한다. 인덱스 번호는 0부터 시작합니다. 이것은 주로 그룹의 첫번째 요소 을 선택하기 위해 다른 selector 와 함께 사용됩니다. 문법 $(":lt(index)") 예) $("tr:lt(4)")10. :not():not() selector는 한정된 element를 제외한 모든 element를 선택한다. 이 선택자는 그룹에서 한정된 요소를 제외한 모든 element를 선택할때 사용한다. 문법 $(":not(selector)") 예) $("p:not(.cls)") 제6장. jQuery 내용, Visibility 필터 선택자 : Content, Visibility  filters1. :contains( ):contains(string) selector는 특정 문자열을 포함하고 있는 요소를 선택한다. string은 곧바로 문자열을 포함할 수도 있고, child element안에 포함 할 수도 있다. 이 선택자는 그룹안에서 특정 텍스트를 포함하는 요소를 선택하고자 하는 다른 요소들과 흔히 같이 사용된다. String은 대소문자를 구별한다. 문법 $(":contains(text)") 예) $("p:contains(is)")2. :empty:empty selector 는  empty element를 선택한다.  empty element는 child elements 또는 text가 없는 element (요소)를 의미한다. 문법 $(":empty") 예) $(":empty")3. :has( ):has( ) selector는 지정된 셀렉터에 일치하는 내부의 하나 이상의 요소를 모든 element를 선택한다. 내부에 여러 element 를 선택하려면, 쉼표를 사용한다. 문법  $(":has(selector)") 예) $("p:has(span)")4. :parent:parent selector는 텍스트를 포함하는 있는 element의 parent element를 선택한다. 문법 $(":parent")5. :hidden:hidden selector는 hidden element를 선택한다. 다음과 같은 것들이 Hidden elements이다 display:none 설정 Form태그의 type속성이 hidden으로 됨 너비와 높이가 0으로 설정  parent element의 속성이 hidden 문법 $(":hidden") 예) $(":hidden").show(); 예) $("td:parent")6. :visible:visible selector 는 현재 보이는 모든 element를 선택한다.  Visible element는 Hidden element와 정반대의  개념이다, 즉 다음과 같은 것들을 만족하지 말아야한다. display:none  설정  Form태그의 type속성이 hidden으로 됨 너비와 높이가 0으로 설정  parent element의 속성이 hidden 문법    $(":visible") 예) $("p:visible") 제7장.  jQuery 자식 필터 선택자 : Child filters1. :first-child:first-child selector는 모든 부모 element의 첫번째 child element를 선택한다. 문법  $(":first-child") 예) $("p:first-child")2. :last-child:last-child selector는 모든 부모 element의 마지막 child element를 선택한다. 문법  $(":last-child") 예) $(“div:last-child")3. :nth-child( ):nth-child(n) selector 는 타입이나 부모에 상관없이 모든 element의 n번째 child를 선택한다. 문법 :nth-child(n|even|odd|formula) n : 각 child의 번호 even : 짝수번째 child odd : 홀수번째 child Fomula : 수식이 올 수 있다.4. :only-child:only-child selector는 각 element의 자식이 하나 있는 element를 선택한다. 문법 $(":only-child") 예) $("p:only-child")예) $("p:nth-child(3)") 제8장.  jQuery 폼 필터 _ 선택자1 : Form filters1. :input:input selector는 form element를 선택한다. :input selector는 button element도 선택한다. 문법 $(":input") 예) $(":input")2. :text:text selector 는 <input type=text>인 속성의 <input>태그를 선택한다. 문법 $(":text") 예) $(":text")3. :password:password selector 는 <input type= password >인 속성의 <input>태그를 선택한다. 문법 $(" :password ") 예) $(" :password ")4. :radio  : radio selector 는 <input type= radio >인 속성의 <input>태그를 선택한다. 문법 $(" : radio ") 예) $(" : radio ")5. :checkbox: checkbox selector 는 <input type= checkbox >인 속성의 <input>태그를 선택한다. 문법 $(" : checkbox ") 예) $(" : checkbox ")6. :submit : submit selector 는 <input type= submit >인 속성의 <input>태그를 선택한다. 버튼 요소에 타입을 정의하지 않으면 대부분의 브라우저는 type=submit으로 처리한다. 문법 $(" : submit ") 예) $(" : submit ")7. :reset: reset selector 는 <input type= reset>인 속성의 <input>태그를 선택한다. 문법 $(" : reset ") 예) $(" : reset ")8. :button: button selector 는 <input type= button>인 속성의 <input>태그를 선택한다. 문법 $(" : button ") 예) $(" : button ") 제9장. jQuery 폼 필터 _ 선택자2 : Form filters1. :image  : image  selector 는 <input type= image>인 속성의 <input>태그를 선택한다. 문법 $(": image ") 예) $(": image ")2. :file  : file  selector 는 <input type= file >인 속성의 <input>태그를 선택한다. 문법 $(": file ")3. :enabled:enabled selector 는 사용 가능한 모든 form 요소를 선택한다. 문법 $(":enabled") 예) $(":enabled")4. :disabled:disabled selector 는 사용 불가능한 모든 form 요소를 선택한다. 문법 $(":disabled") 예) $(":disabled")5. :selected:selected selector는 미리 선택하는 옵션 요소를 선택한다. 이 선택은 체크 박스 또는 라디오 버튼에 작동하지 않습니다. 그대신에 :checked selector를 사용한다. 문법 $(":selected") 예) $(":selected")6. :checked:checked selector는 모든 checked 된 checkboxes 또는  radio buttons을 선택한다. 문법 $(":checked") 예) $(":checked") 제10장. jQuery: Attributes1. .attr().attr() method 는 선택된 요소의 값 또는 속성을 을 설정하거나 반환  .attr() method 는 반환 속성 값을, 그 첫 번째 일치하는 요소의 값을 반환합니다. .attr() method 는 설정 한 속성 값을, 그것은 일치하는 요소의 집합에 대해 하나 이상의 속성 / 값 쌍을 설정합니다. 예) $("button").click(function(){   $("img").attr("width","500"); });[문법] 1) attribute의 값을 Return  $(selector).attr(attribute) 2) attribute의 값을 설정 $(selector).attr(attribute,value) 3) function을 사용하여 값을 설정 $(selector).attr(attribute,function(index,currentvalue)) 4) 다중 attributes와 값을 설정 $(selector).attr({attribute:value, attribute:value,...})2. .prop()prop() method는 선택된 요소의 값이나 속성을 설정하거나 반환한다.  prop() method가 선택된 속성 값을 반환할 때는 , 그 첫 번째 일치하는 요소의 값을 반환합니다. prop() method가 속성 값을 설정할 때는, 일치하는 요소의 집합에 대해 하나 이상의 속성 / 값 쌍을 설정합니다. HTML attributes 검색하려면 attr() method를 사용하고, 속성을 제거하려면 removeProp () 메서드를 사용한다. [문법] prop() method는 선택된 요소의 값이나 속성을 설정하거나 반환한다.  prop() method가 선택된 속성 값을 반환할 때는 , 그 첫 번째 일치하는 요소의 값을 반환합니다. prop() method가 속성 값을 설정할 때는, 일치하는 요소의 집합에 대해 하나 이상의 속성 / 값 쌍을 설정합니다. HTML attributes 검색하려면 attr() method를 사용하고, 속성을 제거하려면 removeProp () 메서드를 사용한다.[문법] 1) 속성의 값을 return할 때 $(selector).prop(property) 2) Property과 value을 설정할 때 $(selector).prop(property,value) 3) function을 사용하여 값을 설정 $(selector).prop(property,function(index,currentvalue)) 4) 다중 attributes와 값을 설정 $(selector).prop({property:value, property:value,...})3. .removeAttr()removeAttr() method는 선택된 element의 하나이상의 속성들을 삭제한다. 문법 $(selector).removeAttr(attribute) 예 $("button").click(function(){  $("p").removeAttr("style");});)4. .removeProp()removeProp() method는 prop() method에 의해 설정된 속성을 제거합니다. HTML attributes를 제거할 때는 사용 못하고 이때는 removeAttr() method를 사용합니다. 문법 $(selector).removeProp(property) 예) $("button").click(function(){ $x.removeProp("color"); });5. .val().val() 메서드는 선택된 element의 value나  속성을 설정합니다. 값을 반환하는 데 사용하는 경우 : 첫 번째 일치하는 요소의 value 속성의 값을 반환합니다. 값을 설정하는 데 사용하는 경우 : 모든 일치하는 요소의 value 속성의 값을 설정합니다.[문법] value attribute을 리턴할 때 $(selector).val() value attribute을 설정할 때 $(selector).val(value) function을 사용하여 attribute을 설정할때$(selector).val(function(index,currentvalue)) .val() 메소드는 대부분 HTML form element와 함께 사용됩니다. 제11장. jQuery: CSS1. .addClass(). AddClass () 메서드는 선택된 element에 하나 이상의 클래스 이름을 추가합니다. 이 방법은 기존의 클래스 속성을 제거하지 않습니다, 그것은 단지 클래스 속성에 하나 이상의 클래스 이름을 추가합니다. 하나 이상의 클래스를 나열하려면 공백으로 클래스 이름을 구분합니다. 문법 $(selector).addClass(classname,function(index,oldclass)) 예)  $("button").click(function(){ $("p:first").addClass("intro");});2. .css()css() method는 선택된 elements의 스타일 속성을 설정하거나 반환 한다. 속성을 반환하는 데 사용하는 경우 : css() method는 첫 번째 일치하는 요소의 지정된 CSS 속성 값을 반환합니다.  "background" and "border" 같은 속성을 완벽하게 지원하지 않는 다른 브라우저에서 서로 다른 결과를 얻을 수 있습니다 속성을 설정하는 데 사용하는 경우 : 이 방법은 모든 일치하는 요소에 대해 지정된 CSS 속성을 설정합니다.3.  .hasClass()hasClass() method는 어떤 특정한 element가 특정 class를 가지고 있는지를 체크합니다. 만약 특정 class를 가지고 있다면 hasClass() method는 true 값을 반환합니다. 문법 $(selector).hasClass(classname) 예)  $("button").click(function(){ alert(‎‎‎$("p").hasClass("intro"));});4. .removeClass()removeClass() method는 선택된 element의 class를 삭제한다. 이때 만약 특정 클래스 이름을 한정하지않으면, 선택된 요소의 모든 클래스 이름을 제거합니다. 문법 $(selector).removeClass(classname,function(index,currentclass)) 예) $("button").click(function(){ $("p").removeClass("intro");});5. .toggleClass()toggleClass() method는 선택한 요소에서 하나 이상의 클래스 이름을 추가하거나 제거 하는 동작을 toggle합니다. 이 메서드는 지정된 클래스 이름에 대한 각 요소를 확인합니다. 클래스 이름이 누락 된 경우 추가되며, 이미 설정되어있는 경우 제거 하는 전환 효과를 만듭니다. "switch" parameter를 사용하여, 제거하도록 지정할 수 있습니다 또는 클래스 이름도 할수 있습니다. 제12장. jQuery:Dimensions1. .height()와 .width()width() method는 요소의 폭 (패딩, 테두리, 또는 여백을 포함하지 않습니다)을 설정하거나 반환합니다.  height() method 는 요소의 높이 (패딩, 테두리, 또는 여백을 포함하지 않습니다)를 설정하거나 반환합니다. <div> 요소의 width/height을 반환하는 예제 $("button").click(function(){   var txt="";   txt+="Width: " + $("#div1").width() + "";   txt+="Height: " + $("#div1").height();   $("#div1").html(txt); });2.  .innerWidth()와 .innerHeight()innerWidth() method는 Padding을 포함한 너비를 반환합니다. innerHeight() method는 Padding을 포함한 높이를 반환합니다. <div> element의  inner-width/height 를 구하는 예제 $("button").click(function(){ var txt="";  txt+="Inner width: " + $("#div1").innerWidth() + "";  txt+="Inner height: " + $("#div1").innerHeight();  $("#div1").html(txt);});3.  .outerWidth()와 .outerHeight()outerWidth() method는 padding and border를 포함한 너비를 반환합니다. outerHeight() method는 padding and border를 포함한 높이를 반환합니다. 다음 예제는 <div> element의  outer-width와 outer-height를 구해줍니다. $("button").click(function(){  var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + ""; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt);});4. .outerWidth(true)와 .outerHeight(true).outerWidth(true)메소드는  padding, border, margin을 포함한 너비를 반환합니다. .outerHeight(true)메소드는  padding, border, margin을 포함한 높이를 반환합니다. 예제 $("button").click(function(){ var txt="";  txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "";  txt+="Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt);}); 제13장. jQuery: Offset1. .offset()offset() method는 선택된 요소의 문서에 대한 상대적인 오프셋 좌표를 반환합니다. 오프셋을 반환하는 데 사용하는 경우 : offset() method는 첫 번째 일치하는 요소의 오프셋 좌표를 반환합니다. 그것은 2개 속성(top 및 left 속성 값 )을 가진 객체를 반환합니다. 오프셋 (offset)을 설정하는데 사용하는 경우 :  이 방법은 모든 일치하는 요소의 오프셋 좌표를 설정합니다.[문법] offset coordinates 리턴할 때 $(selector).offset() offset coordinates 설정 할 때 $(selector).offset({top:value,left:value}) Function을 사용하여 offset coordinates설정할 때 $(selector).offset(function(index,currentoffset))2. .offsetParent()offsetParent() method는 첫번째 위치된 parent element를 반환합니다. element 는 jQuery와 배치될수 있고, CSS의 position 속성 (상대, 절대 또는 고정)과 배치 될 수 있습니다. 문법 $(selector).offsetParent() 예) $("button").click(function(){  $("p").offsetParent().css("background-color","red");});3. .position()position() method는 첫번째 일치되는 element의 위치를 반환합니다. position() method 는 top으로부터의 좌표와 왼쪽으로부터의 좌표, 두 개의 속성 값을 반환합니다. 문법 $(selector).position() 예)  $("button").click(function(){  x=$("p").position();  alert(‎‎‎"Top: " + x.top + " Left: " + x.left);});  4. .scrollLeft()scrollLeft() method는 선택된 요소의 가로 스크롤 위치를 설정하거나 반환합니다. 스크롤바가 맨 왼쪽에있을 때, 위치는 0입니다. 위치를 반환하는 데 사용하는 경우 : scrollLeft() method는 첫 번째 일치하는 요소의 스크롤 막대의 가로 위치를 반환합니다. 위치를 설정하는 데 사용하는 경우 : scrollLeft() method는 일치하는 모든 요소에 대한 스크롤 막대의 가로 위치를 설정합니다.[문 법] 수평 scrollbar position을 반환할 때 $(selector).scrollLeft() 수평 scrollbar position을 설정할 때 $(selector).scrollLeft(position) 예) $("button").click(function(){   alert(‎‎‎$("div").scrollLeft());});5. .scrollTop()scrollTop() method는 선택된 요소의 세로 스크롤 위치를 설정하거나 반환합니다. 스크롤바가 맨 위에있을 때, 위치는 0입니다. 위치를 반환하는 데 사용하는 경우 : scrollTop() method는 첫 번째 일치하는 요소의 스크롤 막대의 세로 위치를 반환합니다. 위치를 설정하는 데 사용하는 경우 : scrollTop() method는 일치하는 모든 요소에 대한 스크롤 막대의 세로 위치를 설정합니다. 제14장. jQuery DOM 조작1 : Get, Set1. Get Content – text(), html(), and val()jQuery를 - 콘텐츠 및 속성 정보: JQuery와 HTML 요소와 속성을 변경하고 조작하기위한 강력한 메서드가 포함되어 있습니다. jQuery를 DOM 조작: jQuery를 중 하나의 매우 중요한 부분은 DOM을 조작 할 수 있습니다. Jquery의 element와 특성을 액세스하고 조작하기 쉽게 DOM 관련 메소드의 묶음으로 함께 제공됩니다.DOM 조작을 위한 간편하고도 효율적인 메소드들이다. text() - 선택된 요소의 텍스트 내용 설정하거나 반환  html() - (HTML 태그를 포함) 선택된 요소의 내용을 설정하거나 반환 val() - 폼 필드의 값을 설정하거나 반환2. Get Attributes - attr()jQuery attr() method는 속성값을 가져오는데 사용된다. 예) href attribute속성을 가져오는 예제 $("button").click(function(){  alert(‎‎‎$("#abc").attr("href"));});3. Set Content - text(), html(), and  val() text()- 선택된 요소의 텍스트 내용을 설정하거나 반환 한다. html() - (HTML 태그를 포함) 선택된 요소의 내용을 설정하거나 반환 한다. val()- form 필드의 값을 설정하거나 반환4. Callback Function for text(), html(), and val()앞의 세 가지 text(), html(), val()메소드는 모두  jQuery Callback 함수와 함께 사용가능합니다 callback function은 두 개의 매개 변수가 있습니다.  그것은 선택된 현재 element 의  index 와 원래 값입니다   다음 예제에서는 콜백 함수와 텍스트 ()와 HTML ()를 보여줍니다 :5. Set Attributes - attr()jQuery attr() method는 attribute values를 설정하거나, 변화시키는데 사용한다. 예) $("button").click(function(){  $("#abc").attr("href","<a href="http://www.korea.com/jquery" target="_blank">http://www.korea.com/jquery</a>");}); 제15장. jQuery DOM 조작2: Add, Removeappend() Method -선택한 element의 끝에서 내용을 삽입 prepend() Method - 선택된 element의 시작 부분에  내용을 삽입 after() Method- 선택한 element를 후에 내용을 삽입 before() Methods- 선택된 element전에 내용을 삽입1. append() Methodappend() Method -선택한 element의 끝에서 내용을 삽입 예) $("p").append("Some appended text.");2. prepend() Methodprepend() Method - 선택된 element의 시작 부분에  내용을 삽입 예) $("p").prepend("Some prepended text.");append() Method와 prepend() Method로 몇가지 새로운 element를 만들 수 있다.  새로운 element는 text/HTML, jQuery, and JavaScript/DOM로 만들 수 있다.3. after() and before() Methodsafter() Method- 선택한 element를 후에 내용을 삽입한다. before() Methods- 선택된 element전에 내용을 삽입한다. 예) $("img").after("Some text after");$("img").before("Some text before");after() and before() methode 들은 무한정 새로운 element를 취할 수 있다.  새로운 element는 text/HTML, with jQuery, 또는 JavaScript code 와 DOM elements로 생성될 수 있다.4. remove() MethodjQuery remove() method는 선택된 element와 그것의 child를 삭제한다. 예) $("#div1").remove();5. empty() MethodjQuery empty() method는 선택된 element의  모든  child elements를 삭제한다. 예) $("#div1").empty();제거 할 요소를 필터링하기  jQuery remove() method는 또한 제거 할 요소를 필터링 할 수 있습니다. 하나의 매개 변수를 받아들입니다. 매개 변수는 jQuery를 선택 구문 중 하나가 될 수 있습니다. 다음 예제에서는 class="italic“인 모든     elements 를 제거합니다   제16장. jQuery의 이벤트 : browser event, Document Loading1. .error().error() method 는  jQuery를 버전 1.8에서 deprecated된 속성입니다. error event 는 오류발생시에 발생하는 오류 이벤트입니다.  error() method 는 오류 이벤트를 트리거 하거나 오류 이벤트가 발생할 때 실행할 함수를 연결합니다. 문법 Trigger the error event for the selected elements: $(selector).error() Try it Attach a function to the error event: $(selector).error(function)2. .resize()resize event 는 브라우저 창의 크기가 바뀔때 발생한다.  resize() method는 resize event를 트리거하고, resize event가 발생했을 때 처리할 함수를 첨부한다. 문법 resize event를 Trigger 할 때 $(selector).resize() Try it 처리할 함수를 첨부할 때$(selector).resize(function)3. .scroll()scroll event는 스크롤했을 때 발생한다. scroll event는 스크롤 요소와 윈도우 객체 (브라우저 창)에 대해 작동합니다. scroll() 메서드는 스크롤 이벤트를 트리거하거나, scroll 이벤트가 발생할 때 실행할 함수를 연결합니다. 문법 선택된 요소의 스크롤 이벤트를 트리거 할때 $(selector).scroll() Try it scroll 이벤트에 함수를 연결 할때 $(selector).scroll(function)4. .ready()ready event 는 DOM (문서 개체 모델)이 로드되었을 때 발생하며 페이지가 완전히 (이미지를 포함한 )로드되었을 때 발생한다. 문서가 준비 이후 이벤트가 발생하기 때문에, 다른 모든 jQuery를 이벤트와 기능을 가지고 있는 좋은 장소입니다.  ready() 메소드는 ready 이벤트가 발생했을 때 어떤 일이 발생을 지정합니다. ready() 메소드는 <body의 xxxxxxonload="">와 함께 사용할 수 없습니다.5. .load()load() method는 jQuery version 1.8. 버전에서 사용을 비권장받았습니다. load() method는  load event에  이벤트 핸들러를 첨부합니다. load event는 특정 element가 로드될때 발생합니다. 이 이벤트는 URL (이미지, 스크립트, 프레임, iframe 대응)과 관련된 element, 그리고 윈도우 객체와 함께 작동합니다. 파이어 폭스와 IE 처럼 이미지가 캐시 된 경우 브라우저에 따라로드 이벤트는 트리거되지 않을 수 있습니다. 문법 $(selector).load(function)6. .unload()unload() method는  jQuery version 1.8.버전에서 비권장 되었습니다/ 사용자가 다른 페이지로 이동할 때 unload 이벤트가 발생합니다. 다음의 경우 unload 이벤트가 트리거됩니다  페이지를 떠날 링크 클릭한 경우 새로운 URL이 주소 표시 줄에 입력된 경우 앞으로 또는 뒤로 버튼이 사용될 때 브라우저 창이 닫힐 때 페이지가 다시 로드되는 경우 unload() method는 이벤트가 발생 언로드 할 때 수행되는 작업을 지정합니다 unload() method는  window 개체에 사용되어야한다. 문법  $(selector).unload(function) 제17장. jQuery의 이벤트 : Event handerler Attachment11. bind()bind() method는 선택된 element에 대해 하나 이상의 이벤트 핸들러를 첨부하고, 이벤트가 발생할 때 함수를 한정한다. jQuery version 1.7에서는 오히려 on()함수가 더 많이 권장된다. 문법 $(selector).bind(event,data,function,map)2. delegate()delegate() method는 지정된 요소와 선택된 요소의 자식에 대해 하나 이상의 이벤트 처리기를 연결하고 이벤트가 발생할 때 실행할 함수를 지정합니다. delegate() method를 사용하여 연결된 이벤트 핸들러는 현재와 미래의 요소 (스크립트에 의해 생성 된 새로운 요소 등)에 대해 작동합니다. jQuery를 버전 1.7에서는 선택한 요소에 대한 이벤트 처리기를 연결하기위한 on() method  방법을 선호한다. 문법  $(selector).delegate(childSelector,event,data,function)3. die()die() method는 jQuery version 1.7에서 비권장되었고, in version 1.9 에서는 삭제 되어다. 대신에 off() method 를 사용한다. die() method는 선택된 요소에 대해 하나이상의 event handlers를 제거합니다. 문법 $(selector).die(event,function)4. live()live() method는 jQuery를 버전 1.7버전에서 비권장되었으며  버전 1.9에서 삭제되었습니다. 대신에 on()메소드를 사용합니다. live() method는 선택한 요소에 하나 이상의 이벤트 처리기를 연결하고 이벤트가 발생할 때 실행할 함수를 지정합니다. 이벤트 핸들러는 메소드가 선택기 (스크립트에 의해 생성 된 새로운 요소 등)과 일치하는 현재와 미래의 요소에 대해서도 작용합니다 이벤트 핸들러를 제거하려면 die()메서드를사용. 예)  $("button").live("click",function(){  $("p").slideToggle();});5. off()off() method는 on() method 와연결된 이벤트 처리기를 제거하는 데 사용됩니다. jQuery version 1.7에서는  the off() method는  unbind(), die() 와 undelegate()를 대체하게됩니다. 이 메소드는 API에 일관성 많이 제공합니다,  jQuery를 코드베이스를 단순화로 이 방법을 사용하는 것을 권장합니다.  단순히 한 번만 실행하고 제거하는 이벤트를 연결하려면, one() 메서드를 사용 예) $("button").click(function(){  $("p").off("click");});6. on()on() method는 선택된 요소와 자식 요소에 대해 하나 이상의 이벤트 처리기를 연결합니다. jQuery version 1.7에서 on() method는  bind(), live() , delegate() method를 새롭게 대체했습니다. 이 메소드는 API에 일관성 많이 제공합니다, 그것은 jQuery를 코드베이스를 단순화하므로 이메소드사용을 권장합니다. on() method를 사용하여 연결된 이벤트 핸들러는 현재와 미래의 요소 (스크립트에 의해 생성 된 새로운 요소 등)에 대해 서도 작동합니다.  이벤트 핸들러를 제거하려면 사용 off()메서드를 사용 단순히 한 번만 실행하고 제거하는 이벤트를 연결하려면, one() 메서드를 사용 제18장. jQuery의 이벤트 : Event handerler Attachment21. one()one() method는 선택된 요소에 하나 이상의 이벤트 처리기를 연결하고 이벤트가 발생할 때 실행할 함수를 지정합니다. one() method를 사용하면 이벤트 핸들러 함수는 각 요소에 대해 오직 한 번 만 실행이 가능합니다. 문법 $(selector).one(event,data,function) 예) $("p").one("click",function(){  $(this).animate({fontSize:"+=6px"});});2. trigger()trigger() method  는 지정된 이벤트와 선택된 요소에 대한 이벤트 (양식 제출 등)의 기본 동작을 트리거합니다. 이 방법은 triggerHandler() method와 비슷합니다  즉, 이벤트의 기본 비헤이비어를 트리거하지 않는다는 점을 제외 하고는  비슷합니다.3. triggerHandler()riggerHandler ()는 선택한 요소에 대해 지정된 이벤트를 트리거합니다. 이 방법은 trigger() method와 비슷하다. trigger() method 가 이벤트 (양식 제출 등)의 기본 동작을 트리거한다는 점을 제외하고는 비슷하다. 문법 $(selector).triggerHandler(event,param1,param2,...) 예) $("button").click(function(){  $("input").triggerHandler("select");});4. unbind()unbind() method는 선택된 요소의 모든 이벤트 핸들러를 제거합니다. 이 방법은 모든 또는 선택된 이벤트 처리기를 제거하거나 이벤트가 발생할 때 실행되는 특정 기능을 중지 할 수 있습니다. 이 방법은 이벤트 객체를 사용하여 이벤트 처리기를 바인딩을 해제 할 수 있습니다. 이 자체 내에서 이벤트 (이벤트가 특정 횟수를 트리거 한 후 이벤트 처리기를 제거 같은) 바인딩을 해제하는 데 사용됩니다. 매개 변수가 지정되지 않으면 unbind() method는 지정된 요소에서 모든 이벤트 처리기를 제거합니다. unbind() method 는 jQuery를 함께 첨부 된 이벤트 처리기에서 작동합니다. jQuery를 버전 1.7에서는 on() method 와 off() method 요소에 이벤트 핸들러를 붙이고 제거하는 메소드로 선호되었습니다. 문법 $(selector).unbind(event,function,eventObj)5. undelegate()undelegate() method는 delegate() method로 추가된 하나 이상의 이벤트 핸들러를 삭제합니다. jQuery version 1.7에서는 on()method 와  off() methods event handler를 attach 하고삭제하는데 더 선호되었습니다. 문법 $(selector).undelegate(selector,event,function) 예 $("body").undelegate(); 제19장. jQuery의 이벤트 : Form Event1. .blur()blur event는 element가 포커스를 잃을 때 발생합니다. blur() 메소드는 blur event를 트리거하거나 블러 이벤트가 발생할 때 실행되는 함수를 첨부합니다. 이 방법은 종종 함께 focus() 메서드와 함께 사용됩니다. 문법 blur event 를 트리거할 때 : $(selector).blur() Try it blur event에 function 을 첨부할 때 $(selector).blur(function) 예  $("input").blur(function(){  alert(‎‎‎"This input field has lost its focus.");});2. .change()change event 는 element의 값이 변경 될 때 만  발생합니다.      (오직 form fields에서만 작동) change() method 는 change 이벤트를 트리거하거나, change 이벤트가 발생할 때 실행할 함수를 연결합니다. select menus에서는 option태그의 내용이 선택이 되었을때 발생하며  change 이벤트가 발생합니다. text fields 나 text areas에서는  필드가 포커스를 잃을 때 change 이벤트가 발생합니다. 문법 change event Trigger 할 때  $(selector).change() Try it change event 에 function 을 첨부할 때 $(selector).change(function) Try it3. .focus()focus event는 mouse click 이나 tab-navigating에 의한 동작에 의해 element가 포커스를  얻었을  때 발생합니다. focus() method는 focus event를  trigger합니다. focus event가 발생할 때 수행할 함수를 실행합니다. focus() method는 종종 blur()메서드와 함께 사용됩니다. 문법 focus event 를 트리거할 때 : $(selector).focus() Try it focus event 에 function 을 첨부할 때: $(selector).focus(function)4. .select()select event는 text area 또는 text field의 텍스트가 선택되었을 때 발생한다. select() method는 select 이벤트를 트리거하거나, select 이벤트가 발생할 때 실행할 함수를 연결합니다. 문법 select event Trigger할 때 : $(selector).select() Try it select event에 function 을 첨부할 때 : $(selector).select(function)  예) $("input").select(function(){  alert(‎‎‎"Text marked!");});5. .submit()submit event는 form이 전송될 때 발생한다. submit event는 <form> element에 대해서만 사용될 수 있다. submit() method는 submit event를 트리거하고, submit event가 발생할 때 실행할 함수를 첨부한다. 문법 submit event 를 Trigger 할 때: $(selector).submit() Try it submit event 에 function 을 첨부할 때:  $(selector).submit(function) 예) $("form").submit(function(){  alert(‎‎‎"Submitted");}); 제20장. jQuery의 이벤트 : Keyboard Event1 .keydown()KeyDown 이벤트와 관련된 이벤트의 순서 : keydown – 키가 눌리는 도중을 의미 keypress – 키가 눌린 상태 keyup – 키가 눌렸다가 떼어지는 상태 키보드의 키를 눌렀을 때 KeyDown 이벤트가 발생합니다. keydown() method 는 keydown event를  트리거하거나, KeyDown 이벤트가 발생할 때 실행할 함수를 연결합니다.[문법] keydown event 를 트리거할 때 :  $(selector).keydown() Try it keydown event 에 function 을 첨부할 때 : $(selector).keydown(function)예) $("input").keydown(function(){  $("input").css("background-color","yellow");});2. .keypress()keypress() method는 keypress event를 트리거하거나, 키 누르기 이벤트가 발생할 때 실행할 함수를 연결합니다. keypress event는 KeyDown event 와 유사합니다. 버튼을 눌렀을 때 이벤트가 발생합니다. 그러나 keypress event는 모든 키 (예 : ALT, CTRL, SHIFT, ESC)에 대해 동작되지 않습니다.  이러한 키를 확인하려면 KeyDown() 메서드를 사용합니다.[문법] keypress event 트리거 할 때: $(selector).keypress() Try it keypress event 에 function 을 첨부할 때 : $(selector).keypress(function) 예) $("input").keypress(function(){  $("span").text(i+=1);});3. .keyup()키보드의 키를 놓을 때 KeyUp 이벤트가 발생합니다. keyup() method 는 keyup event를 트리거하거나  또는 KeyUp 이벤트가 발생할 때 실행할 함수를 연결합니다. event.which property 를 이용해 어떤 키가 눌렀는지 확인합니다.[문법] keyup event 트리거할 때: $(selector).keyup() Try it keyup event 에 function 을 첨부할 때 : $(selector).keyup(function) 예) $("input").keyup(function(){  $("input").css("background-color","pink");}); 제21장 jQuery의 이벤트 : Mouse Event11. .click()click event 는 element 가 click될 때 발생합니다. click() method는 클릭 이벤트를 트리거하거나, 클릭 이벤트가 발생할 때 실행할 함수를 연결합니다. 문법 click event 를 트리거 할 때: $(selector).click() Try it click event 에 function 을 첨부할 때 : $(selector).click(function) 예) $("p").click(function(){  alert(‎‎‎"The paragraph was clicked.");});2. .dblclick()dblclick event는 element를 더블 클릭하면 발생합니다. dblclick() method는 dblclick event를 트리거하거나, dblclick 이벤트가 발생할 때 실행할 함수를 연결합니다. dblclick 이벤트는 또한  Click 이벤트를 생성합니다. 두 이벤트가 동일한 요소에 적용하는 경우이 문제가 발생할 수 있습니다. 문법 dblclick event 트리거할 때: $(selector).dblclick() Try it dblclick event 에 function 을 첨부할 때 : $(selector).dblclick(function)3. .focusin()focusin event는 요소 (또는 내부 요소) 포커스를받을 때하는 발생합니다. focusin() method는 포커스 이벤트가 요소 또는 그 내부 요소에서 발생할 때 실행할 함수를 연결합니다. focus() method와는 달리 focusin() method 는 child가 포커스를 받을 때도 트리거합니다. 마우스 클릭하거나  "탭으로 이동"으로 선택하면 element가 포커스를 얻게 됩니다. focusin() method는 종종 focusout() method와 함께 사용됩니다.  문법 $(selector).focusin(function)4. .focusout()focusout event는 요소 (또는 내부 요소) 포커스를 잃을 때 발생합니다. focusout() method가 element  또는 그 내부 element 에서 발생할 때 실행할 함수를 연결합니다. blur() method와는 달리 focusout() method 는 element  또는 그 내부 element 에 대해서도 트리거 합니다. focusout() method는 종종 focusin() method와 함께 사용합니다. 문법 $(selector).focusout(function)5. .hover()hover() method는 선택된 요소 위에 마우스 포인터를 가져 가면 두 가지 기능을 지정합니다. hover() method mouseenter 및 mouseleave의 이벤트를 트리거 합니다. 즉, 하나의 함수가 지정되면, 그것은 MouseEnter 및 mouseleave 이벤트를 모두 실행됩니다. 문법 $(selector).hover(inFunction,outFunction)6. .mousedown()mousedown event는 마우스가 아래로 눌렸을때 발생하는 이벤트입니다. mousedown() method는 mousedown event를  트리거하거나, mousedown 이벤트가 발생할 때 실행할 함수를 연결합니다. mousedown() method 는 mouseup() method와 종종 함께 사용됩니다. 문법 mousedown event를 트리거할 때: $(selector).mousedown() Try it mousedown event에 function 을 첨부할 때 : $(selector).mousedown(function)7. .mouseenter()mouseenter event는 마우스포인터가 요소를 선택 즉, 위에있을 때 발생합니다. mouseenter() method는 MouseEnter 이벤트를 트리거하거나, MouseEnter 이벤트가 발생할 때 실행할 함수를 연결합니다 . mouseover event와는 달리 MouseEnter 이벤트는 선택된 element 뿐만 아니라 모든 자식 요소에 대해서도 트리거합니다.  mouseenter event는 종종 mouseleave 이벤트와 함께 사용됩니다.[문법] mouseenter event 를 트리거 할 때: $(selector).mouseenter() Try it mouseenter event 에 function 을 첨부할 때 : $(selector).mouseenter(function) Try it 예) $("p").mouseenter(function(){  $("p").css("background-color","yellow");}); 제22장 jQuery의 이벤트 : Mouse Event21. .mouseleave()mouseleave event 는 마우스 포인터가 선택한 요소에서 벗어날 때 발생합니다. mouseleave() method는 mouseleave 이벤트를 트리거하거나, mouseleave 이벤트가 발생할 때 실행할 함수를 연결합니다. mouseout event와는 달리 mouseleave 이벤트는 마우스 포인터가 선택한 요소를 떠날 때만 이벤트를 트리거합니다.  mouseout event 는 선택한 요소 뿐만 아니라 자식 요소 떠나면 트리거됩니다.  이 이벤트는 MouseEnter 이벤트와 자주 함께 사용 됩니다.[문법] mouseleave 를 트리거 할 때 $(selector).mouseleave() Try it mouseleave event 에 function 을 첨부할 때 : $(selector).mouseleave(function) 예) $("p").mouseleave(function(){  $("p").css("background-color","gray");});2. .mousemove()mousemove event는 마우스 포인터가 선택한 요소 안에서 움직일 때마다 발생합니다. mousemove() method는 MouseMove 이벤트를 트리거하거나, MouseMove 이벤트가 발생할 때 실행할 함수를 연결합니다. 사용자가 마우스 1 픽셀을 이동 때마다, MouseMove 이벤트가 발생합니다. 이는 모든 마우스의 움직임 이벤트를 처리하는 시스템 리소스를 사용합니다. 따라서 mousemove() method를 신중히 사용할 필요가 있습니다.[문법] mousemove event 를 트리거 할 때 $(selector).mousemove() Try it mousemove event에 함수를 첨부할 때: $(selector).mousemove(function) Try it 예) $(document).mousemove(function(event){  $("span").text(event.pageX + ", " + event.pageY);});3. .mouseout()mouseout event는  마우스 포인터가 선택한 요소에서 벗어날 때  발생합니다. mouseout() method는 mouseout event 를 트리거하거나, mouseOut 이벤트가 발생하면 실행하는 기능을 연결합니다. mouseleave event와는 달리 mouseout event는 마우스 포인터가 자식 요소뿐만 아니라 선택한 요소를 떠나면 이벤트가 트리거됩니다.  mouseleave event는 마우스 포인터가 선택한 요소에서 벗어날 때만  mouseleave 이벤트는 트리거합니다.  mouseout event는 mouseover event와 자주 함께 사용합니다.[문법] mouseout event 를 트리거 할 때: $(selector).mouseout() Try it mouseout event에 함수를 첨부할 때: $(selector).mouseout(function). 예) $("p").mouseout(function(){  $("p").css("background-color","gray");});4. .mouseover()mouseover event는 마우스 포인터가 선택된 요소 위에있을 때 발생합니다. mouseover() method는 mouseover 이벤트를 트리거하거나, mouseover 이벤트가 발생할 때 실행할 함수를 연결합니다. mouseenter event와는 달리 mouseover event는 자식 요소뿐만 아니라 선택한 요소를 입력하면 이벤트 mouseover 이벤트를 트리거합니다.  mouseenter event는 마우스 포인터가 선택한 요소에 들어갈 때 만 트리거됩니다.  mouseover event는 mouseout event와 자주 함께 사용됩니다.[문법] mouseover event 트리거 할 때: $(selector).mouseover() Try it mouseover event에 함수를 첨부할 때: $(selector).mouseover(function) 예) $("p").mouseover(function(){  $("p").css("background-color","yellow");});5. .mouseup()마우스 왼쪽 버튼을 선택한 요소를  클릭한 후 놓으면 MouseUp 이벤트가 발생합니다. mouseup() method는 MouseUp 이벤트를 트리거하거나, MouseUp 이벤트가 발생할 때 실행할 함수를 연결합니다. mouseup() method는 종종 mousedown() method와 함께 사용합니다. 문법 mouseup event 를 트리거할 때: $(selector).mouseup() Try it mouseup event에 함수를 첨부할 때: $(selector).mouseup(function) 예) $("div").mouseup(function(){  $(this).after("Mouse button released.");});6. .toggle()toggle() method는 jQuery를 버전 1.8 및 버전에서 비권장되었고,  1.9에서 제거됩니다.  toggle() method는 선택된 요소에 대한 클릭 이벤트 사이를 전환하는 두 개 이상의 기능을 첨부합니다. jQuery를 효과를 나타내는  toggle() 메소드도 있는데, 이는 hide와 show의 토글입니다. 문법 $(selector).trigger(function) 예) $("p").toggle(  function(){$("p").css({"color":"red"});},  function(){$("p").css({"color":"blue"});},  function(){$("p").css({"color":"green"});}); 제23장 . jQuery의 이벤트 : Event Object11. event.currentTargetevent.currentTarget 속성은 현재 DOM 요소이며, 일반적으로 this와 동일합니다. 문법 event.currentTarget예) $("h1,h2,p").click(function(event){  alert(‎‎‎event.currentTarget == this);});event.data 속성은 현재 실행 핸들러가 바인딩 될 때 이벤트 메서드에 전달 된 옵션 데이터가 포함되어 있습니다. 문법 event.data 예) $("p").each(function(i){ $(this).on("click",{x:i},function(event){ alert(‎‎‎"The " + $(this).index() + ". paragraph has data: " + event.data.x); });});2. event.dataevent.data 속성은 현재 실행 핸들러가 바인딩 될 때 이벤트 메서드에 전달 된 옵션 데이터가 포함되어 있습니다. 문법 event.data 예) $("p").each(function(i){ $(this).on("click",{x:i},function(event){ alert(‎‎‎"The " + $(this).index() + ". paragraph has data: " + event.data.x); });});3. event.isDefaultPrevented()event.isDefaultPrevented() method 는 preventDefault() method가 이벤트를 호출했는지 안 했는지를 체크합니다. 문법 event.isDefaultPrevented() 예) $("a").click(function(event){  event.preventDefault();  alert(‎‎‎"Was preventDefault() called: " + event.isDefaultPrevented());});4. event.isImmediatePropagationStopped()event.stopImmediatePropagation ()메소드가 호출되었는 지 여부를 확인한다. event.stopImmediatePropagation () 메소드가 호출되면 true를 반환하고, 그렇지 않으면 false를 반환한다. 문법  event.isImmediatePropagationStopped() 예) $("div").click(function(event){  event.stopImmediatePropagation();  alert(‎‎‎event.isImmediatePropagationStopped());});5. event.isPropagationStopped()event.isPropagationStopped() method 는event.stopPropagation() 메소드가 호출되었는지 여부를 확인한다. event.stopPropagation() 이 호출되었으면 true를 반환하고 아니면 false 를 반환한다. 문법 event.isPropagationStopped() 예) $("div").click(function(event){ event.stopPropagation(); alert(‎‎‎event.isPropagationStopped());}); 6. event.namespaceevent.namespace 속성은 이벤트가 트리거 된 사용자 정의 네임 스페이스를 반환합니다. 이 속성은 다르게 사용되는 네임 스페이스에 따라 작업을 처리하는 플러그인 제작자에 의해 사용될 수 있습니다. 언더바(_)시작하는 네임 스페이스는  jQuery를 위해 예약되어 있습니다. 문법 event.namespace 예) $("p").on("custom.someNamespace",function(event){  alert(‎‎‎event.namespace);});$("p").click(function(event){  $(this).trigger("custom.someNamespace");}); $("button").click(function(){  $("p").off("custom.someNamespace");}); 제24장 . jQuery의 이벤트 : Event Object21. event.pageXevent.pageX 속성은 문서의 왼쪽 가장자리를 기준으로 마우스 포인터의 위치를 반환합니다. event.pageX 속성은 종종 event.pageY 속성과 함께 사용됩니다. 문법 event.pageX 예) $(document).mousemove(function(event){  $("span").text("X: " + event.pageX + ", Y: " + event.pageY); });2. event.pageYevent.pageY 속성은 문서의 위쪽 가장자리를 기준으로 마우스 포인터의 위치를 반환합니다. event.pageY 속성은 종종 event.pageX  함께 사용됩니다. 문법 event.pageY 예) $(document).mousemove(function(event){  $("span").text("X: " + event.pageX + ", Y: " + event.pageY); });3. event.preventDefault()event.preventDefault()는 일어나는 요소의 기본 동작을 중지합니다. 예를 들면, 양식을 제출에서 제출 버튼을 방지 URL을 다음에서 링크를 방지 event.isDefaultPrevented는 preventDefault () 메서드가 이벤트에 대해 호출되었는지 여부를 확인하는 방법입니다. 문법 event.preventDefault() 예) $("a").click(function(event){     event.preventDefault();     });4. event.relatedTargetevent.relatedTarget 속성은 마우스가 어떤 element에 들어가고 나오는지를 반환합니다. 문법 event.relatedTarget 예) $("div").mouseenter(function(event){  alert(‎‎‎"relatedTarget is: " + event.relatedTarget);});5. event.result event.result 속성은 지정된 이벤트에 의해 트리거된 이벤트 처리기의 반환 된 마지막 / 이전 값을 포함합니다. 문법 event.result 예) $("button").click(function(){  return "Hello world!";});  $("button").click(function(event){  $("p").html(event.result);});6. event.targetevent.target 속성은 어떤 DOM 요소가 트리거 되었는지를 반환합니다.  이벤트 버블 링에 의해 처리되고 있는지 확인하기 위해서  event.target을 this에 비교하는 것이 유용합니다.  문법  event.target 예) $("p, button, h1, h2").click(function(event){  $("div").html("Triggered by a " + event.target.nodeName + " element.");});7. event.typeevent.type property는 어떤 event type이 trigger되었는지를 확인합니다. 문법 event.type 예) $("p").on("click dblclick mouseover mouseout",function(event){  $("div").html("Event: " + event.type);}); 제5장 . Effect : Basic, Custom1. .hide()hide() method는 선택된 엘리먼트를 숨기는 동작을 합니다. 이것은 CSS property display:none과 유사합니다. Hidden elements 는 절대로 보이지 않게 됩니다. 즉, 더 이상 페이지의 레이아웃 등에 영향을 미치지 않습니다. show() method를 이용하여 숨겨진 엘리먼트를 보이게 할 수 있습니다. 문법 $(selector).hide(speed,easing,callback) 예) $("button").click(function(){             $("p").hide();   }); 2. .show()The show() method는 선택된 hidden elements에 대하여 보이게합니다.  show()메소드는 jQuery methods의 hidden elements에 대해 작동하고 CSS에서의 visibility:hidden 이 아닌 display:none으로 안보이는 요소에 대해 작동한다. Elements를 숨기기 위해서는 hide() method를 이용합니다.3. .toggle()toggle() 은 선택된 엘리먼트에 대해서  hide() 와 show() 사이를 토글합니다. toggle() 은 항상 선택된 엘리먼트에 대해서 visibility 를 체크합니다. show() 메소드는 숨겨진 엘리먼트에게만 작동되고, 반대로는 hide()메소드가 작동됩니다.  이때 toggle effect가 발생합니다. 이 방법은 또한 사용자 정의 기능 사이를 전환 할 수 있습니다.4. .animate()animate() method 는 CSS 속성 세트의 사용자 지정 애니메이션을 수행합니다. animate() method 는 한 상태에서 CSS 스타일로 다른 요소를 변경합니다.  CSS 속성 값은 애니메이션 효과를 만들려면 점진적으로 변경됩니다. 숫자 만 값 ( "30 픽셀 여백을"같은) 애니메이션 효과를 적용 할 수 있습니다. 문자열 값 ( "빨간색 배경 색"과 같은) 애니메이션을 적용 할 수 없습니다.  "+="또는 "-=“을 이용해 상대적인 애니메이션을 작성할 수 있습니다.5. .delay()delay() method 는 큐에 있는 다음 항목의 실행 지연을 설정합니다. 예) $("button").click(function(){   $("#div1").delay("slow").fadeIn();   $("#div2").delay("fast").fadeIn(); });6. .dequeue()dequeue() method는 대기열에서 다음 동작을 제거하고 기능을 실행합니다. 큐는 실행을 기다리는 하나 이상의 기능들입니다. dequeue() method 는 queue() method와 함께 사용됩니다. element 는 여러 큐가있을 수 있습니다. 기본 jQuery(default jQuery queue.) 큐는 "fx" queue를 가지고 있습니다. dequeue() method 는 프로세스를 계속 할 수 있도록 queue() 메소드로 함수를 추가 한 후 호출됩니다.7. .stop()stop() method는 선택된 elements에 대해 현재 실행중인 animation을 중지시킵니다. 예) $("#stop").click(function(){    $("div").stop(); }); 제26장 . Effect : Fading, Sliding1. .fadeIn()fadeIn() method 는 선택된 element에 대해서 opacity값을 hidden 에서 visible 로 점차적으로 변화시킵니다.  Hidden elements 는 절대 보이지 안으며 더 이상 페이지의 레이아웃에 영향을 미치지 않습니다. fadeIn() method 는 주로 종종 fadeOut() method와 함께 쓰입니다.2. .fadeOut()fadeOut() method 는 선택된 element에 대해서 opacity값을 visible에서 hidden로 점차적으로 변화시킵니다.  Hidden elements 는 절대 보이지 안으며 더 이상 페이지의 레이아웃에 영향을 미치지 않습니다. fadeOut() method 는 주로 종종 fadeIn() method와 함께 쓰입니다.3. .fadeTo()fadeTo() method 선택된 엘리먼트에 대해서 점차적으로 지정 opacity (페이드 효과)를 점차적으로 변화시킵니다.  예) $("button").click(function(){   $("p").fadeTo(1000,0.4); });4. .fadeToggle()fadeToggle() 는 fadeIn() methods 와 fadeOut() methods 사이를 토글됩니다. elements가  faded out상태이면 , fadeToggle() 메소드가 fadeIn 시킵니다. elements가  faded In상태이면 , fadeToggle() 메소드가 fade out시킵니다. 예) $("button").click(function(){  $("#div1").fadeToggle();});5. .slideDown()slideDown()메소드는 선택된 elements에 대해  slides-down 시킵니다. slideDown() jQuery methods에 의해 hidden(display:none) 된 엘리먼트에 작동합니다.(visibility:hidden이 아닙니다). 예) $("button").click(function(){   $("p").slideDown(); });6. .slideUp()slideUp() method는 선택된 element에 대해서 slides-up 또는 hide시킵니다. Hidden elements 는 전혀 보이지 않으며, 더 이상 페이지 레이아웃에 관여하지 않습니다. 예) $("button").click(function(){   $("p").slideUp(); });7. .slideToggle()slideToggle() method는 선택된 element에 대해 slideUp() 과slideDown() 사이를 토글됩니다 이 메소드는 선택된 element에 대해 visibility를 체크합니다. slideDown()은  element가 hidden 되었을 때 동작합니다. slideUp() 은 element 가 visible이면 동작합니다 -  toggle effect를 만들어 냅니다. 제27장 . jQuery Misc Methods 11. data()data() method 는 선택된 element에 대해 data를 첨부하고, 또는 data 를 가지고 온다.   Data를 삭제하기 위해서는 removeData() method를 사용한다. Element로부터 데이터를 반환한다. 선택된 element에 대해 첨부된 data를 반환한다.  문법 $(selector).data(name)2. each()each() method는 match되는 element 에 대해 각각 동작할 함수를 한정한다. False값을 반환하게 될때는 loop이 조기에 정지할 수도 있다 문법$(selector).each(function(index,element)) 예) $("button").click(function(){   $("li").each(function(){     alert(‎‎‎$(this).text())   }); });3. get()get() method 는 selector에 의해 한정된    DOM elements 얻습니다. Syntax $(selector).get(index) 예) $("button").click(function(){   x=$("p").get(0);   $("div").text(x.nodeName + ": " + x.innerHTML); });4. index()index() method는  지정된 다른 요소에 상대적으로 지정 요소의 인덱스 위치를 반환합니다. elements jQuery selectors 또는 a DOM element에 의해 한정될수 있습니다. element 가 존재하지 않으면, index()메소드는    -1을 반환합니다. 문법 $(selector).index() 예) $("li").click(function(){   alert(‎‎‎$(this).index()); });5. $.noConflict()noConflict() method는 $ variable의  jQuery's control을 해제합니다. 이 방법은 jQuery를 변수에 대한 새 사용자 정의 이름을 지정할 수 있습니다. 다른 자바 스크립트 라이브러리의 기능에 대한 $를 사용할 때 이 방법이 유용합니다. 문법 $.noConflict(removeAll) 예) var jq=$.noConflict(); 제28장 . jQuery Misc Methods 21. $.param()param() method는 배열을 serialized representation으로 표현하거나 object를 생성합니다. serialized values URL은  query string에서 사용될 수 있습니다.  문법 $.param(object,trad) 예) $("button").click(function(){   $("div").text($.param(personObj)); });2. removeData()removeData()는 data() method에 의해 이미 지정된 데이터를 삭제합니다 . 문법 $(selector).removeData(name) 예) $("#btn2").click(function(){   $("div").removeData("greeting");   alert(‎‎‎"Greeting is: " + $("div").data("greeting")); });3. size()size() method는 in jQuery version 1.8. 에서 deprecated 되었습니다. 대신에 length property를 사용합니다. size() method는 jQuery selector에 의해 매치되는 element의 수를 반환합니다. 문법 $(selector).size() 예) $("button").click(function(){  alert(‎‎‎$("li").size()); });4. toArray()toArray ()는 배열로 jQuery를 선택하여 일치하는 요소를 반환합니다. 문법 $(selector).toArray() 예) $("button").click(function(){   x=$("li").toArray()   for (i=0;i<x.length;i++)     {     alert(‎‎‎x[i].innerHTML);     } }); 제29장 . jQuery 애니메이션1. 기본 동작 애니메이션Animate() 메소드를 이용한 기본동작 애니메이션을 연습해 봅니다. 예) $("button").click(function(){   $("div").animate({left:'250px'}); }); 2. 여러가지 속성을 이용한 애니메이션다음과 같은 속성들을 이용해 애니메이션을 만들어 봅니다. 예) $("button").click(function(){   $("div").animate({     left:'250px',     opacity:'0.5',     height:'150px',     width:'150px'   }); });3. Relative Values를 이용한 애니메이션상대 값을 사용한 애니메이션 예제를 연습합니다. Relative Values는 현 요소의 현재 값에 연관된 값을 정의 할 수도 있습니다.   이것은 값 앞의 += 또는 -=을 이용해 구현 할 수 있습니다. 예제 $("button").click(function(){   $("div").animate({     left:'250px',     height:'+=150px',     width:'+=150px'   }); }); 4. Pre-defined Values를 이용한 애니메이션a property의 animation value를  "show", "hide", 또는 "toggle“로 지정할 수 있습니다. 예) $("button").click(function(){   $("div").animate({     height:'toggle'   }); }); 5. 큐 기능을 이용한 애니메이션기본적으로, JQuery와 애니메이션 큐 기능을 함께 제공됩니다. 이것은 여러 애니메이션의 서로 호출하게 작성하는 경우, jQuery를 메서드 호출에 "내부"큐를 생성합니다. 그런 다음 애니메이션 호출을 하나 하나 실행합니다. 서로 다른 애니메이션을 수행하려는 경우, 큐 기능을 활용합니다.6. 텍스트를 가진 애니메이션<div>태그 안의 오른쪽으로 이동하고 , 텍스트의 폰트 크기가 커지는 애니메이션을 실행해봅니다. 예) $("button").click(function(){   var div=$("div");   div.animate({left:'100px'},"slow");   div.animate({fontSize:'3em'},"slow"); });