JQuery 연습

스파르타코딩/스파르타코딩 2주차 2022. 5. 24. 21:06

JQuery 연습하기

<사용법>

JQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
를 <head>안에 복사하여 넣어주면 완료

javascript 명령을 주기 위해서는 명령을 내릴 대상을 지칭해주어야한다. (id 값을 정해주어 지칭한다)

전에 만들어두었던 나홀로메모장을 불러와

아티클 URL 박스에 id 값을 'article-url' 로 지칭했다.

콘솔창에

$('#article-url').val(); 를 입력하면

'세종대왕' 값을 출력하였다.

이번엔 반대로 콘솔에서 '아티클URL'의 값을 넣어보자

콘솔창에

$('#article-url').val('장영실'); 를 입력하면

아티클 URL 박스안에 세종대왕이 -> 장영실 로 값이 바뀌는걸 확인할 수 있다.

다음은 아티클URL의 부모 div 를 post-box 로 지칭한 후

hide() 와 show() 해보았다.

$('#post-box').hide()

입력하자 박스가 사라졌다.

다시

$('#post-box').show() 를 해주자 박스가 보인다.

'포스팅박스 열기' 버튼을 -> '랄라'로 변경해보기

$('#btn-posting-box').text('랄라')

다음은 `(백틱)을 사용하여 temp_html 에 버튼 생성을 담은 후

append 를 이용해 cards-box 뒤에 버튼을 생성해보자

let temp_html = `<button>나는 버튼이다</button>` 로 temp_html에 값을 담은 후

$('#cards-box').append(temp_html) 해주자 'cards-box' 뒤에 temp_html (나는 버튼이다) 가 생성되었다.

usop의 개발일지 usop의 개발일지