ajax(websocket) jQuery 사용법

ajax (websocket)

client

- front-end

- UI/UX 중심

- javascript ( ECMAScript )

- spa ( Single Page Application )

서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를

동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹 사이트를 말한다.

server

- back-end

- 데이터 ( xml, json, api )

- java, c#, python ....

* MVC model2 ...

* 풀스택

* 테크 트리

https://byul91oh.tistory.com/96

2021 웹 개발 테크트리 총정리(나는 무엇을 배워야 할까?)

안녕하세요 꼬바리입니다. 개발 공부를 시작할 때 필요한 언어들입니다. 이 모든 걸 다 할 수도 하지 않아도 되지만 유튜브를 보고 저도 정리가 된 거 같아 초보 개발자님들이 도움이 될 거 같아

byul91oh.tistory.com

jQuery

core

jquery.com

mobile

라이브러리 제공

compress

← zipping ( 소스 내부의 공백, 탭, 엔터를 제거해서 다운로드 파일 사이즈를 축소 )

uncompress

window.onload - dom

window.onload

$( document ).ready(function(){
	
});


$( document ).ready( function() {
	console.log( 'Hello jQuery1' );
});

jQuery( document ).ready( function() {
	console.log( 'Hello jQuery2' );
});

$( function() {
	console.log( 'Hello jQuery3' );
});

결과:

호출은 어디든 상관없다.

( body에서든 상관 X )

jQuery Core

js → selector( css selector와 동일 ) → html

$( document ).ready( function() {
	// $('선택자').메서드
	// $('선택자').css( '속성', '값' );
	
	// 전체 선택자
	$('*').css( 'color', 'red' );
});

결과:

// 같은 의미
$( document ).ready( function() {
	$('h1').css( 'color', 'red' );
	$('h1').css( {
		'color' : 'red'
	});
    
    $('h' + '1').css('color', 'blue');
});

결과:

$( document ).ready( function() {
	// h1태그이면서 class가 c2일때 적용
	$('h1.c2').css('color', 'yellow');
});

$( document ).ready( function() {
      // 클래스가 c1 c2일때 적용
      $('.c1.c2').css('color', 'yellow');
});

결과:

[attribute~="value"] : 특정문자 포함하는

[attribute^="value"] : 값으로 시작하는

[attribute$="value"] : 값으로 끝나는

$( document ).ready( function() {
	// 입력 양식
	// type이 text인것만
	$('input:text').css( 'background-color', 'yellow' );
});

결과:

select태그에 선택된 값 가져오기

<%@ 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 type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$( document ).ready( function() {
				document.getElementById('btn').onclick = function(){
					console.log( $( 'select > option:selected').text() );
				}
			});
		</script>
	</head>
<body>
	<select id="sel">
		<option selected>사과</option>
		<option>수박</option>
		<option>딸기</option>
		<option>참외</option>
	</select>
	<button id="btn">선택</button>
</body>
</html>

결과:

홀수와 짝수

<%@ 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 type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$( document ).ready( () => {
				$( 'table' ).css( 'width', '800' );
				$('tr:odd').css( 'background-color', '#f9f9f9' ); // 홀수
				$('tr:even').css( 'background-color', '#9f9f9f' ); // 짝수
                
				// $('tr:nth-child(2n)').css( 'background-color', '#f9f9f9' ); // 홀수
				// $('tr:nth-child(2n+1)').css( 'background-color', '#9f9f9f' ); // 짝수
                
                
				// $('tr:first').css( 'background-color', '#000000' ); // 첫번째
				// $('tr:first').css( 'color', '#ffffff' ); // 첫번째
                
				// $('tr:first').css({
				// 	'background-color' : '#000000',
				//	'color' : '#ffffff'
				// });
                $('tr:eq(0)').css({
					'background-color' : '#000000',
					'color' : '#ffffff'
				});
			});
		</script>
	</head>
