<주저리 주저리>
HTML 과 CSS 그리고 Javacscript 까지 배워가며 느낀 건 뭐든 첫 수업 시간이 가장 좋았다는 것......
HTML 은 코딩 입문하고 처음 배웠던 거라 정말 멘붕의 연속이었다. 선생님 말씀에 아무리 집중을 해도 여기가 외국어 교실인가....? 싶은 생각이 들 정도로 멘붕이었어서 h1 하나 작성할 때도 느릿...느릿.... 덜덜덜.... 했었는데
지금쯤 와서 돌이켜보면 지금은 내가 쫄지 않으면 뭐든 해낼 수 있다는 마인드로 바뀌었다는 게 느껴진다.
여전히 어렵고 낯설지만 틀렸을 때 기죽는 게 아니라 뭐가 틀렸는지 들여다보고 깨닫고 배워가는 과정을 익히게 됐다!
왜 이리 서론이 길었느냐면 이제 JQuery 를 배우기 시작했기 때문이다.
2월 다음은 3월이니 이제 겨울이 끝나가고 당연히 봄이 올거라고 생각하지 말기..... 나의 봄은 스스로 쟁취해야겠다 화이팅
1. JQuery (1) -기본 문장 및 명령어
제이쿼리의 실행문은 자바스크립트와 닮은 듯 조금 다르다.
제이쿼리 기본 문장
형식 1: $('선택자명').명령어()
형식 2: $('선택자명').명령어(). 명령어()
제이쿼리에서 사용하는 명령어
('선택자명').명령어(function(){실행문;});
2. JQuery (2) -기본 콘텐츠의 변경
$('선택자').text();
-> 선택자의 text 값 읽어오기
$('선택자').css("속성명");
-> 선택자 스타일의 해당 값 가져오기
$('선택자').html();
-> 선택자 의 하위 요소 노드의 값 읽어오기
css, text, html 을 사용해 선택자 선택 후 속성을 바꿔보자
배경컬러와 폰트 두께, 텍스트 내용 등이 바뀌었다.
3. JQuery (3) -제이쿼리 선택자
제이쿼리 선택자
:even (짝수번째)
:odd (홀수 번째)
:eq(index) (index 번째)
:gt(index) (괄호 안의 index 기준 뒤에 있는 모든 index)
:lt(index) (괄호 안의 index 기준 앞에 있는 모든 index)
:first (첫 번째)
:last (마지막)
:only-child (부모 요소 안에서 하나인 요소 선택)
제이쿼리 선택자를 사용해 css 속성을 바꾸어보자!
짜란
제이쿼리 기타 선택자
:has(요소) (특정 요소를 포함하는 요소 선택)
:contains('text노드') (특정 text를 포함한 요소 선택)
:empty (빈 요소 선택)
:parent (다른 요소를 포함한 요소)
:header (제목 요소)
:not(조건) (조건에 해당되지 않는 요소만 선택)
제이쿼리 기타 선택자를 사용해 속성을 바꾸어보자!
only-child 와 :not 요소 조심조심
모두 예쁘게 잘 나왔다
4. JQuery (4) -변수를 사용해 속성 가져오기
$('선택자').text("내용");
-> 선택자의 text 값 변경
$('선택자').css("속성명","속성값");
-> 선택자 스타일의 해당 값 변경
$('선택자').html("<></>);
-> 선택자 의 하위 요소 노드의 값 변경
let room 이라는 변수를 만들어 ul>li의 내용을
:first 와 :last 선택자를 사용해 변경한다.
짜란
5. JQuery (5) -선택자에 여러 스타일 한 번에 변경하기
$('선택자').css({속성:'값', 속성 :'값'});
background-color 와 backgroundColor 모두 사용 가능함.
#btn1을 클릭하면 p의 스타일 속성
1. 배경컬러 2. 글자색깔 3. 글자크기 를 바꾸어보자.
성공
변수 만들어 속성 가져오기, 스타일 변경 하기
씅공~!
반복문 사용해 버튼 클릭 시 다음 이미지 보이기
이미지는 총 7개,
if 문을 사용해 1~7로 간 후, 7 다음은 다시 1로 돌아올 수 있도록 계획해보았다.
주석 처리한 부분이 나 혼자 짜본 스크립트이다~!~!
i=1 로 시작하여 i<=7 까지는 만들어보고
변수 만들어 image 수 높여 반복할 수 있도록 만든 후
#btn01 클릭시 다음 이미지로 넘어갈 수 있도록 만들었는데 잘 실행되지 않음 ㅠㅠ
선생님은 다른 풀이로 풀어주셨는데, 스스로 해보고 싶어서 일단 스스로 짜보고 보여드리니 이 방식도 맞다며 내가 풀어왔던 방법에서 순서만 교정해주셨다.^_^
i를 2로 시작하여 if(i <7){i=1;}로 실행하여
변수 생성 후 images 에 i 넣고,
p.test를 선택해 text 에도 함꼐 증가할 수 있도록 i를 넣고
i++ 로 후 증감시켜주었다.
확인해보니 console.log에도 순서 잘 나오고 7 다음은 1로 반복도 수월하게 되었다!
6. JQuery (6) -객체의 추가 및 이동하기
객체 추가
$('선택자').prepend("<></>")
: 선택자의 내부에 맨 앞에 자식 요소 추가
$('선택자').append("<></>")
: 선택자의 내부에 맨 뒤에 자식 요소 추가
$('선택자').before("<></>")
: 선택자 앞에 노드 추가
$('선택자').after("<></>")
: 선택자 뒤에 노드 추가
객체 이동하기
$('선택자').prependTo("target")
: 선택자를 target의 맨 앞에 요소 삽입
$('선택자').appendTo("target")
: 선택자를 target의 맨 뒤에 요소 삽입
$('선택자').insertBefore("target")
: 선택자를 target의 맨 앞에 삽입
$('선택자').insertAfter("target")
: 선택자를 target의 맨 뒤에 삽입
#btn01을 클릭하면 #first의 선택자
선택자 앞에 <h 1>제목</h 1>
선택자 내부의 맨 앞에 start
선택자 내부의 맨 뒤에 end
선택자 뒤에 THE END 추가하기
뾰롱
이번엔 위치 이동
갤러리처럼 여러 개의 li 를 버튼을 클릭해 앞으로 뒤로 이동해가는 작업!
요렇게
조롷게
스스로 해내서 뿌듯했고 재밌었던 작업 ^_^
7. JQuery (7) -객체의 바꾸기 및 기타 변형하기
객체의 바꾸기
$('선택자').replaceWith()
-> 선택자를 다른 요소로 변경함.
$('선택자').replaceAll()
-> 선택자로 요소를 변경함.
기타 변형하기
$('선택자').remove()
-> 선택자와 일치하는 노드 제거
$('선택자').detach()
-> remove()와 같은 형상이지만 메모리에 남아있어 다시 사용 가능.
$('선택자').empty()
-> 선택자와 일치하는 노드 중 자식 노드들 제거
$('선택자').clone()
-> 선택자와 똑같은 노드를 복제하여 기억함.
객체를 바꾸어보자!
clone 이나 remove 같은 경우 console 창을 사용해 잘 확인한 후 적용할 수 있다.
