30 Days to Learn jQuery : Basic

jQuery 동영상 강의

흐미~넘 좋은 강의인데...무료란다. 한 강좌당 시간도 길지 않으니..매일 틈내서 들어야겠다.
강의보기 : 30 Days to Learn jQuery

목차

Basic

1. Hello jQuery
2. Not So Fast, jQuery
3. The Basics of Querying the DOM
4. Events 101
5. Events 201
6. Bind...Live...Delegate...Huh?
7. Creating and Appending Content

---

[Day01] Hello jQuery (10m 59s)

환경설정

• jQuery 라이브러리 다운로드 : 개발자 버전(jquery.com)
• 에디터 : sublime text 2
• 웹 브라우저 + 개발자 도구 : 크롬

jQuery 라이브러리 선언

Body 태그 맨 아래에 선언하여 웹페이지 로딩속도를 높인다.

jQuery 사용

jQuery 를 호출할 때 jQuery 또는 $ 를 사용한다. 혼용이 가능한 이유는 바래..아래

// http://code.jquery.com/jquery-1.7.2.js
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

---

[Day02] Not So Fast, jQuery

jQuery 연산 위치 설정 head 부분에서 연산을 하기 위해서는 document 가 로드 된 후에 실행되어야 한다. 따라서 $(document).ready() 를 사용한다.

위 소스에서 $(document).ready 대신 $(function())를 사용할 수 있다. jquery-1.7.2.js에서 확인.

var jQuery = function( selector, context ) {
	...
	// A central reference to the root jQuery(document)
	rootjQuery,
	...
}

jQuery.fn = jQuery.prototype = {
	constructor: jQuery,
	init: function( selector, context, rootjQuery ) {
		.....
		// HANDLE: $(function)
		// Shortcut for document ready
		} else if ( jQuery.isFunction( selector ) ) { //jQuery의 셀렉터가 함수이면
			return rootjQuery.ready( selector ); //document.ready 실행
		}
		
		....
		
};		

---

[Day03] The Basics of Querying the DOM

그동안 아담~ 이 뭔가 했더니..dom 이었구나..ㅋㅋ
jQuery 셀렉터를 사용하는 여러가지 방법 소개

---

[Day04] Events 101

custom attribute 사용

data-*

My Website

로컬변수 사용으로 반복동작 줄이기

var $this = $(this)

---

[Day05] Events 201

---

[Day06] Bind...Live...Delegate...Huh?

on 메소드 사용하기

아래의 jQuery라이브러리를 살펴보면 blur focus focusin focusout load resize scroll..등의 메소드는 결국 on메소드로 치환된다.

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
	"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
	"change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

	// Handle event binding
	jQuery.fn[ name ] = function( data, fn ) {
		if ( fn == null ) {
			fn = data;
			data = null;
		}

		return arguments.length > 0 ?
			this.on( name, null, data, fn ) :
			this.trigger( name );
	};

	if ( jQuery.attrFn ) {
		jQuery.attrFn[ name ] = true;
	}

	if ( rkeyEvent.test( name ) ) {
		jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks;
	}

	if ( rmouseEvent.test( name ) ) {
		jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks;
	}
});

유용한 이벤트 메소드 소개

• bind
• live
• delegate

---

[Day07] Creating and Appending Content

• append
• prepend
• insertAfter
• insertBefore
• after
• before

(function() {

	var co = $('article').find('span.co').each(function() {
		var $this = $(this);

		$('
', {
			class: 'co',
			text: $this.text()
		}).prependTo( $this.closest('p') );
		
	});
	

})();