23.05.16

jQuery

javascript - library
dom 관련된 내용 처리

https://api.jquery.com/   or   https://www.w3schools.com/jquery/jquery_selectors.asp

사이트 참조

1. selector <-- css
2. 처리용 메서드
		1 . 배열
        2. 

🌕 jQuery

for.each말고도 map()- 내용변경 / filter() - 내용검색 등의 기능이 더 있다.

🌙 filter() : 내용 검색

내용을 검색하여 적용시켜준다.

1.
	$('h2').filter(':even').css('color', 'coral'); <-- h2 중 짝수번 찾아서 색 변경

2.
    //$('h2').filter(':even').css({
			
		//color: 'coral',
		//backgroundColor : 'yellow'   <-- 객체형식으로 배경과 함께 줘도 됨
		//});
  
3.  
   //const h2 = $('h2');  //htmlcollection, 배열과 비슷
		//console.log(h2);
		//h2.filler(':even').css('color', 'coral');    <--- 변수  선언 후 적기
    
    
----------------------    
<h2>Header - 1</h2>
<h2>Header - 2</h2>
<h2>Header - 3</h2>
<h2>Header - 4</h2>
<h2>Header - 5</h2>

1. 

2. 

3. 

🌙 filter() 안에 함수 주기

<script type="text/javascript">
	$( document ).ready( function()  {
		$('h2').filter( function() {
			console.log('h2');
		});
				
	});
</script>

each와 똑같이 내부적으로 루프를 돌고 있다고 보면 된다.

$( document ).ready( function()  {
		$('h2').filter( function(index) {
        	// true / false
			return index % 2 == 0;   <--- index가 짝수일 때
		}).css('color', 'coral');  <--- 색 변경하겠다.
				
	});
    
    따라서 인덱스가 짝수인 것만 색 변경하는 '필터의 내용을 만들어줄 수 있다.'

🌙 end() : filter 적용 취소

---

		$('h2').css('background-color', 'lightcoral');	
		$('h2').filter(':even').css('color', 'blue');	
		$('h2').filter(':odd').css('color', 'white');

---

		$('h2').css('background-color', 'lightcoral')
		.filter(':even').css('color', 'blue')
		.filter(':odd').css('color', 'white');  //even 중의 odd가 적용되는 것임

.을 이용하여 한 번에 연결해서 위와 같이 쓰려고 했으나 odd가 filter의 filter로 적용되어 even 중에서 odd가 변경되도록 적용이 됨(1, 3, 5 중의 짝수는 2번째인 3)

---

		$('h2').css('background-color', 'lightcoral')
		.filter(':even').css('color', 'blue')
		.end()   //filter 적용된 것이 취소되어 밑 필터가 맨 처음 것에 맞게 적용
		.filter(':odd').css('color', 'white');

end를 사용하여 filter 적용을 취소 시켜 그 이후에 나오는 filter가 맨 위에서 filter 하도록 적용시켜준다. ( 결과 처음과 동일 )

🌙 add : 뒤에 추가하여 적용

//$('h1').css('background-color', 'coral');
//$('h1, h2').css('color', 'blue');


$('h1').css('background-color', 'coral')
.add('h2').css('color', 'blue');    (.add로 h1에서 추가로 h2도 글자색 바꾼다는 뜻)

(결과는 위와 동일)

h1 적용을 포함해서 h2 적용하는 것

🌙 find : 특정 태그 검색

1.
console.log($(document).find('h2')); <-- h2태그를 검색해줌

