jQuery

• jQuery는 결국 자바스크립트로 만들어진 것이다.
• 라이브러리
• 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 한다.
• DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

• javascript 구현에 필요한 상당수의 기능들을 미리 구현해 놓은 함수들의 집약체

• 이처럼 프로그래밍에 필요한 함수들을 언제든지 필요할 때 참조항 수 있도록 집약해 놓은 형태를 '라이브러리' 라고 한다.

• HTML 요소 제어가 쉬워짐

• 요소의 탐색과 생성이 쉬워짐

• ajax 통신처리 쉬워짐

• 익숙한 구문을 사용함

• 다양한 플러그인 제공

jQuery 제어의 대상 찾기

<script>
$('li').css('color','red');
</script>

• $ = jquery(사용하겠다고 하는것)
• ('li') = css 선택자(태그 선택자)
• .css('color','red') = 선택된 객체들에게 style을 color:red로 변경한다.

축약된 코드

• innerHTML
  • 선택자.html("문장");
• window.onload = function(){}
  • $(document).ready(function(){});
  • $(function(){});

jQuery 제어할 대상에 접근하는 방법

• jQuery는 제어할 요소를 획득하기 위하여 $()함수 안에 제어할 대상을 가리키는 CSS셀렉터를 파라미터로 전달한다.

- 태그 요소

<script>
let tag = $('h1');
</script>

- css클래스 요소

<script>
let mycss = #(".hello");
</script>

- hello라는 id 속성을 갖는 요소

<script>
let myid = $("#id");
</script>

• 조합형

<script>
let my = $("a,b");
</script>

• 자식항목

<script>
let my = $("a b");
</script>

이벤트

• id가 btn 이라는 버튼에다가 click 이벤트를 바인딩하는 방법

<script>
$("#btn").click(function(event){
		.....
});

$("#btn").bind('click',function(event){
		.....
});

$("#btn").on('click',function(event){
	....
});
</script>

key event

• keypress 이벤트는 영문, 특수문자에 대해서는 동작하지만 한글에 대해서는 동작하지 않는다.
• 그러므로 균등한 키 이벤트 구현을 위해서느느 keyup 이벤트를 사용해야 한다.

1.keyCode

• 키 입력에 관한 코드값이 인덱스 번호처럼 붙어있다.

• 키보드가 자신의 어떤 키가 눌러졌는디 컴퓨터에게 보내는 데이터.

• 키보드의 키 하나하나에 각각 일련의 숫자값들이 할당되어 있다.
  그래서 키보드는 눌러진 키에 대응되는 숫자값을 컴퓨터에게 전달한다.

• javascript keycode
  event.keycode

• 잘 모르겠거나 없으면 event에서 찾아보면 나올수도 있다.