<body>
	<table>
		<tr>
			<td>이름</td>
			<td>혈액형</td>
			<td>지역</td>
		</tr>
		
		<tr>
			<td>홍길동</td>
			<td>AB형</td>
			<td>서울시 송파구</td>
		</tr>
		
		<tr>
			<td>박문수</td>
			<td>B형</td>
			<td>서울시 구로구</td>
		</tr>
		
		<tr>
			<td>이몽룡</td>
			<td>O형</td>
			<td>서울시 마포구</td>
		</tr>
		
		<tr>
			<td>성춘향</td>
			<td>A형</td>
			<td>서울시 강서구</td>
		</tr>
	</table>
</body>
</html>

nth-child

$( document ).ready( () => {
	$( 'table' ).css( 'width', '800' );
	
	// $('tr:first').css( 'background-color', '#000000' ); // 첫번째
	// $('tr:first').css( 'color', '#ffffff' ); // 첫번째
	/* $('tr:nth-child(2n+3)').css({
		'background-color' : 'red'
	}); */
	$('tr:nth-child(3n)').css( 'background-color', 'red' );
	$('tr:nth-child(3n+1)').css( 'background-color', 'blue' );
	$('tr:nth-child(3n+2)').css( 'background-color', 'yellow' );
});

each - 배열의 조작을 쉽게한다.

each01.jsp

<%@ 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 type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$( document ).ready( function() {
				// each
				const array = [
					{ name: 'daum', link: 'https://www.daum.net'},
					{ name: 'naver', link: 'https://www.naver.com'},
					{ name: 'google', link: 'https://www.google.co.kr'},
				];
				// 일반적인 처리
				for(let i = 0; i < array.length; i++){
					console.log( array[i].name, ' / ', array[i].link );
				}
				
				// 함수적인 처리
				array.forEach( function(item) {
					console.log( item.name, ', ', item.link );
				});
				
				// jquery 처리
				// $.each( array, function(index, item) {
				// 	console.log( item.name,' : ',item.link );
				// });
				let output = '';
				$.each( array, function(index, item) {
					output += '<a href="' + item.link + '">';
					output += '		<h3>' + item.name + '</h3>';
					output += '</a>';
				});
				// $('body').append(output);
				
				const object = { name: '홍길동', region: '서울시 강남구', part: '베이스' };
				$.each( object, function( key, value ) {
					console.log( key, ':', value );
				});
			});
		</script>
	</head>
<body>

</body>
</html>

each02.jsp

<%@ 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 type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$( document ).ready( function() {
				$( 'h2' ).each(function (index, item){
					// 텍스트값 뽑기
					console.log( item.innerHTML );
				});
			});
		</script>
	</head>
<body>
	<h2>item 0</h2>
	<h2>item 1</h2>
	<h2>item 2</h2>
	<h2>item 3</h2>
	
</body>
</html>

extend01.jsp - 객체를 추가시킴

<%@ 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 type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$( document ).ready( function() {
				let object = { name: '홍길동'};
				
				// object.region1 = '서울시 종로구';
				// object.part1 = '리더';
				$.extend( object,
					{region: '서울시 양천구', part: '베이스'},
					{region: '서울시 서초구', part: '베이스'}
				);
				
				console.log( object );
			});
		</script>
	</head>
<body>

</body>
</html>

noconflict01.jsp - $를 더이상 사용하지 못한다. $대신 jQuery를 사용하면 정상 작동

<%@ 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 type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
		$.noConflict();
        // J로 jQuery를 대신한다.
		const J = jQuery;
			//$( document ).ready( function() {
			J( document ).ready( function() {
				console.log( 'Hello jQuery1' );
			});
		</script>
	</head>
<body>

</body>
</html>

filter01.jsp

<%@ 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 type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$( document ).ready( function() {
				/* $( 'h3:even' ).css({
					backgroundColor : 'black',
					color : 'white'
				}); */
				/* $( 'h3' ).filter(':odd').css({
					backgroundColor : 'black',
					color : 'white'
				}); */
				
				const h3 = $( 'h3' );
				console.log(h3);
				h3.filter(':even').css( 'background-color', 'black' );
				h3.filter(':odd').css( 'background-color', 'green' );
			});
		</script>
	</head>
