본문 바로가기

jQuery7

jQuery를 사용해서 문자열 분리하는 방법 | split() 안녕하세요. 혀코입니다. 이번 시간에는 jQuery를 사용해서 문자열을 분리하는 방법에 대해서 알아보도록 하겠습니다. jQuery로 문자열을 분리할 때는 split() 함수를 사용합니다. 아래와 같이 URL 비슷한 문자열이 있다고 가정해 보겠습니다. let customURL = "https://www.naver.com/en-us/products/cell-phone"; let customURL2 = "https://www.naver.com/en-us/downloads/cell-phone"; 여기서 구조적으로 products 또는 download 단어가 있는 부분만을 추출고자 할때, 해당 단어를 추출하는 방법은 아래와 같이 진행하면 됩니다. customURL.split('/'); // ["https:", ".. 2020. 8. 1.
jQuery에서 mouseenter, mouseleave 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 jQuery에서 mouseenter와 mouseleave를 사용하는 방법에 대해서 알아보겠습니다 jQuery에서 mouseenter와 mouseleave를 사용하면, 특정 html 요소에 마우스를 올려놓거나 내려놓거나 할때의 이벤트를 잡아서 이펙트를 구현할 수 있습니다. Hello mouseenter는 mouse가 클래스가 mouse-enter인 html 요소에 올려지게 되면, 해당 이벤트를 감지하게 되고, 위 코드에서 function(){}을 사용해서 이펙트 효과를 구현했습니다.. 여기서는 text를 사용해서 클래스가 mouse-event인 html 요소안의 p 태그를 찾아 그 해당 텍스트를 Mouse is entered로 변경했습니다. mouseleave는 mo.. 2020. 2. 18.
jQuery에서 find 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 jQuery에서 find를 사용하는 방법에 대해서 알아보겠습니다. jQeury에서 find를 사용하면 원하는 html 태그를 쉽게 찾을 수 있습니다. Hi. My name is Hyukho. Welcome to my blog 여기에서 jQuery find를 사용해서 span 태그를 찾고 span 태그의 텍스트 색상을 빨간색으로 지정해보겠습니다. Hi. My name is Hyukho. Welcome to my blog jQuery find를 사용해서 p 태그 안의 span 태그를 찾고 css를 사용해서 span 태그안의 텍스트 색상을 빨간색으로 변경했습니다. 이렇게 jQuery에서 find를 사용하는 방법에 대해서 알아봤습니다. 유용하셨다면, 공감과 구독 부탁 드립.. 2020. 2. 16.
jQuery에서 addClass, removeClass 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 jQuery에서 addClass, removeClass 사용하는 방법에 대해서 알아보겠습니다. jQuery에서 addClass를 사용하면, selector로 잡은 html 태그에 class를 지정할 수 있으며, removeClass를 사용하면, selector로 잡은 html 태그에 class를 제거할 수 있습니다. Hello World div 태그의 p 태그에는 원래 class 가 없는데, addClass를 사용해서 red class를 추가해줬습니다. style에는 red 클래스로 글자색을 빨간색으로 설정해두었기 때문에 결과적으로 글자는 Hello World가 빨간색 글자로 표시됩니다. 이번에는 removeClass 를 사용해 보겠습니다. Hello World d.. 2020. 2. 16.
jQuery에서 text를 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 jQuery에서 text를 사용하는 방법에 대해서 알아보겠습니다. jQuery에서 text를 사용하면, html 태그 안의 텍스트를 변경할 수 있습니다. 우선, div 태그안에 p를 만들고 Hello World 글자를 적어놓겠습니다. Hello World 다음으로 jQuery text를 사용해서 Hello World 글자를 바꿔 보도록 하겠습니다. Hello World jQuery selector로 div의 p를 잡고, text를 써서 Hello World를 Text has been changed!로 변경했습니다. 이렇게 jQuery에서 text를 사용하는 방법에 대해서 알아봤습니다. 유용하셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2020. 2. 15.
jQuery에서 css를 사용하는 방법 안녕하세요. 혀코입니다. 오늘은 jQuery에서 css를 사용하는 방법에 대해서 알아보겠습니다. jQeury에서 css를 사용하는 방법은 다음과 같습니다. 우선, 간단한 html로 사각형을 그려보겠습니다. 가로가 300px 세로가 200px인 violet 의 배경색을 가진 직사각형을 그렸습니다. css를 사용해서 배경색을 변경해 보겠습니다. `$('.box').css({'background-color': 'yellow'});`를 써서 직사각형의 배경색을 노란색으로 바꿀 수 있습니다. 이렇게 jQuery에서 css를 사용하는 방법에 대해서 알아봤습니다. 유용하셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2020. 2. 15.
jQuery로 Tab UI 구현하는 방법 안녕하세요 혀코입니다. 오늘은 jQuery로 Tab UI를 구현하는 방법에 대해서 알아보겠습니다. index.html 에 파일을 다음과 같이 작성합니다. 어벤저스 에너지원 ‘큐브’를 이용한 적의 등장으로 인류가 위험에 처하자 국제평화유지기구인 쉴드 (S.H.I.E.L.D)의 국장 닉 퓨리(사무엘 L.잭슨)는 [어벤져스] 작전을 위해 전 세계에 흩어져 있던 슈퍼히어로들을 찾아나선다. 아이언맨(로버트 다우니 주니어)부터 토르(크리스 헴스워스), 헐크(마크 러팔로), 캡틴 아메리카(크리스 에반스)는 물론, 쉴드의 요원인 블랙 위도우(스칼렛 요한슨), 호크 아이(제레미 레너)까지, 최고의 슈퍼히어로들이 [어벤져스]의 멤버로 모이게 되지만, 각기 개성이 강한 이들의 만남은 예상치 못한 방향으로 흘러가는데… 지구의.. 2020. 1. 4.