1️⃣ 제이 쿼리 - 기본 문법 형식과 Getter, Setter

728x90

제이 쿼리 jQuery -> 자바스크립트의 경량화 버전

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!-- 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->

<!-- <script src="./jquery/jquery.min.js"></script> 폴더에 저장후 사용가능 .min 입력 중요 -->

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- 위 세개중에 아무거나 써도됩니다 -->

</head>
<body>

<!-- 
	Java Script : client(front)
				   화면의 resource을 설정, 취득하는 부분의 처리
				  DOM(getElementById, nodelist)
	Spring Framework
	Spring boot    Vue, react
	
	jQuery(자바스크립트의 경량화) -> ajax(비동기 통신)
 -->
 
 <script type="text/javascript">
 /*
 	형식: 
 		$(태그명, 또는 ID class 또는 name).핸들러함수(매개변수)
 		
 		getter, setter 
 		
 		getter -> let v = document.getElementById("id값").value
 		setter -> document.getElementById("id값").value="abc"; 
 		
 		document.getElementById("id값").innerHTML (일반태그는 innerHTML)
 		document.getElementById("id값").value (인풋 아웃풋태그는 밸류)
 		
 		---------
 		제이쿼리는?
 				
 		일반태그
 		html() = innerHTML
 		text()
 		
 		form태그
 		val() = value
 		
 		
 */
 
 
 
 </script>
 
 <p>여기가 p tag입니다</p>
 
 <script type="text/javascript">
 
 $(document).ready(function () {
	
	/* let ptag = $("p").html(); // getter, p태그를 접근하겠다. html이라는 코드 갖고오겠다.
	//alert(ptag);
	
	
	$("p").html("hello <b>p</b> tag"); //setter 매개변수를 넣는것 */
	
	
	let ptag = $("p").text();
	//alert(ptag);
	
	//$("p").text("hello <b>p</b> tag");  //text 는 태그를 작동시키지않고 문자열로 인식
	
});
 
 </script>
 
 
 
 <p id="demo">p tag id demo</p>
 
 <h3 class="cls">h3 tag class cls</h3>
 
 <p class="cls">p tag class cls</p>
 
 <script type="text/javascript">
 
 $(document).ready(function() {

	 
	 /* let demo = $("#demo").html(); //== text()
	 //alert(demo);
	 $("#demo").text("hello p tag demo");
	 
	 //class 부분
	 
	 $(".cls").text("class cls set"); */
	 
	 
	 
	 //특정 태그의 내용을 모두 바꾸는법
	 
	/*  //javascript 문법
	 let arrptag = document.getElementsByTagName("p");
	 for(i=0;i<arrPtag.length; i++){
		 arrPtag[i].innerHTML = "이것은 p 태그입니다";
	 } */
	 
	 
	//jquery 문법
	
	 $("p").html("이것은 p 태그입니다. jquery");
	 
	 $("p.cls").text("class cls set");
	 
	 
	 //p태그 30개중 15개만 바꾼다고했을땐 class로 묶어서 적용시킬 수 있다.
	 
	 
});

 
 </script>
 


</body>
</html>

저작자표시 (새창열림)

'🌠 자바 서버 페이지 JSP > 🪐 제이 쿼리 jQuery' 카테고리의 다른 글

제이 쿼리 - 초급 문제/풀이 1️⃣📝 (0)	2021.03.08
5️⃣ 제이 쿼리 - List , Option + Oppend, Prepend 적용 (0)	2021.03.05
4️⃣ 제이 쿼리 - 버튼 + 2차원 배열 이용한 테이블 자동 생성 (0)	2021.03.05
3️⃣ 제이 쿼리 - CSS, MouseOver, 속성 추가 (0)	2021.03.05
2️⃣ 제이 쿼리 - Button 태그 접근과 작동법, + this (0)	2021.03.05

👨‍💻 코딩 도서관

1️⃣ 제이 쿼리 - 기본 문법 형식과 Getter, Setter

'🌠 자바 서버 페이지 JSP > 🪐 제이 쿼리 jQuery' 카테고리의 다른 글

댓글

티스토리툴바

1️⃣ 제이 쿼리 - 기본 문법 형식과 Getter, Setter

'🌠 자바 서버 페이지 JSP > 🪐 제이 쿼리 jQuery' 카테고리의 다른 글

관련글

댓글

티스토리툴바