<body>
	<h3>header-0</h3>
	<h3>header-1</h3>
	<h3>header-2</h3>
	<h3>header-3</h3>
	<h3>header-4</h3>
	<h3>header-5</h3>
</body>
</html>

filter02.jsp

<%@ 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 type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$( document ).ready( function() {
				$('h3').filter(function(index, item){
					// each
					// console.log( item );
					/* let flag = false;
					if( index %2 == 0 ){
						flag = true;
					} */
					return index %2 == 0;
				}).css( 'background-color', 'blue' );
			});
		</script>
	</head>
<body>
	<h3>header-0</h3>
	<h3>header-1</h3>
	<h3>header-2</h3>
	<h3>header-3</h3>
	<h3>header-4</h3>
	<h3>header-5</h3>
</body>
</html>

end( ) - 지금까지 filter 한 것 말고 다시 filter 할때 사용

<%@ 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 type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$( document ).ready( function() {
				/* const h3 = $( 'h3' );
				h3.filter(':even').css( 'background-color', 'black' );
				h3.filter(':odd').css( 'background-color', 'green' ); */
				$( 'h3' ).filter(':even').css( 'background-color', 'black' ).end().filter(':odd').css( 'background-color', 'green' );
				
			});
		</script>
	</head>
<body>
	<h3>header-0</h3>
	<h3>header-1</h3>
	<h3>header-2</h3>
	<h3>header-3</h3>
	<h3>header-4</h3>
	<h3>header-5</h3>
</body>
</html>

eq01.jsp

<%@ 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 type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$( document ).ready( function() {
				$('h3').eq(0).css( 'background-color', 'red' ); // 첫번째
				$('h3').eq(1).css( 'background-color', 'blue' ); // 두번째
				$('h3').eq(-1).css( 'background-color', 'yellow' ); // 마지막
				$('h3').eq(-4).css( 'background-color', 'yellow' );
			});
		</script>
	</head>
<body>
	<h3>header-0</h3>
	<h3>header-1</h3>
	<h3>header-2</h3>
	<h3>header-3</h3>
	<h3>header-4</h3>
	<h3>header-5</h3>
</body>
</html>

add01.jsp

<%@ 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 type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$( document ).ready( function() {
				// $('h2, h3').css( 'background-color', 'blue' );
				
				// filter의 반댓말 
				$('h2').css( 'background-color', 'red' ).add('h3').css( 'background-color', 'blue' );
			});
		</script>
	</head>
<body>
 <h2>Header-0</h2>
 <h3>Header-1</h3>
 <h2>Header-2</h2>
 <h3>Header-3</h3>
</body>
</html>

is01.jsp

<%@ 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 type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$( document ).ready( function() {
				// is class가 s인 것
				$( 'h3' ).each(function(){
					if( $(this).is('.s') ){
						$(this).css('background-color', 'orange');	
					}
					
				});
			});
		</script>
	</head>
<body>

	<h2 class="s">Header-0</h2>
	<h3 class="s">Header-1</h3>
	<h2>Header-2</h2>
	<h3 class="s">Header-3</h3>
	<h2>Header-4</h2>
	<h3>Header-5</h3>
</body>
</html>

저작자표시

'🎧️ 강의듣기' 카테고리의 다른 글

jquery-ui (0)	2021.07.14
jQuery 문법 (0)	2021.07.13
web/xml/json/jsonparse (0)	2021.07.08
리눅스 활용/web1.0/web2.0/csv/xml/json/ (0)	2021.07.07
[리눅스] tomcat, jdbc, maradb, vsftpd, WAR, filezilla (0)	2021.07.06

여우 LOG

ajax(websocket) jQuery 사용법

'🎧️ 강의듣기' 카테고리의 다른 글

티스토리툴바

ajax(websocket) jQuery 사용법

'🎧️ 강의듣기' 카테고리의 다른 글

'🎧️ 강의듣기' Related Articles

티스토리툴바