| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- oauth
- WIL
- python
- Hibernate
- spring
- javascript
- flask
- session
- cookie
- Spring Security
- Anolog
- programmers
- server send event
- real time web
- Project
- SseEmitter
- JPA
- 항해99
- jQuery
- jenkins
- JWT
- hanghae99
- bean
- DI
- Stream
- html
- google oauth
- Java
- web
- 생명주기 콜백
- Today
- Total
끄적끄적 코딩일지
JQUERY 시작하기 본문
Jquery란?
html 상에서 자주 사용하는 javascript 코드를 간단하게 사용할수 있는 기능을 제공해주는 라이브러리
시작하기
<head> 태그 안에 javascript cdn을 넣어서 사용
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" />
자주쓰는 JQUERY
id로 특정 태그 찾기 : $('#id')
input의 입력값 가져오기 : $('#id').val()
input의 입력값 셋팅하기 : $('#id').val('입력값')
특정태그 숨기기 : $('#id').hide()
특정태그 보이기 : $('#id').show()
특정 태그에 하위 태그 추가하기 : $('#id').append(tag)
특정 태그 삭제 : $('#id').remove()
특정 태그의 하위 태그 삭제 : $('#id').remove(하위 태그)
특정 태그의 모든 하위 태그 삭제 : $('#id').empty()
특정 태그의 상위 태그 삭제 : $('#id').unwrap()
특정 태그의 css 값 변경하기 : $('#id').css('css종류','css값')
특정 태그의 클릭 이벤트 설정 : $('#id').click(function () { ... })
특정 태그의 이벤트 설정 : $('#id').on('이벤트 종류', function(){ ... })
AJAX란
Axynchronous Javascript And Xml( 비동기식 자바스크립트와 xml )의 약자, javascript를 사용하여 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 통신 기능이다. 보통 전체 페이지를 새로 고치지 않고도 페이지 일부만을 위한 데이터를 받아오거나 브라우저에 입력한 데이터를 서버로 전송할때 사용된다.
JQUERY를 이용한 AJAX 사용하기
$.ajax({
type : 'GET' // get post 등
url : '통신할 url',
data : { }, // 요청하면서 함께 줄 데이터
success : function(response){
// 서버와 통신 성공시 수행할 동작
}
})
'Javascript&Web' 카테고리의 다른 글
| Javascript에서 Cookie, SessionStorage 사용하기 (0) | 2022.05.12 |
|---|---|
| Html 기본 요소 (0) | 2022.03.21 |