본문 바로가기
🎧️ 강의듣기

jQuery 문법

조용한여우 2021. 7. 13. 12:13

ECMAScript ( javascript / js )

    - 기본 문법

        문법

        내장 라이브러리

            기본객체

            BOM

            DOM

        

        ajax

* 이클립스 → Visual Studio Code(Atom), WebStorm

* jQuery

        * 사전식

        Core

            1. selector

            2. 메서드

            3. ajax

 

            * 라이브러리

                    zipping

                    CDN

 

        UI

        Moblie

        ...

// 이렇게 축약 시킬수있다
$( () => {
				
});

 

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">
			$( () => {
				// 신형 문법이 적용이 안됨
				$( '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>

 

find01.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.min.js"></script>
		<script type="text/javascript">
			$( () => {
				// console.log( $(document).find('h3') );
				$( document ).find('h3').each((index, item) =>{
					console.log( index, item.innerHTML );
				});
			});
		</script>
	</head>
<body>
	<h3 class="select">Header-0</h3>
	<h2>Header-1</h2>
	<h3 class="select">Header-2</h3>
	<h2>Header-3</h2>
	<h3 class="select">Header-4</h3>
	<h2>Header-5</h2>

</body>
</html>

 

find02.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.min.js"></script>
		<script type="text/javascript">
			let xml = '';
			xml += '<friends>';
			xml += '	<friend>';
			xml += '		<name>tester1</name>';
			xml += '		<language>Ruby</language>';
			xml += '	</friend>';
			
			xml += '	<friend>';
			xml += '		<name>tester2</name>';
			xml += '		<language>Basic</language>';
			xml += '	</friend>';
			
			xml += '	<friend>';
			xml += '		<name>tester3</name>';
			xml += '		<language>Javascript</language>';
			xml += '	</friend>';
			
			xml += '</friends>';
			
			$( () => {
				console.log( typeof(xml) );
				const xmlDoc = $.parseXML(xml);
				console.log( typeof(xmlDoc) );
				
				// console.log( $( xmlDoc ).find( 'friend' ) );
				$( xmlDoc ).find( 'friend' ).each( function() {
					// console.log( this );
					// console.log( $(this) );
					console.log( $(this).find( 'name' ).text() );
					console.log( $(this).find( 'language' ).text() );
				});
			});
		</script>
	</head>
<body>

</body>
</html>

 

class01.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.min.js"></script>
		<style type="text/css">
		.high-light { background-color: yellow; }
	</style>
		<script type="text/javascript">
			$( () => {
				document.getElementById('btn1').onclick = () => {
					$( 'h2' ).addClass('high-light');
				}
				document.getElementById('btn2').onclick = () => {
					$( 'h2' ).removeClass('high-light');
				}
				document.getElementById('btn3').onclick = () => {
					$( 'h2' ).toggleClass('high-light');
				}
			});
		</script>
	</head>
	
<body>
<button id="btn1">클래스 추가</button> &brvbar;
<button id="btn2">클래스 제거</button> &brvbar;
<button id="btn3">클래스 토글</button><br />
<hr />
<br />

	<h2>item-0</h2>
	<h2>item-1</h2>
	<h2>item-2</h2>
	<h2>item-3</h2>
	
</body>
</html>

 

att01.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.min.js"></script>
		<script type="text/javascript">
			$( () => {
				document.getElementById( 'btn1' ).onclick = () => {
					// 가장 상위에 하나 내용만 출력됨
					console.log( $( 'img' ).attr( 'src' ) );
					
					// 전체를 출력하는 법
					$( 'img' ).each( function() {
						console.log( $(this).attr( 'src' ) );
					});
				}
				
				// 값을 줄땐 하나에만 적용되는게 아니라 전체에 적용됨
				document.getElementById( 'btn2' ).onclick = () => {
					$( 'img' ).attr( 'height', 100 );
					/* $( 'img' ).attr( 'width', 100 );
					
					// 각각 속성주는 법
					$( 'img' ).attr( 'width', (index) => {
						return ( index + 1 ) * 100;
					}); */
				}
				
				document.getElementById( 'btn3' ).onclick = () => {
					// 속성제거
					$( 'img' ).removeAttr( 'height');
				}
			});
		</script>
	</head>
<body>

	<button id="btn1">att 내용</button>
	<button id="btn2">att 추가</button>
	<button id="btn3">att 제거</button>
	<br /> <hr /> <br />
	<img src="./images/Chrysanthemum.jpg" width="150" />
	<img src="./images/Desert.jpg" width="150" />
	<img src="./images/Hydrangeas.jpg" width="150" />
	<img src="./images/Jellyfish.jpg" width="150" />
</body>
</html>

 

css01.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>
		<style type="text/css">
			.first { color: red; }
			.second { color: pink; }
			.third { color: orange; }
		</style>
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$( () => {
				document.getElementById( 'btn1' ).onclick = () => {
					// 맨처음것만 가져옴
					// console.log( $( 'h3' ).css( 'color' ) );
					
					$( 'h3' ).css( 'color', (index, item) => {
						console.log(index, item);
					});
				};
				
				document.getElementById( 'btn2' ).onclick = () => {
					
					// 각자 적용
					// $( 'h3' ).eq('0').css( 'color', 'yellow' );
					// $( 'h3' ).eq('1').css( 'color', 'blue' );
					// $( 'h3' ).eq('2').css( 'color', 'green' );
					
					const colors = [ 'purple', 'black', 'red' ];
					$( 'h3' ).css( 'color', (index) => {
						return colors[index];
					});
				};
				
				
			});
		</script>
	</head>
<body>

	<button id="btn1">att 내용</button>
	<button id="btn2">att 추가</button>
	<br /> <hr /> <br />
	<h3 class="first" >Header-0</h3>
	<h3 class="second" >Header-1</h3>
	<h3 class="third" >Header-2</h3>
</body>
</html>

 

html01.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>
		<style type="text/css">
			.first { color: red; }
			.second { color: pink; }
			.third { color: orange; }
		</style>
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$( () => {
				document.getElementById( 'btn1' ).onclick = () => {
					const html = document.getElementById( 'result' );
					
					/*
					//<div id="result"><b>출력 내용</b></div>
					console.log( html );
					
					// <b>출력 내용</b>
					console.log( html.innerHTML );
					
					// 출력 내용
					console.log( html.textContent );
					*/
					
					console.log( $( '#result' ) );
					console.log( $( '#result' ).html() );
					console.log( $( '#result' ).text() );
				};
				
				document.getElementById( 'btn2' ).onclick = () => {
					$( '#result' ).html( '<b>새롭게 변경된 내용</b>' );
				};
			});
		</script>
	</head>
<body>

	<button id="btn1">내용</button>
	<button id="btn2">추가</button>
	<br /> <hr /> <br />
	<div id="result"><b>출력 내용</b></div>
</body>
</html>

 

gugudan.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>
		<style type="text/css">
			table, td{
				border: 2px solid #000;
				border-collapse: collapse;
			}
			table{
				width: 100%;
			}
			td{
				padding: 5px 5px;
			}
		</style>
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$( () => {
				document.getElementById( 'btn1' ).onclick = () => {
					let startDan = $( '#startDan' ).val();
					let endDan = $( '#endDan' ).val();
					let danTextNum = startDan - 1;
					let result = '';
					result += '<table border="1">'
					for( let i = startDan - 1; i <= endDan; i++ ){
						
						result += '<tr>';
						
						for( let j = 0; j <= 9; j++ ){
							
							
							if(danTextNum == i && j == 0){
								result += '<td></td>';
							}else if( danTextNum == i ){
								result += '<td>X' + j + '</td>';
							}else if( j == 0 ){
								result += '<td>' + i + '단</td>';
							}else{
								result += '<td>' + i + ' * ' + j + ' = ' + i * j + '</td>';	
							}
							
						}
						result += '</tr>';
					}
					result += '</table>'
					$( '#result' ).html( result );
				};
			});
		</script>
	</head>
<body>

	단 <input type="text" id="startDan" /> ~
	<input type="text" id="endDan" /> 
	<button id="btn1">출력</button>
	
	<br /> <hr /> <br />
	<div id="result"><b>출력 내용</b></div>
</body>
</html>

결과:

 

저작자표시

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

jQuery-ui accordion / datepicker / dialog  (0) 2021.07.15
jquery-ui  (0) 2021.07.14
ajax(websocket) jQuery 사용법  (0) 2021.07.12
web/xml/json/jsonparse  (0) 2021.07.08
리눅스 활용/web1.0/web2.0/csv/xml/json/  (0) 2021.07.07

'🎧️ 강의듣기' Related Articles

티스토리툴바