πŸ’»

JavaScript 의 이해 - [jQuery] Selector(1) : κΈ°λ³Έ, 상속(μžμ‹/ν˜•μ œ) λ³Έλ¬Έ

KITRI/JAVASCRIPT

JavaScript 의 이해 - [jQuery] Selector(1) : κΈ°λ³Έ, 상속(μžμ‹/ν˜•μ œ)

λ˜νš¨λ‹ˆ 2020. 7. 20. 16:26

λ‹€μš΄λ‘œλ“œ 및 μ„€μΉ˜

 

 

https://jquery.com/

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

 

download jQuery

인터넷 μ΅μŠ€ν”Œλ‘œλŸ¬μ—μ„œ λ‹€μš΄λ°›λŠ”λ‹€.

 

 

 

01_Object.html

 

 

 

04_IdSelector.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="../jquery.js"></script>
<script type="text/javascript">
	// 1.
	/* var obj = new jQuery(document); //μ„ νƒμž λ˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 객체
	obj.ready(testFun);
	
	function testFun(){
		alert("jQuery μ‹œμž‘μž…λ‹ˆλ‹€.");
	} */
	
	// 2.
	/* new jQuery(document).ready(function (){  // new Date().getDay() 처럼 μ“°λŠ” 것과 λ˜‘κ°™μ€ κ°œλ…
		alert("jQuery μ‹œμž‘μž…λ‹ˆλ‹€.");
	}); */
	
	// 3.
	/* $(document).ready(function(){
		alert("jQuery μ‹œμž‘μž…λ‹ˆλ‹€.");
	}); */
	
	//4.
	$(function(){
		alert("jQuery μ‹œμž‘μž…λ‹ˆλ‹€.");
	});
</script>
</head>
<body>
	
</body>
</html>

 

05_ClassSelector.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="../jquery.js"></script>
<script type="text/javascript">
	// 1.
	/* var obj = new jQuery(document); //μ„ νƒμž λ˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 객체
	obj.ready(testFun);
	
	function testFun(){
		alert("jQuery μ‹œμž‘μž…λ‹ˆλ‹€.");
	} */
	
	// 2.
	/* new jQuery(document).ready(function (){  // new Date().getDay() 처럼 μ“°λŠ” 것과 λ˜‘κ°™μ€ κ°œλ…
		alert("jQuery μ‹œμž‘μž…λ‹ˆλ‹€.");
	}); */
	
	// 3.
	/* $(document).ready(function(){
		alert("jQuery μ‹œμž‘μž…λ‹ˆλ‹€.");
	}); */
	
	//4.
	$(function(){
		alert("jQuery μ‹œμž‘μž…λ‹ˆλ‹€.");
	});
</script>
</head>
<body>
	
</body>
</html>

 

06_Hierarchy.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="../jquery.js"></script>
<script type="text/javascript">
	// 1.
	/* var obj = new jQuery(document); //μ„ νƒμž λ˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 객체
	obj.ready(testFun);
	
	function testFun(){
		alert("jQuery μ‹œμž‘μž…λ‹ˆλ‹€.");
	} */
	
	// 2.
	/* new jQuery(document).ready(function (){  // new Date().getDay() 처럼 μ“°λŠ” 것과 λ˜‘κ°™μ€ κ°œλ…
		alert("jQuery μ‹œμž‘μž…λ‹ˆλ‹€.");
	}); */
	
	// 3.
	/* $(document).ready(function(){
		alert("jQuery μ‹œμž‘μž…λ‹ˆλ‹€.");
	}); */
	
	//4.
	$(function(){
		alert("jQuery μ‹œμž‘μž…λ‹ˆλ‹€.");
	});
</script>
</head>
<body>
	
</body>
</html>

 

08_Hierarchy.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - 계측 μ„ νƒμž</title>
<style type="text/css">
	div{
		background-color:#EEEEEE;
		padding:10px;
		width:500px;
	}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		// label μ„ νƒμžμ˜ λ°”λ‘œ λ‹€μŒμ˜ inputνƒœκ·Έ
		$("label + input").css("border", "1px solid #F00");
	});
</script>
<body>
	<form action="#" method="post">
		<label>이름</label>
		<input type="text" name="name"/>
		<input type="text" name="addr"/>
		<br/><br/>
		
		<b>λ°˜λ“œμ‹œ μž…λ ₯ν•˜μ„Έμš”.</b>
		<br/><br/>
		
		<fieldset> 								 <!-- 컨트둀의 κ·Έλ£Ήν™”ν•˜λŠ” λ²”μœ„ -->
			<legend>ν•„μˆ˜μž…λ ₯사항</legend>  			 <!-- κ·Έλ£Ήν™”ν•˜λŠ” λ²”μœ„μ˜ 이름 -->
			<label>아이디</label>
			<input type="text" name="id"/>
			<label>λΉ„λ°€λ²ˆν˜Έ</label>
			<input type="password" name="password"/>
			<input type="password" name="password"/>
		</fieldset>
		<br/>
		
		<label>
			 E-MAIL 
			<input type="text" name="email"/>
		</label>
	</form>
</body>
</html>

 

09_Hierarchy.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - 계측 μ„ νƒμž</title>
<style>
	 div,p{
       width:100px; 
        height:80px; 
        float:left; 
        padding:10px; 
        margin:10px;
 	 	box-shadow:3px 3px 5px;
        background:#EEEEEE; 
	}
		       
    #second{
          width:60px;
          height:20px;
          font-size:12px;
          background:#ddaa99;
      }
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//아이디가 first인 κ²ƒμ˜ λͺ¨λ“  동생쀑에 divνƒœκ·Έ λ½‘μ•„μ˜€κΈ°
		$("#first ~ div").css("border", "5px dotted #EA9");
	});

</script>

</head>
<body>
	<h2>λ§€λ¬Όμ•ˆλ‚΄</h2>
	
	<h4>κ±°λž˜μ™„λ£Œλœ λ§€λ¬Όμ •λ³΄λŠ” μ™„λ£Œ λͺ©λ‘μ„ μ°Έκ³ ν•˜μ„Έμš”.</h4>
	
	<div>
		급맀 <br/>
		빌라 33ν‰ν˜• λ°©3, μš•μ‹€2
	</div>
	
	<div id="first">
		맀맀 <br/>
		κ·Έλ¦° APT 20ν‰ν˜•, 전망 μ’‹μŒ
	</div>
	
	<div>
		μž„λŒ€ <br/>
		보라 μ˜€ν”ΌμŠ€ν…” 18평
	</div>
	
	<div>
		μž„λŒ€ <br/>
		<div id="second">κ·Έλ¦° APT 40ν‰ν˜•</div> 
	</div>
	
	<p>νŠΉλ³„λΆ„μ–‘ μˆ˜μ΅ν˜• μ˜€ν”ΌμŠ€ν…”</p>
</body>
</html>
λ°˜μ‘ν˜•

'KITRI > JAVASCRIPT' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

JavaScript 의 이해 - [jQuery] DOM ν•¨μˆ˜(1)  (0) 2020.07.21
JavaScript 의 이해 - [jQuery] Selector(2) : ν•„ν„°  (0) 2020.07.21
JavaScript 의 이해 - [AJAX] Kakao 지도 Javscript API μ΄μš©ν•΄μ„œ 지도그리기  (0) 2020.07.20
JavaScript 의 이해 - [AJAX] 기상청 데이터 Parsing  (0) 2020.07.20
JavaScript 의 이해 - [AJAX] XMLHttpRequest.responseXML  (0) 2020.07.16
'KITRI/JAVASCRIPT' Related Articles more
Comments