2.
$(document).find('h2').each(function(index, item) {
			console.log(index, ':', item.innerHTML);   <--- each로 루프돌려서 검색된 결과의 내용만 가져옴

3.
$(document).find('.c').each(function(index, item) {  <--- class="c"인 것 검색
			console.log(index, ':', this.innerHTML);
		});

1. 

2. 

3. 

🌙🌙 find : String - xml 변경하기 (xml 분석)

xml 형식 변수 하나 적당하게 만들기

const xml = `<friends>
	<friend>
		<name>tester1</name>
		<language>Javascript</language>
	</friend>
	<friend>
		<name>tester2</name>
		<language>Java</language>
	</friend>
	<friend>
		<name>tester3</name>
		<language>Python</language>
	</friend>
	</friends>
    `;    
    
    현재는 string 형식이다.

---

타입 변경

	$( document ).ready( function()  {
		console.log(typeof xml);
		
		const xmlDoc = $.parseXML(xml); // xml Dom화 시킴
		console.log(typeof xmlDoc);  
	});    
    
    string - > object로 바꿈

---

find 적용

$(xmlDoc).find('friend').each(function(index, item) {
			console.log(index);
			console.log($(item).find('name')[0].innerHTML); <--name만 뽑기
			});
            

---

🌙 존재 여부 검색

$('h2').each(function() {
			// is : 안에 selector 존재 여부 검색
			if($(this).is('.c')) {
				$(this).css('color', 'coral');
			}
		});

🌙 동적 프로퍼티 추가 가능(json)

	$( document ).ready( function()  {
		// json 
		let object = {name: "홍길동"};
		console.log(object);
		
    1.     
		//동적으로 프로퍼티 추가 가능
		object.region1 = '서울시 종로구';
		object.part1 = '리더';
		
		console.log(object);
		
	});
    
    2. 객체에 대한 확장 (위와 동일하게 객체가 추가됨)
   	 	$.extend(object, {region2: '서울시 강남구', part2: '베이스'});
		$.extend(object, {region3: '서울시 서초구', part3: '세컨드'});
		console.log(object);
    

1. 

2. 

🌙 $ 변경하기

$.noConflict(); <-- $ 충돌됨을 방지하기 위하여 사용 안한다는 뜻

	$.noConflict();
	const J = jQuery;
	//$( document ).ready( function()  {
	J( document ).ready( function()  {

		console.log("Hello jQuery");

	});

---

위 extend 코드 변경해보기

$.noConflict();
	const J = jQuery;
	//$( document ).ready( function()  {
	J( document ).ready( function()  {

		let object = {name: "홍길동"};
		
		J.extend(object, {region2: '서울시 강남구', part2: '베이스'});
		J.extend(object, {region3: '서울시 서초구', part3: '세컨드'});
		console.log(object);

	});

🌙 문서 내용 설정하거나 변경할 때 사용

기본적으로 사용		변경
innerHTML		==> html();
textContent		==> text();

1. 내용 확인 버튼 누를 시

$( document ).ready( function()  {
		//innerHTML		==> html();
		//textContent	==> text();
		document.getElementById('btn1').onclick = function() {
        
			//javascript 방식
			const html = document.getElementById('result');
			console.log(html.innerHTML);
			console.log(html.textContent);
		};
	}); 
    
			// jQuery 방식
			console.log($('#result').html());
			console.log($('#result').text());
            
-------------------------------------------------------------

2. 내용 수정 버튼 누를 시
		document.getElementById('btn2').onclick = function() {
			//javascript 방식
			//const html = document.getElementById('result');
			//html.innerHTML = '<i>새로운 결과</i>';
			//html.textContent = '<i>새로운 결과</i>';
			
			// jQuery
			console.log($('#result').html('<i>새로운 결과</i>'));
			//console.log($('#result').text('<i>새로운 결과</i>');
		};
            
            
--------------------------------------------------------------       
<body>

<button id="btn1">내용 확인</button>
<button id="btn2">내용 수정</button>
<br><hr><br>
<div id="result"><b>출력 내용</b></div>

</body>

1. 

2. 

🌙 집합적 / 분리적 적용

<script type="text/javascript">
	$( document ).ready( function()  {
		document.getElementById('btn1').onclick = function() {
			
            // 1. 집합적 적용
			//$('div').html('<i>새로운 결과</i>');
			
			//2. 분리적
			$('div').html( function(index) {
				return '<i>새로운 결과 ' + index + '</i>'
			})
		};

	});
</script>

1. 

2. 

⭐ 응용 : 구구단

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
	$( document ).ready( function()  {
		document.getElementById('btn').onclick = function() {
			const sDan = $('#startdan').val();
			const eDan = $('#enddan').val();

			const iStartDan = parseInt(sDan);
			const iEndDan = parseInt(eDan);
			
				let html = '<table border="1" width="800">';
				for(let i = iStartDan; i <=iEndDan; i++) {
					html += '<tr>';
					for(let j = 1; j <=9; j++) {
					html += '<td>' + i + 'x' + j + '=' + (i*j) + '</td>';
					}
					html += '</tr>';					
				}
				html += '</table>';
				
				$('#result').html( html );
			};	
		});
</script>
</head>
<body>

시작단 <input type="text" id="startdan" />
~
끝단 <input type="text" id="enddan" />
<button id="btn">구구단 출력</button>
<br><hr><br>
<div id="result"></div>

</body>

---

$(document).ready(function() {
	document.getElementById('btn').onclick = function() {
		// $('태그') - selector
		// $('html 내용') - 생성
		
		// appendTo 붙이는 것. / prependTo / insertAfter / insertBefore
		$( '<i>Hello jQuery</i>' ).appendTo('#result');
		$('<i></i>').html('Hello jQuery').prependTo('#result');
	} 
});

1. appendTo : 뒤에 붙여서 출력
2. perpendTo : 앞에 붙여서 출력
3. insertAfter :
4. insertBefore :

🌙 삭제하기

<script type="text/javascript">
	$( document ).ready( function()  {
		1.
        //내용삭제
		document.getElementById('btn1').onclick = function() {
			$('#d').html('');
		};
        
		2.
		//내용삭제
		document.getElementById('btn2').onclick = function() {
			$('#d').empty();
		};
		
        3.
		//태그삭제
		document.getElementById('btn3').onclick = function() {
			$('#d').remove(); //div태그 전체가 삭제됨
		};
		
        4.
		document.getElementById('btn4').onclick = function() {
			$('P').first().remove();  //첫번째 것만 지움
		};


	});
</script>

---------------------------------------------------------------

</head>
<body>

<button id="btn1">내용 삭제</button>
<button id="btn2">내용 삭제</button>
<button id="btn3">내용 삭제</button>
<button id="btn4">내용 삭제</button>
<br><hr><br>

<div id="d">
	<p>내용 1</p>
	<p>내용 2</p>
</div>
</body>

1,2.

3. 

4. 

🌙 이미지 넣기, 정보 수정, 가져오기

이미지 넣고 이미지의 정보 가져오기

<script type="text/javascript">
	$( document ).ready( function()  {
		document.getElementById('btn1').onclick = function() {
			//1개만 출력됨
			//console.log($('img').attr('src'));
			
            1.
			$('img').each( function(index, item) {
				console.log($(item).attr('src'));
			});   // attr -> attribute
			
            2.
			$('img').attr('src', function(index, item) {
				console.log(item);
			})
		}
	});
</script>

1,2 결과는 동일

-------------------------------------------------------
<body>

<button id="btn1">속성 내용</button>
<br><hr><br>
<img src="./images1/Chrysanthemum.jpg" width="150" />
<img src="./images1/Desert.jpg" width="150" />
<img src="./images1/Hydrangeas.jpg" width="150" />
<img src="./images1/Jellyfish.jpg" width="150" />

</body>

---

이미지 수정하기

1. 아까와 다르게 전체 다 적용된다.
document.getElementById('btn2').onclick = function() {
			$('img').attr('width', 100);
		}


2. 전체 다 적용 + 각자 다른 크기(크기가 100씩 증가함)
document.getElementById('btn2').onclick = function() {
			$('img').attr('width', function(index) {
				return (index + 1) * 100;
			});
        
        
3. width + height 주기
document.getElementById('btn2').onclick = function() {
			$('img').attr( {
				width: 100,
				height: 200
			});
		};
        

4. 2번 확장
document.getElementById('btn2').onclick = function() {
			$('img').attr( {
				width: function(index) {
					return (index + 1) * 100;
				},
				height: 200
			});
		};

1. 

2. 

3. 

4. 

---

속성 삭제

document.getElementById('btn3').onclick = function() {
			$('img').removeAttr('height');     <--- 주어진 높이 길이 삭제
		}

---

속성 만들어서 사용

src, id 등 기존 속성 말고 사용자가 직접 만들어서 대입할 수 있다.

<img src="./images1/Chrysanthemum.jpg" width="150" data="1" />
<img src="./images1/Desert.jpg" width="150" data="2" />
<img src="./images1/Hydrangeas.jpg" width="150" data="3"/>
<img src="./images1/Jellyfish.jpg" width="150" data="4"/>   <-- data라는 속성 각각 부여

$('img').each( function(index, item) {
				console.log($(item).attr('data')); <--- 만든 속성으로 출력
			});

---

🌙 속성으로 값 가져오기

텍스트

$( document ).ready( function()  {
		document.getElementById('btn1').onclick = function() {
        1. 기본으로 사용하는 것
			//console.log(document.frm.data.value);
		
        2.	jQuery
            console.log($(#data).val());

		3. 데이터값 넣기
        
        document.getElementById('btn2').onclick = function() {
			$('#data').val('새로운 데이터');
			
		};
	
	});
    
 ------------------------------------------------------------------------
 
 <body>

<button id="btn1">내용</button>
<button id="btn2">내용 추가</button>
<br><hr><br>
<form name="frm">
데이터 <input type="text" name="data" id="data" />
</form>

</body>

1,2.

3. 

---

체크박스 / select

체크박스

	$( document ).ready( function()  {
		document.getElementById('btn1').onclick = function() {
			//console.log(document.frm.data.value);
			$('input:checkbox:checked').each( function() {
				
			console.log($(this).val());
			});
			
		};	
	
	});

-------------------------------------------------------------

<body>

<button id="btn1">내용</button>
<br><hr><br>
<form name="frm">
	<input type="checkbox" id="ch1" name="ch" value="수박">수박<br>
	<input type="checkbox" id="ch2" name="ch" value="딸기">딸기<br>
	<input type="checkbox" id="ch3" name="ch" value="사과">사과<br>
	<input type="checkbox" id="ch4" name="ch" value="자몽">자몽<br>
</form>

</body>

---

select

	$( document ).ready( function()  {
		document.getElementById('btn1').onclick = function() {
			//console.log(document.frm.data.value);
			$('input:checkbox:checked').each( function() {
			
            //checkbox
			console.log($(this).val());
			});
            
            //select
			console.log('select :', $('#sel option:selected').val());
			
		};	
	
	});
</script>
</head>
<body>

<button id="btn1">내용</button>
<br><hr><br>
<form name="frm">
	<input type="checkbox" id="ch1" name="ch" value="수박">수박<br>
	<input type="checkbox" id="ch2" name="ch" value="딸기">딸기<br>
	<input type="checkbox" id="ch3" name="ch" value="사과">사과<br>
	<input type="checkbox" id="ch4" name="ch" value="자몽">자몽<br>
	<br>
	
	<select id="sel">
	<option value="사과">사과</option>
	<option value="자몽">자몽</option>
	<option value="딸기">딸기</option>
	<option value="멜론">멜론</option>
	</select>
</form>

css 정보 가져오기

<style type="text/css">
	.c1 { color: coral; }
	.c2 { color: pink; }
	.c3 { color: red; }
</style>

-----------------------------

<script type="text/javascript">
	$( document ).ready( function()  {
		document.getElementById('btn1').onclick = function() {
        1. 하나의 정보만 가져옴
			console.log($('h2').css('color')); //css 설정한 color임
		
        2.	다 가져옴(each)
			$('h2').css('color', function(index, item) {
				console.log(item);
			})
		}
	
	});
</script>

-----------------------------

<body>
<button id="btn1">내용</button>
<br><hr><br>

<h2 class="c1">header-1</h2>
<h2 class="c2">header-2</h2>
<h2 class="c3">header-3</h2>
</body>

1. 

2. 

---

🌙 색깔 변경

1. 전부 다 변경
document.getElementById('btn2').onclick = function() {
				$('h2').css('color', 'cyan');
			};
            

2. 각각 색을 줘서 변경
document.getElementById('btn2').onclick = function() {
				//$('h2').css('color', 'cyan');
				const colors = ['purple', 'black', 'aqua']; //각각 순서대로 들어감
				
				$('h2').css('color', function(index){
					return colors[index];
				});
			};



------------------------------------------            
<button id="btn2">변경</button>            

1. 

2. 

---

🌙 addClass : 클래스 추가 / 삭제

<script type="text/javascript">
		$( document ).ready( function()  {
			1. 클래스 추가
            document.getElementById('btn1').onclick = function() {
				$('h2').addClass('c');
			};

			2. 클래스 삭제
			document.getElementById('btn2').onclick = function() {
				$('h2').removeClass('c');

			};
            
            3. 토글(껐다 켰다 하기)
            document.getElementById('btn2').onclick = function() {
				$('h2').toggleClass('c');

			};
		});
</script>
    
-----------------------------------------------------------------

<body>

<button id="btn1">내용</button>
<button id="btn2">변경</button>
<button id="btn3">토글</button>
<br><hr><br>

<h2 >header-1</h2>
<h2 >header-2</h2>
<h2>header-3</h2>


</body>

1. 

2. 

---

🌙 jQuery 이벤트 처리

이벤트 사용 방법

1.
$('이벤트 대상').on('이벤트', function() {
		처리
});


2.
$('이벤트 대상').이벤트(function() {
		처리
});

1. 버튼 클릭
$( document ).ready( function()  {
	$('#btn1').click(function() {
		alert('btn1 클릭');
	});

2. 버튼에 마우스를 댈시 처리됨
$('#btn2').mouseover(function() {
		alert('btn2 처리');
	});
			
3. 버튼 클릭2
$('#btn3').on( 'click', function() {
	alert('btn3 클릭');
});


4.이벤트 통합 출력
$('#btn2').on('click mouseover mouseleave', function() {
		console.log('btn2 마우스 이벤트');  <-- 뭘 하든 이게 출력
});


4-1. 사용한 이벤트 별로 따로 콘솔에  출력
$('#btn2').on({
	'click':function() {
    	console.log('click');
    },
    mouseover :function() {
       	console.log('mouseover');
    },
    mouseleave: :function() {
        console.log('mouseleave');

    },
	}
});
            

1,3.

---

버튼 클릭

1. 각각 클릭값 다르게 하기
$( document ).ready( function()  {
			$('button').on('click', function() {
				alert('버튼 클릭 : ' + $(this).attr('id'));
			});
			
		});
        
--------------------------------------        
        
<body>
<button id="btn1">버튼 1</button>
<button id="btn2">버튼 2</button>
<button id="btn3">버튼 3</button>
</body>

🌙 ajax 요청하기

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
	<script type="text/javascript">
		// ready == window.onload
		$( document ).ready( function()  {
			$('#btn1').on('click', function() {
				$.ajax({
					url: './data/csv1.jsp',
					type: 'get',
					dataType: 'text',
					success: function(csvData) {
						console.log('성공', typeof csvData);						
						console.log('성공', csvData);						
					},
					error: function(err) {
						console.log('실패', err.status);
						console.log('실패', err.responseText);
					}
				})
			});
		});
	</script>
    
 ------------------------------------------------------------------
 
 <body>
<button id="btn1">요청</button>
<br><hr><br>
</body>

1. 성공시
   

2. 실패시
   

---

🌙 dataType : ~ <- ~에 따라 타입이 정해짐

dataType: 'xml'

위 코드에서 url, dataType 만 변경

url: './data/xml1.jsp',

dataType: 'xml',

dataType: 'json'

url: './data/json1.jsp',

dataType: 'json',

🌙 응용 xml 데이터 가져오기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
	<script type="text/javascript">
		// ready == window.onload
		$( document ).ready( function()  {
			$('#btn1').on('click', function() {
				$.ajax({
					url: './data/xml1.jsp',
					type: 'get',
					dataType: 'xml',  //이것에 따라 데이터 타입이 따라감
					success: function(xmlData) {
						
						let html = '<table border="1" width="800">';
						$(xmlData).find('book').each(function() {
							html += '<tr>';
							html += '<td>' + $(this).find('name').text() + '</td>';
							html += '<td>' + $(this).find('publisher').text() + '</td>';
							html += '<td>' + $(this).find('author').text() + '</td>';
							html += '<td>' + $(this).find('price').text() + '</td>';
							html += '</tr>';	
						});									
							html += '</table>';
							
							$('#result').html(html);
				
					},
					error: function(err) {
						console.log('실패', err.status);
						console.log('실패', err.responseText);
					}
				})
			});
		});
	</script>
</head>
<body>


<button id="btn1">요청</button>
<br><hr><br>

<div id="result"></div>

</body>
</html>