국비 JavaScript

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

이안의 평일코딩

국비 JavaScript - JQuery 본문

Front-end/JavaScript

국비 JavaScript - JQuery

이안92 2020. 10. 31. 12:43

2020.10.26(월)

JavaScript

=> 태그를 추가, 데이터 변경, 화면 이동 => 이벤트 (프로그래머마다 처리 기능이 틀리다, 통일화)

JQuery (DOM프로그램(문서 객체 모델 Document Object Model, 트리형태))

=> JavaScript의 라이브러리

exam1.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="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
// JavaScript => 태그를 추가, 데이터 변경 , 화면 이동 => 이벤트 (프로그래머마다 처리 기능이 틀리다,통일화)
/*
 *   JQuery (DOM프로그램 : 트리형태) : JavaScript의 라이브러리 
     ==========================
    	 1. CSS변경 , 2. 데이터 변경
    	    ML => 데이터 저장 공간 (HTML, XML..)
    	          <input type=text id="name" value="저장 위치"> => val()
    	          <td value="저장위치">저장위치=> text()</td>
    	          ================== ======
    	        	  속성값 : attr("속성명")
    	          <img src=""/>
    	          ==> getter
    	              val(),text(),attr("src")
    	              <div id="aaa">
    	                <span>Test</span>
    	              </div>
    	              
    	              div.text() => 태그는 제외 ==> Test
    	              div.html() => <span>Test</span>
    	          ==> setter 값을 넣어줌
    	              val("aaa"),text("aaa"),attr("scr","a.jpg")
    	              html(),append() => 추가,remove()
    	              
    	                  태그를 가지고 오는 방법(Selector) 
    	              = id
    	                <input type=text id="id"> => $('#id').val("")
    	              = class
    	                <input type=text class="id"> => $('.id').val("")
    	              = tag명
    	                <td></td> => $('td')
    	              = 소속관계
    	                <div id="aaa">
    	                  <input type=text >
    	                </div>
    	                <div id="bbb">
		  	                  <input type=text >
		  	              </div>
		  	              $('input').val("admin");
		  	              $('#aaa input')
    	              = 가상
    	                $('td:eq(1)')  td:odd td:even
		  	              <tr>
		  	                <td></td>
		  	                <td></td>
		  	                <td></td>
		  	              </tr>
		  	              
		  	   ====== Jquery,Ajax ==> 브라우저에 화면이 출력된 다음에 수행
		  	     => javascript : window.onload => main
		  	        jquery : $(function(){})   => main
		  	        react : componentWillMount()
    	              
 */
 /* function a(){document.write("a")}
function b(){document.write("b")}
function c(){document.write("c")}
function d(){document.write("d")}
function e(){document.write("e")}
window.onload=function(){
	a();
} */
// 과거 $(document).ready(function(){}) => 현재 window.onload
$(function(){
	// 태그를 읽어서 제어
	//$('h1').css("color","red");
	//$('#a').css("color","green"); #은 id
	//$('div .b').css("color","blue"); .은 class
	/* $('h1:eq(0)').css("color","red");
	$('h1:eq(1)').css("color","green");
	$('h1:eq(2)').css("color","blue");
	$('h1:eq(3)').css("color","orange");
	$('h1:eq(4)').css("color","pink"); */
	/*
	    td , tr , li , option...
	*/
	$('.b:eq(0)').css("color","red");
	$('.b:eq(1)').css("color","green");
	$('.b:eq(2)').css("color","blue");
	$('.b:eq(3)').css("color","orange");
	$('.b:eq(4)').css("color","pink");
	
})
</script>
</head>
<body>
  <h1 class="b">Java</h1>
  <h1 class="b">Oracle</h1>
  <h1 class="b">JSP</h1>
  <h1 class="b">Spring</h1>
  <div>
    <h1 class="b">JavaScript</h1>
  </div>
</body>
</html>

exam2.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="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function(){
	$('tr:eq(0)').css("background-color","#ccccff");
	$('td:nth-child(3n+2)').css("background-color","#ccffcc");
	/*
	     ================
	       1 |  2  |  3
	     ================
	      4  |  5  |  6
	     ================
	      7  |  8  |  9
	     ================
	    	 
	    	 3n+2  => n=0   ==> 2
                      n=1   ==> 5  
	*/
})
</script>
</head>
<body>
  <table border=1 bordercolor=black>
    <tr>
      <th>이름</th>
      <th>성별</th>
      <th>나이</th>
    </tr>
    <tr>
      <td>홍길동</td>
      <td>남자</td>
      <td>30</td>
    </tr>
    <tr>
      <td>심청이</td>
      <td>여자</td>
      <td>20</td>
    </tr>
    <tr>
      <td>박문수</td>
      <td>남자</td>
      <td>35</td>
    </tr>
  </table>
</body>
</html>

exam3.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="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function(){
	// input에 값을 첨부
	$('#name').val("홍길동");
	// click , change:select,hover
	$('#btn').click(function(){
		let name=$('#name').val();
		//$('div').text(name);// <div>값을 출력</div>
		// $('div').text(); //<div>값을 읽는다</div>
		$('div').append(name+"<br>");
	})
});
</script>
</head>
<body>
  이름:<input type=text id="name" size=15 value="">
  <input type=button value="실행" id="btn"><br>
  <div>
   
  </div>
</body>
</html>

exam4.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="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function(){
	//$('.image').css("width","200px").css("height","250px");
	$('.image').hover(function(){
		$(this).css('opacity',0.3);
		$(this).css("cursor",'pointer');
	},function(){
		$(this).css('opacity',1.0);
		$(this).css("cursor",'none');// 원래상태 복귀
	})
	$('.image').css({"width":"200px","height":"250px"});
	$('.image').click(function(){
		let src=$(this).attr("src");
		//$('div').html('<img src='+src+' width=450 height=500>'); img
		$('div img').attr("src",src);
	})
})
</script>
</head>
<body>
  <img class="image" src="http://img1.daumcdn.net/thumb/C155x225/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2F75e6c79b957f6b4565c0b81c0f37e4d3d5c0b327">
  <img class="image" src="http://img1.daumcdn.net/thumb/C155x225/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2Fcd5cff312e3ec6beb42b4767c2c89964dd4eca70">
  <img class="image" src="http://img1.daumcdn.net/thumb/C155x225/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2F13b5f2e03ddf023f05212176ac90db9337758ba8">
  <img class="image" src="http://img1.daumcdn.net/thumb/C155x225/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2Fa48e2ed6706cd95758f721f6de791067c6d2c1e3">
  <img class="image" src="http://img1.daumcdn.net/thumb/C155x225/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2F3b3d8a8a743e8fe8d92fa772ccbef8b7d757eac9">
  <div>
    <img src="" width=450 height=500>
  </div>
</body>
</html>

'Front-end > JavaScript' 카테고리의 다른 글

이벤트 관리 방법 (버블링, 캡쳐링, 이벤트 위임) (0)	2021.02.26
브라우저 저장소 (쿠키, 로컬 스토리지, 세션 스토리지) (0)	2021.02.26
[자바스크립트] 가격 숫자 천 단위 , 콤마 찍기 (2)	2021.02.03
[JavaScript 입문] 자바스크립트 기초 문법 총정리 (0)	2020.12.11
국비 JavaScript - 변수, 연산자, 제어문 (0)	2020.10.15

'Front-end/JavaScript' Related Articles

Comments

이안의 평일코딩

국비 JavaScript - JQuery 본문

국비 JavaScript - JQuery

2020.10.26(월)

'Front-end > JavaScript' 카테고리의 다른 글

티스토리툴바