본문 바로가기 메뉴 바로가기

코딩 공부 코딩 공부

메뉴보기
  • 분류 전체보기 (113)
    • Script Sample (34)
      • Search Effect (6)
      • Slide Effect (8)
      • Quiz Effect (5)
      • Mouse Effect (8)
      • Parallax Effect (7)
    • Javascript (25)
    • HTML (8)
    • CSS (18)
    • MYSQL (7)
    • REACT (2)
    • PHP (18)
    • jQuery (1)
흔적남기기
검색하기 폼

최근 글

댓글

태그

흔적

  • 다녀간 사람들
  • 오늘 온 분
  • 어제 온 분
공지사항
링크
«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함
Script Sample에 관한글 (34)
searchEffect02 - includes()

const searchBox = document.querySelector("#search-box"); //변수 searchBox에 #search-box(input태그)담는다. const cssList = document.querySelectorAll(".list ul li"); //변수 cssList에 li태그(css속성저장된 li태그들) 담는다. const cssCount = document.querySelector(".count em") //변수 csscount에 em태그(전체속성갯수나타내는태그) 담는다. cssList.forEach((e, index) => { //문서 내 li태그들을 하나씩 순회한다. e.classList.add("show"); //모든 li태그에 class = "show"를 추가..

Script Sample/Search Effect
searchEffect01 - indexOf()

searchBox.addEventListener("keyup", () => { //input를 클릭했을 때 이벤트 설정 const searchWord = searchBox.value; //사용자가 입력한 데이터 저장소 console.log(searchWord); //사용자가 입력한 데이터 저장소 변수에 저장 cssList.forEach(el => { //다수의 li을 const cssName = el.dataset.name; //CSS 속성 값을 변수에 저장 if(cssName.indexOf(searchWord)){ //사용자가 입력한 값에 데이터가 있는지 확인 el.classList.add("hide"); //데이터가 있으면 클래스 hide를 추가 } else { el.classList.remove("..

Script Sample/Search Effect
이전 1 2 3 4 5 다음
이전 다음
© 2018 webstoryboy

티스토리툴바