각 함수의 변수사용 (this, el, index), 메소드 체이닝, 추가적인 메소드 사용법 (append -> appendTo), 이벤트 처리 종류

-----------------------------------각 함수의 변수사용 (this, el, index)--------------------------------

이벤트 처리
선택자함수로 선택된 엘리먼트들(버튼들)에서 이벤트 발생시(클릭이벤트) 실행될 함수(이벤트핸들러함수)를
jQuery의 click() 메소드를 사용해서 선택된 버튼에 이벤트핸들러함수를 연결짓는 것


$('button').click(function(event) {
            // this <------ 이벤트를 발생시킨(지금 클릭한 버튼) 엘리먼트가 전달된다.
            $(this).조작함수();
});


$('button').on('click', function(event){
            // this <---- 이벤트를 발생시킨(지금 클릭한 버튼) 엘리먼트가 전달된다.
            $(this).조작함수();
});


$('p').each(function(index, el){
            // index <--- 0부터 시작하는 인덱스값(선택된 p의 갯수만큼 변한다.)
            // el      <--- 함수가 실행될 때 마다 선택 p중에서 순서대로 p가 하나씩 전달된다.
            // this    <--- 함수가 실행될 때 마다 선택 p중에서 순서대로 p가 하나씩 전달된다.

            $(el).조작함수();
            $(this).조작함수();
});


$("div").filter(function(index, el){
            // index <--- 0부터 시작하는 인덱스값(선택된 p의 갯수만큼 변한다.)
            // el      <--- 함수가 실행될 때 마다 선택 div중에서 순서대로 div가 하나씩 전달된다.
            // this    <--- 함수가 실행될 때 마다 선택 div중에서 순서대로 div가 하나씩 전달된다.       

            $(el).조작함수();
            $(this).조작함수();

            return 불린값;   // true가 반환되면 해당 엘리먼트는 선택되고, false가 반환되면 해당 엘리먼트는 삭제된다.
});



//////////////////////////////////////메소드 체이닝

메소드 체이닝
// 선택된 엘리먼트에 대해서 변경하는 조작함수인 경우
// 그 조작함수의 실행결과로 반환되는 것은 jQuery집합객체다.
// 따라서, 새로운 조작함수를 연결해서 실행할 수 있다. 
$(select).addClass('highlight').조작함수();    // 변경
$(select).show().조작함수();
$(select).hide().조작함수();
$(select).append().조작함수();

$(select).html("

내용

).조작함수();
$(select).text("안녕").조작함수();
$(select).prop("checked", true).조작함수();
$(select).var("홍길동").조작함수();
$(select).attr("src", "../image/1.jpg").조작함수();


// 메소드 체이닝을 지원하지 않는 조작함수
// 조작함수의 실행결과로 반환되는 것이 jQuery 집합객체가 아닌 경우에는 새로운 조작함수를 연결해서 사용할 수 없다.
// 대표적인 메소드가 조회하는 메소드다, 조회하는 메소드는 문자열이 획득된다.
var htmlContent = $(select).html()
var textContent = $(select).text()
var propValue = $(select).prop("checked")
var value = $(select).var()
var attrValue = $(select).attr("src")




================추가적인 메소드 사용법==================

// A에 B를 추가한다.
$(A).append(B)

// B를 A에 추가한다.
B.appendTo(A)
(append, prev, after, before 모두 같음)




=================이벤트 처리==================
           
이벤트 처리

            1. 인라인 이벤트 처리
                        

<button onclick="fn();">버튼</button>

<script>
	function fn() {
		// 이벤트 처리코드
	}
</script>

 

 

 

            2. 이벤트 프로퍼티를 활용한 이벤트 처리

<button id="btn">버튼</button>

<script>
	document.getElementById("btn").onclick= function() {
		// 이벤트 처리 코드
	}
</script>

 

 

 

            3. addEventListener() 함수를 활용한 이벤트 처리

<button id="btn">버튼</button>

<script>
	document.getElementById("btn").addEventListener("click", function() {
		// 이벤트 처리 코드
	})
</script>

 

 

 

            4. jQuery를 활용한 이벤트 처리

 <button id="btn">버튼</button>

<script>
	$('#btn').on('click', function() {
		// 이벤트 처리코드
	})

	$('#btn').click(function() {
		// 이벤트 처리코드
	})
</script>