JavaScript, Vue.js, CSS/JavaScript
[jQuery] 기본 문법, ajax
삶_
2022. 8. 12. 08:01
jQuery
- 홈페이지 다운로드 - 프로젝트 폴더 내에 옮김
- <head> 사이에 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// jQuery 함수
// jQuery('h1'), $('h1') : 객체 반환. h1요소 모두를 선택해 jquery 객체로 반환함
// $('h1').text() : text() 메서드는 jquery 객체가 제공하는 메서드. 해당요소의 텍스트 반환
// $('h1').text('hello') : 해당요소의 텍스트 변경
// HTML을 인수로 전달받을 때
// $('<p> My text </p>').appendTo('body') : HTML 문자열을 인수로 받으면 새로운 HTML 요소를 생성한다
// JS 객체를 인수로 전달받을 때
// 그 인수받은 객체를 jquery 객체로 바꾼 객체를 반환함
$('div.foo').click(function(){
$(this).slideUp();
})
// js의 window.onload랑 비슷한 기능 (1)
$(document).ready(function(){..});
// js의 window.onload랑 비슷한 기능 (2)
// 요즘엔 이걸 더 많이 씀
$(function(){
$(h1)
});
</script>
</head>
<body>
<!-- CDN 방식으로 jQuery를 사용할 수도 있다. -->
<!-- 폴더 경로로 해도 되긴함 -->
<!-- https://developers.google.com/speed/libraries/#jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
자식, 부모요소
//후손요소 전체
$('#destinations .promo')
//자식요소 전체
$('#destinations > li')
//복합 선택자
$('#france > li, .promo')
//가상 선택자 (순서 선택)
//.css로 속성, 값 정해줌
$('#destinations li:first').css('color', 'red');
$('#destinations li:last').css('color', 'blue');
.children() : 자식요소
.closest() : 자신과 가장 가까운 부모요소
.find() : 자식요소중 찾아줌
.parent() : 부모요소
.parents() : 부모요소들 중에서
노드 속성
**name 은 name 속성 말하는게 아니고
**타입을 말하는 것 (type, name, class 등등..)
[name*=”value”]
// value 문자열을 포함하고 있는 노드
[name^=”value”]
// value 문자열로 시작하는 노드
[name$=value]
// value 문자열로 끝나는 노드
("[name]")
// 해당 속성을 가지고있는 노드
var el2 = $('#destinations').find('li');
// li를 찾는다
$('li').next()
// li중에서 현재꺼 뒤에오는 다음 형제요소
$('li').next()
// li중에서 자신의 바로 앞의 형제요소
$('li').parent().next()
// 이게 더 안전하게 쓰임. 부모의 형제요소 중 바로 내 뒤의 형제요소
첨가
a.append(첨가되는 요소) : a의 자식요소로 첨가됨, 선택요소의 닫는 태그 앞에 콘텐츠를 삽입함
a.appendTo(요소) : 요소에 a 삽입
prepend(요소) : 선택요소의 여는 태그 뒤에 콘텐츠를 삽입함
remove(요소) : 요소를 제거함
empty(요소) : 요소 안의 내용을 비워줌
replaceAll() : 요소를 교체해줌
a.after(요소) : 선택요소의 뒤에 콘텐츠 삽입
a.before(요소) : 선택요소의 앞에 콘텐츠 삽입
a.insertAfter(요소) : after() 과 의미 같음. 하지만 요소 뒤에 a를 추가
a.insertBefore(요소) : before()과 의미 같음. 하지만 요소 앞에 a를 추가
.eq(인덱스) : 요소의 인덱스 번호에 해당하는 요소를 찾음
.filter(함수) : 함수에 속하는 원소들로만 걸러줌
.map(함수)
.not() : ()에 속하지 않는것
.each(함수) : js의 foreach 같은것
sideUp() : 해당 요소가 위로 접혀 사라짐
fadeOut() : 페이드아웃됨
그 외, 텍스트
attr() // html의 속성 attr('checked') = 체크되있다면 checked
prop() // js의 프로퍼티값 prop('checked') = 체크되있다면 true
//내용변경할 때 많이 사용
text() // 안에 넣는 텍스트. innerText와 비슷.
// 전달인자가 없는경우 값을 반환.
html() // 안에 넣는 텍스트. innerHTML 과 비슷.
// 전달인자가 있는 경우 적용.
CSS, Event
// CSS
val() // input 등의 value 속성 값 가져옴
addClass(클래스이름) //클래스이름을 추가함
hasClass(클래스이름) //해당요소의 '클래스이름'값을 가진 클래스가 존재하는지
toggleClass(클래스이름 or 함수) //해당요소에 해당 클래스이름이 존재하면 제거. 존재X면 추가.
css(속성, 속성에 넣을값) //css 적용
width() //가로 반환
height() //높이 반환 (내부높이)
innerHeight() //내부높이 + padding
outerHeight() //내부높이 + padding + border
좌표 관련
offset() // top/left 의 값 지정. html 기준으로 얼마나 떨어져있는가.
position() // 부모에 상대적으로 얼마나 떨어져있는가
// EVENT
// addEventListener 과 비슷한 기능
// 객체.on( events [, selector ] [, data ], handler )
$('button').on('click', function (e) {
// $(this)는 $(event.target)과 같다
$(this).remove();
});
on(이벤트, 함수) // 해당 요소의 이벤트 생성하기
off(이벤트, 함수) // 해당 요소의 이벤트 제거하기 ex. off('click')
animate()
// 위에서부터 스크롤이 100px 내려감
.scrollTop(100); //애니메이션이 아닌 스크롤이 내려가있는 (고정)
animate({scrollTop: 100}) //애니메이션 효과. '100' 문자로 써도 의미 같음
// 원래 속성값에서 +100 만큼 더한다
animate({scrollTop: +=100}) //'100' 문자로 써도 의미 같음
ajax
- 자바스크립트를 이용해 서버와 통신하는 방식
- 보통 JSON 을 사용
$.ajax(URL주소[,옵션])
변형
url : 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
type :
$.ajax({
// 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
url : "/member/passChk",
// HTTP 요청 방식
type : "POST",
// 서버에서 보내줄 데이터의 타입 (method)
dateType : "json",
// HTTP 요청과 함께 서버로 보낼 데이터
// serializeArray() : 키/값 쌍의 배열 등(form의 input들 등)
// 을 하나로 합쳐주는 역할
data : $("#delForm").serializeArray(),
// success : 성공시 실행.
// data : 성공한 데이터들
success: function(data){..실행 문구들}