[스마트인재개발원] jQuery 기초

Notice

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				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

관리 메뉴

코딩몬

[스마트인재개발원] jQuery 기초 본문

JavaScript/jQuery

[스마트인재개발원] jQuery 기초

탄중이 2021. 6. 12. 09:57

jQuery ?

: 클라이언트 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리

- 웹사이트에 Javascript를 더욱 손쉽게 활용할 수 있게 해준다

- 짧고 단순한 코드로도 웹페이지에 다양한 효과나 연출을 적용할 수 있다

Javascript 라이브러리 중 jQuery가 특히 많이 사용되는 이유

주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됨
HTML DOM을 손쉽게 조작 할 수 있으며, CSS 스타일도 간단히 적용 가능
애니메이션 효과나, 대화형 처리를 간단하게 적용해줌
같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현 가능

jQuery 적용법

1. 라이브러리 다운로드

: 파일 을 다운로드 받아 서버에 파일을 넣는 방식

jQuery는 Javascript 라이브러리이므로, .js형태로 존재한다.
http://jquery.com/download 이곳에서 다운로드

jQuery파일을 webcontent에 다운로드 한 후, 적용시킬 html 파일 안에 적용시킬 부분 위쪽에다가 <script>태그 안에

src 속성에 경로를 적어준다.

<script src="./js/jquery-3.6.0.min.js"></script>

2. CDN

: 서버에 파일을 넣는것이 아니라 웹사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때,

자동으로 가장 가까운 서버에 접속해서 다운받도록 하는 방식

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

이와같이 라이브러리를 넣어주지 않고 jQuery를 사용하면 이와같은 이와 같은 오류가 난다.

jQuery 문법

$(‘태그명’ or ‘선택자’).동작함수();

$ : jQuery를 의미하며, jQuery에 접근할 수 있게 해주는 식별자
선택자나, 태그명을 이용하여 원하는 HTML요소를 선택
동작함수를 정의하여 선택된 요소에 원하는 동작을 설정

$()함수

: 선택된 HTML요소를 jQuery에서 이용할 수 있는 형태로 생성해주는 역할을 한다.

$()함수의 인수 : HTML태그, CSS선택자
jQuery 객체(jQuery Object) : $()함수를 통해 생성된 요소
jQuery는 jQuery객체의 메소드를 사용하여 여러 동작들을 설정

요소 선택하기

1. 태그 이름으로 - $(“태그이름”)

: 요소(element)의 태그이름으로 HTML요소를 모두 선택할 수 있다

Javascript 의 getElementsByTagName()메소드와 동일한 동작을 한다.

<script>
  $(function() {
    $("button").on("click", function() {
      $("span").css("fontSize", "30px").css("color", "blue");
    });
  });
  </script>

<body>
  <h1>CSS Selector tagName</h1>
  <p>안녕하세요. <span>코딩몬</span>입니다.</p>
  <button>여기를 클릭해 주세요.</button>
</body>

2. 아이디로 - $(“#id”)

: 요소(element)의 아이디(id)로 특정 HTML 요소를 선택할 수 있다.

Javascript 의 getElementById()메소드와 동일한 동작을 한다.

 <script>
  $(function() {
    $("button").on("click", function() {
      $("#developmon").css("fontSize", "30px").css("color", "blue");
    });
  });
  </script>

<body>
  <h1>CSS Selector id</h1>
  <p>안녕하세요. <span id="developmon">코딩몬</span>입니다.</p>
  <button>여기를 클릭해 주세요.</button>
</body>

3. 클래스로 - $(“.class”)

: 클래스(class)로 같은 클래스의 HTML 요소를 모두 선택할 수 있다.

이는 자바스크립트의 getElementsByClassName() 메소드와 동일한 동작을 한다.

 <script>
  $(function() {
    $("button").on("click", function() {
      $(".developmon").css("fontSize", "30px").css("color", "blue");
    });
  });
  </script>

<body>
  <h1>CSS Selector id</h1>
  <p>안녕하세요. <span class="developmon">코딩몬</span>입니다.</p>
  <button>여기를 클릭해 주세요.</button>
</body>