다연이네

[days01] jQuery란? 본문

Web/jQuery

[days01] jQuery란?

　다연　 2020. 12. 18. 21:31
반응형

1. jquery란?
ㄱ. jQuery는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리입니다.
ㄴ.  다양한 브라우저에서 작동하는 사용하기 쉬운 API를 사용하여 
  1) HTML 문서 탐색 및 조작, 
  2)  이벤트 처리, 
  3) 애니메이션 및 
  4) Ajax와 같은 작업
     을 훨씬 간단하게 만듭니다. 
ㄷ.  융통성과 확장성이 결합된 jQuery는 수백만명의 사람들이 JavaScript를 작성하는 방식을 변화시켰습니다.
 

 

js보다 jquery를 많이 쓰지만, 내부적으로 js를 꼭 알고 있어야  나중에 없는 기능도 사용할 수 있다.

 


2. jquery 다운로드
ㄱ. 압축된 jquery 파일 (???.min.js) - 디버깅(소스맵 파일을 추가하면 가능)
ㄴ. 비압축된 jquery 파일 (???.js) - 개발 또는 디버깅시 자주 사용

 

jquery.com 방문해서 

두개 다 마우스 우측클릭을 통해 저장했다.

저장위치는  C:\Class\WebClass\webPro\WebContent\jquery


 3. CDN을 사용해서 jquery를 사용할 수 있다.
  ㄱ. CDN (Content Delivery Network)
      콘텐츠 전송 네트워크
      전 세계에 분산된 서버에서 jQuery를 호스팅하여 [성능 이점]을 제공할 수 있다.
 
 4. $(jquery selector)
  jquery api

 

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit.</p>
<p>Fugiat distinctio suscipit error!</p>
<p>Atque illum sequi eligendi!</p>
<p>Minus minima cum fugit!</p>
<p>Nihil aliquam consectetur aspernatur!</p>

<button id="btn">p 태그 숨기기</button>

<script>


//***** 암기
//문서가 로딩이 되어져 사용 준비가 됐을때 객체를 가져오고, 이벤트 걸고 해야한다.
// 로딩 전에는 코딩을 해도 적용이 안된다. 
//=> 로딩되어져서 준비가 될 때 라는 의미 == ready
/*
$(document).ready(function() {
	
});//ready

 */
//위 코딩과 100% 같은 코딩
$(function() {
	//$(selector).action();	
	 $("p").one("click", function() { //p태그별로 한번 걸고는 제거 (한번만 이벤트 발생시킴)
	  $("#btn").click(); //버튼의 클릭 이벤트 발생 (트리거)
	});  
	
	$("#btn").click(function(){
		//$("p").hide(1000); //1초동안 숨겨지는게 마치 슬라이딩 되는 듯이
		//안주면 400
		
		//alert("p태그 모두 숨겼습니다."); 
		//나는 숨기고 나서 경고창 띄우고싶었는데 경고창이 뜬 후 확인 누르니 숨겨진다.
		// -> 다 주석하고 이렇게 쓰자
		$("p").toggle("slow", function() {
			//alert("p태그 모두 숨겼습니다.");  //p태그 개수만큼 출력
		});
	});//btn click
}); 
</script>
</body>
</html>
반응형
저작자표시 비영리

'Web > jQuery' 카테고리의 다른 글

[days02] 복습 - attr()  (0) 2020.12.21
[days02] 복습 - 1) 콜백함수 / 2) $.each()  (0) 2020.12.21
[days02] 복습 - 1) optgroup / 2) 미디어 쿼리 설정  (0) 2020.12.21
[days02] 복습 - 의미없는 이미지, 회원가입 폼  (0) 2020.12.21
[days02] 복습 - 1) video태그 / 2) 무한 스크롤  (0) 2020.12.21
'Web/jQuery' Related Articles more
Comments