웹 기초 18강 - jQuery

jQuery는 자바스크립트를 쉽게 쓸 수 있도록 만든 라이브러리

jQuery 파일을 다운로드하는 방법
1. jQuery는 http://www.jquery.com에서 다운로드
다운로드 후 사용
2.구글이나 마이크로소프트에서 제공하는 CDN을 사용하여
jQuery 파일을 포함하는 방법
공개 서버로부터 네트워크를 통하여 웹페이지를 실행할 때마다 다운로드 받을 수도 있다 :
(CDN:Content Delivery Network)방식

jQuery CDN
Google CDN
Microsoft CDN

script방식 =>document.getElementById('result1').style.backgroundColor ='red';
jQuery방식 =>$('#result1').css('background-color', 'red')

스크립트에서 html요소에 접근하기 위해서는
1. window.onload=function(){}
2. $(document).ready(function(){} - 사용시 라이브러리 있어야 함

$(...) 안에 선택자를 넣어서 원하는 요소를 선택하고, 선택된 요소에 대하여 여러 가지 조작을 한다.
$(‘h2’).css("background", "blue")
$(“p”).show() : 모든 <p> 요소들을 찾아서 화면에 표시한다. 
$(“.group1”).slideup() : class=group1인 요소를 슬라이드업 방식으로 표시한다. 
$(“#id9”).hide() : id=id9인 요소를 화면에서 감춘다.

jQuery는 메소드 체이닝이 가능

$(“h1”).css(“background-color”,”yellow”).css(“color”, “red”)

기본선택자
타입선택자 (요소선택자) html 태그
$(‘h1’) , $(‘p’)
여러 개의 태그 선택 : $(‘h1, p’).css(‘color’, ‘orange’);
.class 선택자 : $(‘.name’)
#id선택자 : $(‘#name’)
전체선택자 : $(‘’)

문서로드된 후에 호출되는 콜백 함수
1. window.onload = function(){ }
2. $(document).ready(function(){ })
3. $( function(){ })

$('h1').css('color','blue');
$('h1').first().css('color','red');
$('h1').eq(2).css('color','green');

$( ) : jQuery 함수 - $()함수의 인수로 다른 함수를 전달하면 문서가 로드될 때 호출될 콜백 함수를 등록한다 - window.onload 이벤트와 유사 , document.ready 이벤트에 대한 이벤트핸들러 함수 지정 , 로드 직후 곧바로 실행 $(선택자,[컨텍스트]) 선택자로 작업대상 엘리먼트를 검색한다 선택된 엘리먼트는 jQuery객체에 저장되며 이후 메서드를 호츨하 여 검색된 엘리먼트에 여러가지 조작을 가할 수 있다

컨텍스트는 검색의 시작점을 지정 , 생략하면 문서전체에서 검색
컨텍스트를 지정하면 그 하위로 검색 범위가 제한 

 var myJquery1 = $(“p”);
 var myJquery2 = $(“p”, document.forms[2]); 
 $(‘p’, this)  ->  this안에 p  this는 p의  부모가 됨

=> document는 ""로 묶을 수 없기 때문에 컨텍스트를 사용함

$(element) DOM 엘리먼트 를 인수로 전달하면 이 객체를 감싸는 jQuery 객체를 리턴 jQuery 메소드 사용가능

var elem = document.getElementsByTagName(‘h1’)[0];
elem.style.color = ‘red’;

getElementsByTagName 메서드가 리턴하는 것은 DOM객체 배열이며
DOM 객체에 대해 css()나 text() html()같은 jQuery 메소드를 직접 호출할 수 없다
그래서 이 객체를 $()함수로 전달하여 jQuery 객체로 랩핑하면
여러 가지 편리한 jQuery 메소드를 호출 할 수 있다

$(elem).css(‘color’,’red’);

$(“html”), $(“html”, {propertis}) 인수로 전달된 html문자열로 새로운 엘리먼트를 직접 생성한다 생성된 엘리먼트를 DOM트리의 원하는 부분에 삽입하여 실행 중에 문서를 만들 수 있다 propertis 는새로 만들어진 요소의 속성, 이벤트 함수 등을 지정 
<body>
 <button type=“button”>새로만들기</button>
<script>
           var elem =$(‘<p id=‘p1’ onclick=“proc1()”>Hello jQuery.</p>')
           elem.appendTo(‘body’);
</script>
<body>

test1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
/* window.onload=function(){
	document.getElementById('result1').style.backgroundColor ='red';
	$('#result1').css('background-color', 'red')//위와 같은 코드
} */

//위의 코드를 jQuery로 바꾸면 다음과 같다.
$(document).ready(function(){
	$('#result1').css('background-color', 'red')
	//document.getElementById('result1').style.backgroundColor ='red';
})
</script>
</head>
<body>

<div class="box">
 실행시 result1의 배경색을 바꾼다<br>
 스크립트를 body 위에 코딩<br>
 스크립트에서 html요소에 접근하기 위해서<br>
 window.onload=function(){}<br>
 $(document).ready(function(){} - 사용시 라이브러리 있어야 함<br>
 <br>
  <button type="button">확인</button>
  <div id="result1"></div>
 </div> 
</body>
</html>

test2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/jqpro/css/mystyle.css" type="text/css">
<script src="/jqpro/js/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="box">
 script의 위치를 body밑에 코딩<br>
 html요소에 직접 접근 가능하다.<br>
 window.onload = function(){} 문장이 없어도 실행됨<br>
 $(document).ready(function(){ }) 문장이 없어도 실행됨<br>
 <br>
  <button type="button">확인</button>
  <div id="result1"></div>
 </div> 

<script type="text/javascript">
$('#result1').css('background-color', 'green');
</script>
</body>
</html>

test3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="/jqpro/js/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
function proc1(){
	//전체 배경색을 변경
	$('*').css('background','yellow');
	
    // h1요소의 글자색을 파랑 
    //document.getElementsByTagName('h1')[0].style.color='blue';
    $('h1').css('color','blue');//전체 h1에 대한 style적용
    
    //위의 코드는 아래 코드를 한줄로 쓴 것
    //var vh = $('h1');
    //vh.css('color','blue');
    
    //id가 para인 요소의 글자색은 녹색
    //document.getElementById('para').style.color = 'green';
    $('#para').css('color','green');
    
    //class 가 sample요소의 글자색은 빨강
    //document.getElementsClassName('sample')[0].style.color = 'red';
    $('.sample').css('color','red');
	
}
</script>
</head>
<body>

<div class="box">
 <br>
 
 <br>
  <button type="button" onclick="proc1()">확인</button>
  <div id="result1">
  	<h1> 제목입니다 </h1>
	<h2 id="para"> 작은 제목입니다 </h2>
	<h2 class="sample"> 샘플입니다 </h2>
  </div>
 </div> 
</body>
</html>

클릭하이드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
function proc1(vh){
	$(vh).hide();
}

$(document).ready(function(){
	$('#result2 h2').on('click',function(){//콜백함수
		this.style.display="none"; //dom객체, dom객체방식으로 코딩
		//$(this).hide(); //jQuery객체, jQuery방식으로 코딩
	})
})
</script>

</head>
<body>

<div class="box">
h2요소를 클릭하면 화면에서 사라진다<br>
&lt;h2 onclick="proc(this)">
 <br>
  
  <div id="result1">
	<h2 onclick="proc1(this)">클릭하면 사라집니다1.</h2>
	<h2 onclick="proc1(this)">클릭하면 사라집니다2.</h2>
	<h2 onclick="proc1(this)">클릭하면 사라집니다3.</h2>
	<h2 onclick="proc1(this)">클릭하면 사라집니다4.</h2>
	<h2 onclick="proc1(this)">클릭하면 사라집니다5.</h2>
	<h2 onclick="proc1(this)">클릭하면 사라집니다6.</h2>
	<h2 onclick="proc1(this)">클릭하면 사라집니다7.</h2>
	<h2 onclick="proc1(this)">클릭하면 사라집니다8.</h2>
	<h2 onclick="proc1(this)">클릭하면 사라집니다9.</h2>
	<h2 onclick="proc1(this)">클릭하면 사라집니다10.</h2>
  </div>
 </div> 
 
 <div class="box">
	h2요소를 클릭하면 화면에서 사라진다<br>
	스크립트에서 h2요소에 클릭이벤트 설정<br>
	$('#result2 h2').on('click',function(){ })
 <br>
  
  <div id="result2">
	<h2>클릭하면 사라집니다1.</h2>
	<h2>클릭하면 사라집니다2.</h2>
	<h2>클릭하면 사라집니다3.</h2>
	<h2>클릭하면 사라집니다4.</h2>
	<h2>클릭하면 사라집니다5.</h2>
	<h2>클릭하면 사라집니다6.</h2>
	<h2>클릭하면 사라집니다7.</h2>
	<h2>클릭하면 사라집니다8.</h2>
	<h2>클릭하면 사라집니다9.</h2>
	<h2>클릭하면 사라집니다10.</h2>
  </div>
 </div> 
</body>
</html>

문서로드후 콜백

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
$(function(){
	$('h1').css('color','blue');
	$('h1').first().css('color','red');
	$('h1').eq(2).css('color','green');
})

/*
$(document).ready(function(){ 
	$('h1')
})

window.onload = function(){ 
	$('h1')
}
*/

//$('h1') - 아직 body태그가 실행되지 않아서 이렇게 사용 불가
</script>

</head>
<body>

<div class="box">
 문서로드된 후에 호출되는 콜백 함수<br>
 1. window.onload = function(){ }<br>
 2. $(document).ready(function(){ })<br>
 3. $( function(){ })<br>
 <br>
 $('h1').css('color','blue');<br>
 $('h1').first().css('color','red');<br>
 $('h1').eq(2).css('color','green');<br>
 
 <br>
  <div id="result1">
  	<h1>무궁화 꽃이 피었습니다</h1>
  	<h1>바람에 낙엽이 춤을 춥니다</h1>
  	<h1>꼭꼭 숨어라 머리카락 보일라</h1>
  	<h1>꼭꼭 숨어라 머리카락 보일라</h1>
  	<h1>꼭꼭 숨어라 머리카락 보일라</h1>
  </div>
 </div> 
</body>
</html>

컨텍스트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
$(function(){
	//모든 p태그를 선택
	$('p').css('border','2px solid blue');
	
	//클릭한 div(this) 내부의 p태그를 선택
	$('.box div').on('click', function(){
		$('p',this).css('font-size', '+=3px')
	})
	
	//첫번째 form 내부의 p태그를 선택 
	$('p',document.forms[0]).css('background','yellow');
})
</script>
</head>
<body>

<div class="box">
	//모든 p태그를 선택<br>
	$('p').css('border','2px solid blue');<br>
	<br>
	//클릭한 div(this) 내부의 p태그를 선택<br>
	$('.box div').on('click', function(){<br>
		$('p',this).css('font-size', '+=3px')<br>
	})<br>
	<br>
	//첫번째 form 내부의 p태그를 선택 <br>
	$('p',document.forms[0]).css('background','yellow');<br>
 
 <br>
  <div>
  	<p>무궁화 꽃이 피었습니다</p>
  </div>
  
  <p>흰 눈이 펄펄 내려옵니다</p>
  
  <form>
  	<p>우리집 강아지는 복슬 강아지</p>
  </form>
  
  <div>
  	<p>무궁화 꽃이 피었습니다</p>
  </div>
  
    
 </div> 
</body>
</html>

jQuery 랩핑

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
function proc1(){
	
	//dom객체 =>.css사용 불가
	var elem = document.getElementById('result1');
	elem.style.background='blue';
	
	//dom객체인 elem에 $()로 감싸면 jquery로 변환된다.
	//elem.css('background', 'green'); ===> 오류
	$(elem).css('background', 'green');
}

$(function(){
	$('#btn').on('click', function(){
		
		//elem은 dom객체 변수
		//css()함수를 사용하기 위해서 $(elem)
		var elem = document.getElementById('result2');
		$(elem).css('background','yellow');
		
		//jq는 jquery객체 변수
		var jq = $('result2');
		jq.css('background','pink');
		
	})	
})
</script>
</head>
<body>

<div class="box">
 이벤트 설정<br>
 1. 태그요소에서 :  &lt;button type="button" onclick="proc1()"><br>
 
 <br>
  <button type="button" onclick="proc1()">확인</button>
  <div id="result1"></div>
 </div> 
 
 <div class="box">
 이벤트 설정<br>
 2. script에서 : <br>
 	$('#btn').on('click', function(){})<br>
 	$('button').eq(1).on('click', function(){})<br>
 
 <br>
  <button type="button" id="btn">확인</button>
  <div id="result2"></div>
 </div> 
 
</body>
</html>

새로운 요소 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>

<style>
img{
	width: 200px;
	height: 200px;
}
</style>
<script type="text/javascript">
//function proc1(){
//}
/* 
//html body태그의 버튼 태그에 onclick=""이 없을 때
$(function(){
	$('button').eq(0).on('click', function(){
		
	})
	$('button').eq(1).on('click', function(){
		
	})
})
 */
proc2 = () =>{
	//vimg = $('<img onclick="alert(\'hello\')" src="../images/가구1.jpg" alt="가구1.jpg">');
	vimg = $('<img>', {
		'src' : '../images/가구1.jpg',
		'alt' : '가구1.jpg',
		'click' : function(){
			alert('Hello')
		}
	})
	
	vimg.appendTo($('#result2'));
}
proc1 = () =>{
	ptag = $('<p id="p1" onclick="alert(\'hello\')">Hello</p>');
	//$('#result1').append(ptag);
	ptag.appendTo($('#result1'));	
	
	//-----------------------------------------------------//
	/* ptag = document.createElement('p');
	ptag.id = 'p1'; //ptag.setAttribute('id', 'p1');
	ptag.onclick = function(){
		alert("Hello");
		
	}
	
	txt = document.createTextNode("Hello");
	
	ptag.appendChild(txt);
	
	document.getElementById('result1').appendChild(ptag); */
	
}
</script>

</head>
<body>

<div class="box">
 버튼을 클릭하면 p태그를 생성하여 result1에 추가한다<br>
 <br>
  <button type="button" onclick="proc1()">확인</button>
  <div id="result1"></div>
 </div> 
 
 <div class="box">
 버튼을 클릭하면 img태그를 생성하여 result2에 추가한다<br>
 <br>
  <button type="button" onclick="proc2()">확인</button>
  <div id="result2"></div>
 </div> 
 
</body>
</html>

이미지생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$('button').on('click', function(){
		vimg = $('<img>',{
			'src' : '../images/가구1.jpg',
			'alt' : '가구1.jpg',
			'click' : function(){ //()=>일 때는 this가 람다함수 자신임
				$(this).css('border','5px solid red') //이 this는 img이다
			}
		})
		vimg.appendTo($('#result1'))
	})
})

</script>
</head>
<body>

<div class="box">
 이미지생성 버튼을 클릭하면 새로운 이미지를 생성하여 result1에 추가한다   
 <br>
  <button type="button">이미지생성</button>
  <div id="result1"></div>
 </div> 
</body>
</html>
자바 2d 그림 예시 공유 (자바 그림으로)
로마자에서 숫자로 바꾸기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage