\(@^0^@)/

jQuery 쌩기초 본문

TIL

jQuery 쌩기초

minjuuu 2021. 9. 8. 18:22
728x90

jQuery를 몇 달 전에 한번 정도 배운 것도 아니고 사용해본 적? 이 있는 것 같은데,
오늘 코딩애플 JS 유튜브 보다가 살짝 맛만 본 것을 대충 정리하고 넘어가 보자!

🧐 jQuery란?

  1. 엘리먼트를 선택하는 강력한 방법과
  2. 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는
  3. 자바스크립트 라이브러리

🧐 jQuery 설치방법

    1. jQuery 직접 설치
      1. jQuery 홈페이지 접속
      2. Download jQuery를 클릭
      3. 다운로드(Download the comporessed...)
      4. 다운로드한 파일을 <head></head> 사이에 불러오기 
        // 사용예시
<script src="../lib/jquery-3.5.1.min.js"></script>
    2. jQuery CDN 설치
      1. 구글에 jQuery cdn 검색 http://code.jquery.com/
      2. 여러 버전들 중 하나를 복붙 해서, body 태그 끝나기 전에 코드를 넣는다. 
      3. <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<body>
	<h2 id="title" class="name">제목입니다.</h2>
	<script>
		// id가 title인 html 요소는 앞에 #을 붙이고, class가 name인 요소는 앞에 .을 붙인다

		// js로 html 변경하는 법
		document
			.querySelector("#title")
			.document.getElementById("title").innerHTML = "타이틀입니다.";

		// jQuery로 html 변경하는 법
		// .html 은 해당 요소의 모든 html
		// .text 는 해당 요소의 모든 글자들
		$("#title").html("해당 요소의 id는 title입니다.");
		$(".name").text("해당 요소의 class는 name입니다.");

		// 공백으로 냅두면, 기존의 값이 출력됨.
		$("#title").html();

		// css도 변경 가능.
		$("#title").css("color", "green");
	</script>

	<script
		src="https://code.jquery.com/jquery-3.6.0.min.js"
		integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
		crossorigin="anonymous"
	></script>
</body>

※ 참고 코딩 애플 : https://www.youtube.com/watch?v=dHrI-_xq1Vo 

※ 참고 생활코딩 : https://opentutorials.org/course/53/45

728x90
저작자표시

'TIL' 카테고리의 다른 글

[JS] Number 와 parseInt의 차이점  (0) 2021.09.11
[JS] JS 동작원리 (stack, Queue, event loop)  (0) 2021.09.08
[JS] DocumentFragment  (0) 2021.09.04
[JS] 옵셔널 체이닝 ?.  (0) 2021.09.02
[JS] 깊은 복사와 얕은 복사  (0) 2021.09.01
'TIL' Related Articles more