武裝
jQuery 본문
- 자바스크립트 라이브러리
- -jQuery 사용 방식 : $ ( 선택자 ) . 메소드
- 객체 선택에 대해서 선택자($) 를 제공하고, 효과(애니메이션), 조작, 이벤드 메서드를 제공한다.
- 선택자 : 태그 전체는 그냥 작성, class는 점(.), id 는 # 사용하는 것
웹 주소 : https://code.jquery.com/jquery-3.7.1.min.js
제이쿼리 사전 : https://api.jquery.com/
사용 방법
1. 직접 jQuery 사이트를 추가할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src = 'https://code.jquery.com/jquery-3.7.1.min.js'></script>
</head>
<body>
<h1> 안녕하세요 </h1>
<script>
console.log($('h1').text());
</script>
</body>
</html>
2.jQuery CDN 다운로드 (속도가 조금 더 빠르다, 트레픽 용량이 조금 더 작다 )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
- 조작
.addClass( 클래스명 ) : 클래스 추가 ( 후 리턴까지 한다. )
.removeClass( 클래스명 ) : 클래스 제거
<style>
.redColor{
color : red;
}
</style>
</head>
<body>
<h1> ch.01 </h1>
<h1> ch.02 </h1>
<h1> ch.03 </h1>
<h1> ch.04 </h1>
<h1> ch.05 </h1>
<script>
$('h1').addClass('redColor');
</script>
</body>
- h1 마다 class를 삽입하여 작성한 것이 아니라, 한 번에 class를 추가할 때 사용이 가능하다.
- 기존에 클래스가 있다면, 거기에 추가가 되기 때문에 add인 것이다.
- remove의 경우, 사용하게 된다면, 해당 값이 사라지고 class라는 것은 변함이 없게 된다.
<style>
.redColor{
color : red;
}
</style>
</head>
<body>
<h1> ch.01 </h1>
<h1> ch.02 </h1>
<h1> ch.03 </h1>
<h1> ch.04 </h1>
<h1 calss = "redColor"> ch.05 </h1>
<script>
$('h1').removeClass('redColor');
</script>
</body>- class 에 여러 클래스가 지정이 되어있다면, 하나만 삭제가 됨.
인덱스 지정 방식 : eq( n )
- 배열이 아니기 떄문에, $('h1)[0] 이라는 방식으로 쓸 수 없다.
따라서, -번째 순서를 작성하려면 eq(0) 으로 작성해야 한다. 처음이 0번으로 시작하여 지정
배열 반복 : each( 반복할 속성 , callback 함수 )
<body>
<h1> ch.01 </h1>
<h1> ch.02 </h1>
<h1> ch.03 </h1>
<h1> ch.04 </h1>
<h1> ch.05 </h1>
<script>
$.each($('h1'), function(i, e){
console.log(i, e);
})
</script>
</body>
i : 인덱스 / e : 속성
- each 안으로 넣는 것만 가능한 게 아니라, callback을 위해서 작성해줘도 된다.
$('h1').each((i, e) => {console.log(i, e)})
- 직접 배열을 부르는 것도 할 수 있다.
$.each([1,2,3], (i,e) => {console.log(i,e)})
없으면 추가, 있으면 삭제 : .toggleClass( 클래스 명 )
$('h1').toggleClass('redColor');<body>
<h1> ch.01 </h1>
<h1> ch.02 </h1>
<h1> ch.03 </h1>
<h1> ch.04 </h1>
<h1 class = "redColor"> ch.05 </h1>
<input type="button" id = "btn" value="토글">
<script>
$('h1').eq(0).addClass('redColor');
$('#btn').click(function() {
$('h1').toggleClass('redColor');
} );
</script>
속성 값을 리턴 : .attr(속성명) // .attr(속성명, 속성값)
<body>
<input type="button" id = "btn" value="토글">
<script>
console.log($('#btn').attr('value'))
</script>
</body>
- 속성명 뒤에 변경할 값을 작성하면, 해당 값으로 리턴하기도 한다.
$('#btn').attr("value", "마술버튼");
- attr(객체) 의 경우에는 아래와 같이 작성 가능하다.
$('#btn').attr({
value : '마술 버튼',
style : 'background-color : olive'
});
-removeClass 의 경우, 클래스 내부에 작성한 변수를 지워주지만
- removeAttr 은, class 라는 속성 자체를 없애버린다.
$('h1').eq(4).removeAttr('class')
매개변수 혹은 텍스에 값이 있을 경우, 리턴. / 없다면 작성을 해준다. : .html(속성명) / .text( 값 )
$('h1').eq(0).html("안녕");
console.log($('h1').eq(0).html())
- 괄호 안에 아무것도 작성하지 않으면, 모두 리턴을 한다.
$('body').html("<h1>새로운 태그<h1>")
$('body').text("<h1>새로운 태그<h1>")상위의 코드는 html에 적용한 값으로 나오고, 하위의 태그는 <> 까지 포함한 문자열로 출력이 된다.
스타일 속성 값을 리턴(스타일 같은 것) : .css( 속성명 || 객체 )
console.log($('h1').eq(0).css('color'));
console.log($('h1').eq(0).css('color', 'blue'))- 속성명만 호출하거나, 뒤에 하나를 더 넣어주면 해당 속성의 값을 변경하는 것
- 삭제를 하기 위해서는 뒤에 공백('') 으로 작성해주면 된다.
DOM 객체 삭제 : .remove()
DOM 객체를 비운다. : .empty()
$('h1').eq(0).remove();
$('h1').eq(0).empty();
console.log($('h1'))- remove 의 경우, 완전히 삭제를 한다. (선택자 포함, 자식까지 삭제)
- empty 의 경우 내부에 있는 속성을 비우기만 하고, 아예 제거하는 것은 아니다. ( 콘솔로 확인하면 인덱스가 4개)
내부에서 맨 뒤로 요소를 추가 : 추가대상.append( 추가 위치) || 추가대상.appendTo( 추가위치)
var text = "<h2> 추가된 요소 </h2>"
$(text).appendTo($('h1').eq(4));
그 뒤에 추가하는 것 : 추가할 것. after( 추가할 위치 )
- append 는 내부에 추가하는 것이라면, after은 바깥쪽 뒤에 추가하는 것이다.
복사 : clone()
$('h1').eq(0).clone().appendTo($('h1').eq(4))
value 값을 리턴 / 값을 저장 : .val() / .val(저장할 값)
인덱스 호출하는 속성 : index( 인덱스 호출할 내용)
사용자 정의 속성 : data- 나중에 호출할 때는 data("속성명") 으로 확인해주면 된다.
<script src = 'https://code.jquery.com/jquery-3.7.1.min.js'></script>
<script>
$(function(){
$(".kirby").click(function(){
var idx = $(".kirby").index($(this)); // class에서 몇 번째인 건지 리턴하게 된다.
$("input[type='hidden']").eq(idx).val(); // 히든 인풋인 것들이 몇 번째의 인덱스인 건지 리턴하는 것
console.log( $(".kirby").index($(this)))
//사용자 정의 속성 사용
console.log($(this).data("name"))
})
})
</script>
</head>
<body>
<!-- 사용자 정의 속성 (data - ) 로 작성하면 된다. -->
<img src="img/kirby1.png" class="kirby" data-name = "A">
<img src="img/kirby1.png" class="kirby" data-name = "B">
<img src="img/kirby1.png" class="kirby" data-name = "C">
<img src="img/kirby1.png" class="kirby" data-name = "D">
<img src="img/kirby1.png" class="kirby" data-name = "E">
<!--선택하면 큰 이미지를 끌고 오는 건 input type hidden으로 숨겨 놓을 수 있다-->
<input type = "hidden" name = "imgName" value="A">
<input type = "hidden" name = "imgName" value="B">
<input type = "hidden" name = "imgName" value="C">
<input type = "hidden" name = "imgName" value="D">
<input type = "hidden" name = "imgName" value="E">
</body>- jquery 에서 this를 사용하려면 한 번 묶어줘야 한다.
이벤트
- 호출 방식 : .이벤트명(콜백함수) || .bind(이벤트명, 콜백함수) || .on(이벤트명, 콜백함수)
- 제거 방식 : .off(이벤트명)
- 웹문서 로딩 순서 : 요청 → 응답 → 브라우저가 문서 해석 → DOM 생성 → ready 실행
→ 이미지, 동영상, CSS ... 로드 → 렌더링 종료 → load
<script>
window.onload = function(){
alert('load'); // 문서가 전부 로드가 되고 나서 실행
}
$(document).ready(function(){
alert('ready') // dom이 생성이 된 후
})
$(function(){
alert('$function') // document와 동일
})
</script>- ready 우선 출력 후($function도 출력 후) load 가 보인다.
- 작업할 때 언제 보여야 하는 것인지(시점) , 어디서 보여야 하는 것인지( 이벤트 대상)
이벤트의 종류, 이벤트발생 시 실행될 함수를 확인해야 한다.
클릭하면 이벤트 발생하게 : .click( 콜백 함수 )
<script>
$(function(){
$(".list").click(function(){
alert($(this).text());
})
})
</script>
</head>
<body>
<div class = "list"> 제목 1 </div>
<div class = "list"> 제목 2 </div>
<div class = "list"> 제목 3 </div>
<div class = "list"> 제목 4 </div>
<div class = "list"> 제목 5 </div>
</body>- this 를 사용하여, 클릭할 때마다 그에 맞는 text가 출력이 되게 하는 것.
클래스의 존재 여부 : .hasClass( 클래스명 )
'프로그래머로 레벨업! > jQuery' 카테고리의 다른 글
| jQuery 효과 (0) | 2024.04.24 |
|---|