📢input박스에 있는 글을 동적으로 바꾸고,posting-box를 사라졌다 나타나게 하겠다.
준비
🎈첫번째로 해야할것은 임포트를 써야한다.
https://www.w3schools.com/jquery/jquery_get_started.asp
전에 언급한 w3schools이다.
여기에서 JQuery CDN 코드를 가져온다.
나홀로 메모장에 붙인다.<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>그런데 이것을 head안 아무곳이나 쓰면되는데 이미 부트스트랩가져오면서 써있었기 때문에 굳이 두개일 필요는 없다.
📢input박스의 값가져 오기
🎈움직이는걸 명령하려면
CSS에서 명찰을 달아주고 지칭을 한것처럼 class대신 이번엔
id라는 값을 준다.
🎈id값 주기
<input type="article_url" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">그런데 이미 id값이 이미 들어가 있다.
지우고 대신 article-url이라고 넣어준다.
위에 label for어쩌고에 빨간글씨가 뜰것인데 짝이 안맞는다는 소리다.
<label>아티클 URL</label>이렇게 남기고 지워준다.
🧪동적으로 이름 바꾸기
🎈인풋박스에 이름 적어주기
브라우저로 가서 아티클 url input박스 안에 "세종대왕"이라 입력한다. 그다음 console창에
$('#article-url').val();
👉$('#article-url')이것은 지칭이구나.
👉val()은 input박스의 밸류를 가져온거구나.
"세종대왕"👉세종대왕이라는 값이 나온다.
🎈인풋박스에 있던 이름 바꾸기
$('#article-url').val('장영실');
👉.val('장영실');지칭한걸 이렇게 하라는거구나.
👉브라우저 input박스 안이 "세종대왕"에서 "장영실"로 바뀌었다.
📢div 보이기/숨기기
🎈파이참에 posting-box옆에 "post-box"라는 id값을 준다.
<div class="posting-box" id="post-box">
🧪posting-box 사라지게 하기/나타나게 하기
브라우저로가서 콘솔창에
$('#post-box').hide() S.fn.init [div#post-box.posting-box] $('#post-box').show() S.fn.init [div#post-box.posting-box]
🎈CSS의 값 가져와보기
$('#post-box').css('width') '500px' $('#post-box').css('width','700px') S.fn.init [div#post-box.posting-box]posting-box의 width값을 가져오고 동적으로 width값을 바꿀수도 있다.
🧪display 속성값 가져올것이다.
$('#post-box').css('display') 'block'display값을 가져올수 있다.posting-box가 나와있다.block이라는 값이다.
🧪posting-box를 hide해본다
$('#post-box').hide()
🧪다시 display값을 가져온다.
$('#post-box').css('display') 'none'그럼 'none'이라고 나온다.
👉display값이 block이면 보이고,none이면 안 보이는 상태구나를 알 수 있다.
📢 태그 내 텍스트 입력하기
📢 포스팅박스 열기 버튼 텍스트 바꿔볼 것이다.
🎈id값 주기
🎈파이썬내에 onclick hey 옆에"btn-posting-box"라는 id를 준다.
<a id="btn-posting-box" class="btn btn...
(onclick,id,class 순서는 상관없다...)
🎈인풋박스의 버튼 텍스트 바꾸기
🎈console창에
$('#btn-posting-box').text('랄라')
라고 치면 버튼내의 텍스트 포스팅박스 열기가 랄라로 바뀌어져있다.
val은 input박스에다가 쓰는것이고,이런 텍스트를 바꾼다 할때는 .text해서 바꾸거나 가지고 오면 된다.
📢 태그 내 html 입력하기
📢 나홀로메모장에 있는 카드들을 동적으로 붙일것이다.
🎈파이참에서 id값을 준다.
<div class="card-columns" id="cards-box">
🎈console창에서
let temp_html = `<button>나는 버튼이다</button>`
⭐(백틱)으로 써도 문자열이 된다.밑에처럼 쓰면 HTML처럼 변환시켜주는 기능도 한다.
$('#cards-box').append(temp_html)여기서
`<button>나는 버튼이다</button>`이게.append(temp_html)여기로
들어간것이다.
그럼 아래에 "버튼이다"의 버튼이 붙는다.
🎈이번엔 카드를 붙여 보겠다.
console창에서
let temp_html = ``
(백틱 안에다 한장의 card div를 가져온다.)
$('#cards-box').append(temp_html)
으로 여러번 붙여주면
카드가 여러장 붙는다.
번외
🧪 title에 변수를 만들어서 내용에 수정해서 붙여놓고 싶다면,
let title = '아무거나 제목!!!'
let temp_html =`(card div 내용...~~여기 기사 제목이 들어가죠~~...)`
를 지우고
let temp_html =`(card div 내용...${title}...)`
로 바꾼다.
title이란 변수에 들어간 값(아무거나 제목!!!)이 ('#cards-box').append(temp_html)```
이걸로 붙여주기를 하면
'여기 기사 제목이 들어가죠'에서 '아무거나 제목!!!'으로 바뀐다.
