[HTML,CSS] 2주차 JQuery

JQuery → HTML의 요소를 조작하는 편리한 javascript를 미리 작성해둔 것 (라이브러리)

              " 임포트 " 해야 사용할 수 있음 ( 코드를 가져오는 것)

https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

↓1주차 완성본 불러오기 

2022.03.01 - [HTML, CSS] - [HTML,CSS] 1주차 완성본

 

• input 박스의 값을 가져와보기

$('#post-url').val(); // id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.

 

 

• div 보이기 / 숨기기

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

// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)

 

$('#post-box').show();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다) $('#post-box').show();

 

• css의 값 가져와보기 

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

$('#post-box').css('display');

 

$('#post-box').show();

$('#post-box').css('display');

 

 

• 태그 내 텍스트 입력하기

1) input box의 경우

$('#post-url').val('여기에 텍스트를 입력하면!');

 

2) other - button text change

<button id="btn-posting-box" type="button" class="btn btn-primary"> // 가리키고 싶은 버튼에 id 값을 준다음

$('#btn-posting-box').text('포스팅 박스 닫기');

 

 

• 태그 내 html 입력하기

1) 버튼 넣기

let temp_html = '<button>나는 추가될 버튼이다!</button>';

$('#cards-box').append(temp_html);

 

2) 카드 넣기

let temp_html = `<div class="card">

                          <img class="card-img-top" src="${img_url}" alt="Card image cap">

                          <div class="card-body">

                              <a href="${link_url}" class="card-title">${title}</a>

                              <p class="card-text">${desc}</p>

                              <p class="card-text comment">${comment}</p>

                          </div>

                      </div>`;

$('#cards-box').append(temp_html);