jQuery

jQuery

---

개발 트렌드가 메모리의 절약과 코드의 간결함이 강조되는 이때 프레임워크와 라이브러리의 사용은 권장사항이 아닌 필수가 되가고 있다.

프론트엔드 기술로 동적인 이벤트를 줄 수 있는 javascript의 프레임워크의 종류로는 React, jQuery 등이 있다.

여기서는 jQuery를 한번 알아보자.

jQuert란?

---

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

사용방법

사용방법

• 직접 서비스 하는 경우 http://jquery.cmo 에서 jquery 소스코드를 다운로드 한다.
  위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다.

    <script type="text/javascript" src="jQuery.js"></script>
  

• CDN을 사용하는 경우
  https://code.jquery.com 에서 필요한 버전을 눌러서 코드를 복사하여 사용한다.

    <!-- 현재 최신버젼 3.6.0 CDN -->
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
  

jQuery Load

---

javascript는 inti()를 또는 onload 속성을 통해서 로드를 해 놓을 수 있다.

jQuery에서는 $(function(){~~})를 통해 로드가 가능하다.

Selector

---

jQuery는 CSS selector을 기반으로 jQuery Selector가 있다.

• CSS

  id / #id
  tag / tag
  class / .class

• jQuery

  id / ${‘#id’}
  tag / ${‘tag’}
  class / ${‘.class’}

Selector를 통해서 html의 태그를 여러가지 방법으로 접근이 가능하다.

• $(‘elem [,elem….]’) / 여러개의 태크를 선택하여 접근
• $(‘elem1 [elem2]) / elem1 안에 존재하는 모든 elem2를 접근

• $(‘elem [[attr

  attr = value]]) / attr 또는 attr과 value를 통해 접근

• 연산자종류 : = 이외의 연산자는 활용도 낮음
  • attr = value : value 같은
  • attr != value : value 같지않은
  • attr ^= value : value 시작하는
  • attr $= value : value 끝나는
  • attr *= value : value 포함하는
• form 필터 선택자
  • $(‘input:checked’)
  • $(‘input:button’)
  • $(‘input:checkbox) 등….
• 위치 필터 선택자 : $(‘element : 위치정보’)
  • $(‘element : odd’) / 훌수번의 element를 가져옴
  • $(‘element : even’) / 짝수번의 element를 가져옴
  • $(‘element : first’)
  • $(‘element : last’)
• 함수필터 selector : $(‘element : function’)
  • $(‘element : contains(문자열)’)
  • $(‘element : not(selector)’)
  • $(‘element : eq(index)’)
  • $(‘element : gt(index)’)
  • $(‘element : lt(index)’)
• 기타
  • $(‘element : empty’)

Elemnet : Tag

---

jQuery를 쓰려먼 Element와 Tag의 개념을 알고 넘어거는가 좋다.

html과 JS를 보면 Tag와 Element가 존재한다.
Java와 비교하자면 Tag는 Class , Element는 Instance로 볼 수 있다.

Java : Class => Instance(메모리 할당) JavaScript : Tag => Element(메모리 할당) => $(elem)/jQuery객체

Event

---

• $(‘input:button’).bind(‘click’, function(){}) == $(input:button’).click(function(){})

위와같이 이벤트 사용시 .bind(.on)와 .click[hover…]등과 같이 2가지의 방법을 사용 할 수 있다.