jQuery3

• 

  [JS] JQuery 윈도우 Event Methods JQuery Event Methods jQquery 에서 사용되는 윈도우 이벤트 종류에 대해 알아보겠습니다. 이벤트란? 웹 페이지가 응답할 때 발생하는 작업을 이벤트라고 합니다. 이 이벤트는 어떠한 일이 발생하는 정확한 순간을 의미합니다. 예를 들어 아래와 같은 이벤트를 사용할 수 있게 됩니다. 특정 요소에 마우스 Focus 요소 클릭 로딩이 끝난 후 작동 등... 일반적인 이벤트 종류 일반적으로 많이 사용되는 이벤트의 종류에 대해 알아보겠습니다. 문서 로딩 이벤트 ready() : 문서 로딩 - html의 문서가 로딩되었음을 알린다. (이미지, 동영상 등은 영향을 끼치지 않음) $(document).ready(function() { }); $(function() { }); 위 코드를 사용하게 되면 bo.. FRONT-END/JAVASCRIPT 2022. 9. 15.

• 

  (JS) 이미지의 src를 변경하는 방법 자바스크립트로 src 주소 변경 HTML에서 Img 태그에 src로 지정된 이미지 주소를 자바스크립트를 사용하여 바꾸는 방법에 대해 알아보도록 하겠습니다. Html html의 img 태그 src 주소는 example.svg 입니다. 이제 자바스크립트로 다른 주소를 할당해주도록 하겠습니다. Javascript $img = document.querySelector(".img-container > img"); $img.src = `./imgaes/another.svg`; JQuery JQuery를 사용해 위에 코드를 한 줄로 작성할 수 있습니다. $(".img-container > img").attr({ src: "./images/blog-logo.svg" }); 클래스를 추가하려면 아래와 같이 코드를 작성해.. FRONT-END/JAVASCRIPT 2022. 8. 23.

• 

  [JQuery] 원하는 위치에 요소 삽입 - insertBefore(), insertAfter(), prependTo(), appendTo() JQuery 요소 이동 원하는 위치에 어떠한 태그를 삽입해야 하는경우가 종종 있는데 오늘은 JQuery를 사용하여 위치 이동을 시켜보도록 하겠습니다. 이동시킬 요소 위 코드에서 onerror는 src의 이미지가 오류가 났을 때, 대체해주는 태그입니다. 삽입될 요소 이동시킬 요소를 만들었으니, 이제 이동이 이뤄질 위치 태그를 만들어 줍니다. 자바스크립트 div나 특정한 요소 안에 id를 만들고 자바스크립트를 이용해 이 div안에 방금 만든 img 태그를 넣어주기만 하면 됩니다. $(".target").insertBefore("source"); 그럼 아래와 같이 사용하면 되겠네요! $(".img").insertBefore("#comment-blog-img"); 여기서 .insertBefore은 요소의 삽입 .. FRONT-END/JAVASCRIPT 2022. 8. 23.