Jquery 기본 정리
Jquery는 자바스크립트기반의 라이브러리로 웹 페이지 상에서 다양한 상호작용과 동적인 기능을 구현하는 데 사용된다.
Jquery를 이용하면 HTML문서의 요소를 쉽게 선택하고 조작할 수 있다. 예를 들어, 특정 HTML 요소를 선택하고 스타일을 변경하거나, 클릭 이벤트에 반응하여 특정 동작을 수행하는 등 다양한 조작이 가능하다.
기본 문법
$(제어대상).method1().method2();
1. jQuery(제어대상 || 선택자).method1().method2(); 로도 쓸 수 있다.
$(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만
$를 사용하는 다른 라이브러리들과의 충돌때문에 위와같이 사용할 수 있다.
2. 제어대상에는 css.셀렉터, html 엘리먼트를 사용하며, 2개이상 넣어줄 수 있다
ex) $("#id, #name").method1().method2();
3. .method1().method2(); 이런 방식을 'chaining'이라고 한다.
jQuery(선택자)
붉은색으로 표시한 부분이 wrapper이며 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환한다.
'선택자'는 아래와 같이 나뉜다.
1. 요소 선택자: 특정 HTML 요소를 선택한다.
$('div'): 모든 <div> 요소를 선택.
$('p'): 모든 <p> 요소를 선택.
2. 아이디 선택자: 특정 아이디(ID)를 가진 요소를 선택한다.
$('#myElement'): id 속성이 "myElement"인 요소를 선택.
3. 클래스 선택자: 특정 클래스를 가진 요소를 선택한다.
$('.myClass'): class 속성이 "myClass"인 요소를 선택.
4. 속성 선택자: 특정 속성을 가진 요소를 선택한다.
$('[name="myName"]'): name 속성이 "myName"인 요소를 선택.
5. 자식 선택자: 특정 요소의 자식 요소를 선택한다.
$('ul li'): 모든 <ul> 요소의 자식인 <li> 요소를 선택.
6. 후속 형제 선택자: 특정 요소의 다음에 오는 형제 요소를 선택한다.
$('h2 + p'): <h2> 요소 다음에 오는 <p> 요소를 선택.
7. 필터 선택자: 특정 조건을 가진 요소를 선택한다.
$('input:checked'): 선택된 체크박스 요소를 선택.
$('li:first-child'): 첫 번째 자식으로 있는 <li> 요소를 선택.
Chain
jQuery에서 체인(Chain)은 여러 메소드를 연속적으로 호출하여 한 줄에 여러 작업을 수행할 수 있는 기능을 의미한다.
이를 통해 코드를 간결하게 작성하고 가독성을 높일 수 있다.
체인을 사용하려면 선택자 또는 이벤트 핸들러를 통해 원하는 요소를 선택하고 해당 요소에 대해 연속적으로 메소드를 호출하면된다. 각 메소드는 이전 메소드의 결과를 반환하므로 다음 메소드를 호출할 수 있게 된다.
아래와 같이 정리할 수 있다.
$('div') // <div> 요소들을 선택
.addClass('highlight') // 선택한 요소들에 'highlight' 클래스 추가
.css('color', 'red') // 선택한 요소들의 글자색을 빨간색으로 변경
.fadeOut(1000) // 선택한 요소들을 1초 동안 서서히 투명하게 만듦
.delay(500) // 0.5초의 딜레이
.fadeIn(1000); // 선택한 요소들을 1초 동안 서서히 나타나게 함
이벤트
jQuery에서 이벤트는 웹페이지에서 발생하는 상호작용에 대해 응답으로 동작하는 기능을 제공한다.
이벤트는 사용자 동작(클릭, 키보드입력)이나 페이지의 상태(로드완료, 요소 추가등)과 관련된다.
가장 기본적인 방법은 '.on()'메소드를 사용하는 것이다.
아래와 같이 정리할 수 있다.
$('#test').on('click', function() {
// 버튼이 클릭되었을 때 실행할 코드
alert('버튼이 클릭되었습니다!');
});
//#test라는 id를 가진 요소를 선택 후 클릭 이벤트에 대한 리스너를 등록한다.
//클릭이벤트가 발생하면 콜백함수 실행되며 안에 alert이 표시된다.다른 이벤트로는 'mouseenter', 'mouseleave', 'keyup', 'submit'등이 있다.
여러 이벤트가 있으니 api.jquery.com에 문서를 참고하는 것이 좋다.
엘리먼트제어
jQuery는 선택자를 사용해서 원하는 엘리먼트를 선택하고 선택한 엘리먼트에 대한 조작을 수행하는 메소드를 다양하게 제공한다.
스타일변경
.css('property', 'value') 선택한 엘리먼트의 css 속성값을 변경해준다.
ex) $('.test').css('color', 'red')는 test라는 클래스를 가진 엘리먼트들의 글자를 빨간색으로 변경해준다.
클래스조작
`.addClass('className') 선택한 엘리먼트에 클래스를 추가해준다.
.removeClass('className') 선택한 엘리먼트에서 클래스를 제거한다.
.toggleClass('className') 선택한 엘리먼트에 클래스가 없으면 추가하고, 이미 있는 경우 제거한다.
내용변경
.text('content'): 선택한 엘리먼트의 텍스트 내용을 변경한다.
.html('content'): 선택한 엘리먼트의 HTML 내용을 변경한다.
ex) $('.test').text('새로운 텍스트')는 test클래스를 가진 모든 엘리먼트의 텍스트를 변경하는 것이고
$('#test').html('<b>강조된 텍스트</b>') test라는 id값을 가진 엘리먼트의 html 내용을 변경하는 것이다.
.append('content') 선택한 엘리먼트의 끝에 새로운 내용을 추가한다.
.prepend('content') 선택한 엘리먼트의 시작 부분에 새로운 내용을 추가한다.
.empty(): 선택한 엘리먼트의 내용을 제거한다.
.remove(): 선택한 엘리먼트를 완전히 제거한다.
속성조작
.attr('attribute') 선택한 엘리먼트의 특정 속성 값을 가져온다.
.attr('attribute', 'value') 선택한 엘리먼트의 속성 값을 변경한다.
ex) $('img').attr('src', 'newImage.jpg')는 모든 이미지 엘리먼트의 src 속성 값을 'newImage.jpg'로 변경한다.
.prop('property'): 선택한 엘리먼트의 특정 프로퍼티 값을 가져온다.
.prop('property', 'value') 선택한 엘리먼트의 특정프로퍼티 값을 설정한다.
ex) $('input[type="checkbox"]').prop('checked', true)는 모든 체크박스 엘리먼트의 checked 프로퍼티 값을 true로 설정한다.프로퍼티 값은 일반적으로 엘리먼트의 상태나 동작을 나타내는데 사용된다.
FORM
서버로 데이터를 전송하기 위한 수단으로 선택자를 사용하여 폼 요소를 선택한 후, 해당 요소에 대한 메소드를 호출하여 값을 읽고 설정하거나 이벤트를 처리한다. .submit() 메소드를 사용하여 폼 제출 이벤트를 처리하거나, .val() 메소드를 사용하여 폼 요소의 값을 읽거나 설정할 수 있다.
https://api.jquery.com/category/forms/ .사이트를 참고하자.