18. JQUERY 다뤄보기

내가 공부하는 인강의 자료내용이다. 즉 JQUERY는 자바스크립트를 이용한 라이브러리이다. 그렇다면 미리작성된 자바스크립트 라이브러리를 어떻게 가지고 올까? 바로 import하면된다.

 

www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

 

--> jquery cdn 이다.

 

여기서 구글 cdn을 복사해서 head태그안에 붙여넣기 한다.

 

이때 주의할점은 , 부트스트랩 템플릿을 사용하고 있으면 이미 구글 jquery cdn이 부트스트랩 템플릿 안에 저장되어 있다는 점이다!

 

자 그럼 아래 목차대로 하나하나 jquery --> vanilla javascript로 완성해보자!

 

 

인풋박스(input) 의 내용물을 가져옥게 하기 위해서는 jquery 로는

 <div class="loginBox">
        <div class="form-group">
            <label for="article-url">아티클 url</label>
            <input type="email" class="form-control" id="article-url" aria-describedby="emailHelp"
                   placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>

여기서 id="article-url"이 부분을 jquery에서는 이용한다.

 

console 창에다가 

이렇게 하면 

 

$("#article-url").val();

input박스의 값을 id값을 통해 읽어 올수가 있다.

 

그렇다면 순수 자바스크립트로는 어떻게 할까?

 

어떤 블로그의 내용을 참조해서 위 인가으이 코드내용으로 바꿔보자

 

html

 

<input id="article-url" onkeyup="printName()"/>
<div id = "result"></div>

키보드가 눌러졌을떄 printName()함수가 작동하게끔 만들었다.

 

아래 result는 input폼에 입력받은 값을 출력할 것이다.

 

 이 부분을 참조해서, printName() 함수가 어떻게 작동하냐를 document.getElementById("name").value;를 이용해서 결괏값을 변수 const name 에다가  저장할수 있게끔 했다. 그다음 result라는 아이디를 가진 부분에 text를 넣어서 대입한다.

 

자 이번에는 

 

div 태그로 이루어진 박스를 보이게했다가 안보이게 헀다가 바꿔보자!

 

여기서 얘기하는 박스는

 

이 박스를 의미한다. 이 박스를 사라지게 하는 방법은

jquery : $("#post-box").hide()



javascript : document.getElementById("post-box").hide() 

 

이다, 또한 부여주게 하는 방법은

 

jquery : $("#post-box").show()



javascript : document.getElementById("post-box").show() 

이다.

 

 

jquery로 css를 조정하는 방법은

 

$("#post-box").css("width","700px")

 

제이쿼리로 700px로 width알수가 있다.

 

자바스크립트는

function change_color(val){
                var element = document.getElementById("rs_div");
                if(val=="red") element.style.color = "#ff0000";
                else if(val=="blue") element.style.color = "#0000ff";
                else if(val=="yellow") element.style.color = "#ffff00";   
            }

 이런식으로 바꿀수가 있다.!

 

 

다른거를 공부해보자

 

 

temp_html에 버튼태그문자열을 진짜 태그처럼 사용하기 위해서는 위와 같이 적으면 된다.

 

자바스크립트로는

function tagHtml(){
document.getElementById("cards-box").append(temp_html)

}

이렇게 한다음에 div 안의 onclick속성이  눌러지면 위 함수가 실행되게끔한다.