728x90 반응형 제이쿼리12 [jQuery/html] 특정 문자열 포함 요소 선택하기: 실시간 검색 페이지 만들기 예제 (contains()) 특정 문자열을 포함한 요소를 선택 실시간 검색 페이지 만들기 서문 이번 포스팅은 제이쿼리와 정규식을 활용하여 검색을 하면 실시간으로 검색내용과 일치하는 메뉴만 보여주는 페이지를 만들어 보도록 하겠습니다. 이번 코딩에서 핵심은 :contains()를 사용하여 내가 입력한 검색어와 동일한 내용을 가진 요소를 찾아내는 것입니다. 위의 이미지처럼 검색창에 찾고 싶은 내용을 검색하면 검색한 내용과 일치하는 글을 형광색으로 하이라이트 처리하고, 어떤 탭에 몇 개의 일치하는 결과를 가지고 있는지 해당 탭을 통해서 보여주게 합니다. 본문 html 코드 작성 먼저 화면으로 보일 html 코드를 작성해 보겠습니다. CSS는 취향에 맞게 style 태그를 통해 만들어보세요. 🔎 질문 탭 1 질문 탭 2 질문 탭 3 질문 탭 4 Q. 첫번째 질문 test. Q. 두번째 질문 Q. 세번.. 2023. 12. 13. [javascript] jQuery로 전화번호 형식 유효성 검사하기: 정규 표현식 활용 방법 서문 사용자로부터 전화번호를 입력받았을 때, 그 번호가 올바른 번호인지 체크한 후 저장할 필요가 있습니다. 오늘은 정규식을 활용하여 사용자로부터 입력받은 휴대폰 번호가 올바른 형식으로 입력된 것인지 판단하고, 올바른 형식의 번호가 아니라면 경고창을 띄우고, 올바른 형식의 번호라면 하이픈('-')을 입력하지 않은 번호는 하이픈을 입력한 형식으로 변환시켜 주는 작업까지 해보겠습니다. 본문 전화번호 입력 박스와 jQuery문 작성 코드가 간단하기 때문에 한번에 적어보도록 하겠습니다. 전화번호 입력 : 전화번호를 입력받을 input 태그의 text를 만들어 줍니다. id는 pcs로 지정해 주겠습니다. 다음 jQuery문을 작성합니다. id가 pcs인 태그의 포커스가 해제되었을 때 (blur) pcs에 입력된 v.. 2023. 9. 27. [jQuery/html] 제이쿼리를 활용한 간단한 별점기능 리뷰 폼 작성 서문 물건을 사고 나서 리뷰를 작성하거나, 온라인으로 어떤 일이든 돈을 주고 나면 후기를 작성하는 경우가 많습니다. 이런 경우 후기에는 별점이 빠질 수 없습니다. 이런 별점 시스템을 통해서 사용자들은 좀더 쉽고 편하게 이 서비스의 품질을 알 수 있고, 내가 사용한 상품에 대해서도 상세한 후기를 적어 판매자와 이후 구매할 소비자들에게 좋은 영향을 끼칠 수 있습니다. 그럼 간단하게 이런 별점 시스템, 리뷰 폼을 작성하는 법을 알아보겠습니다. 오늘의 완성 결과물은 위와 같습니다. 시작합니다. html 코드 작성 먼저 html 코드를 작성 해 보겠습니다. 리뷰작성 폼 html 코드는 정말 간단하게 적어보았습니다. star_rating 클래스에는 별점을 표시해 줄 별의 이미지와 빈별의 이미지를 나타내줄 span태.. 2023. 9. 25. [jQuery] 클릭하지 않고 클릭 이벤트 발생 시키는 방법 서문 웹페이지를 작성하다 보면, 하나의 버튼을 클릭했을 때 다른 버튼도 함께 동작하면 좋겠다 싶은 때가 있습니다. 그때 사용하면 좋은 메서드인 trigger에 대해서 알아보도록 하겠습니다. 본문 . trigger 이벤트는 click와 같은 javaScript 이벤트 유형을 포함하는 문자열입니다. 트리거 이벤트는 트리거 이벤트 작동을 선언하기 전에 앞에서 이벤트 핸들러가 정의되어 있어야 합니다. 코드는 순차적으로 실행되니 트리거 이벤트 위에 꼭 클릭이벤트 처리를 하나 만들어 주셔야 합니다. 예를 들어 보겠습니다. 이미지를 보여주는 버튼 하나와 경고창을 생성하는 버튼 하나를 만들어주고, 경고창 버튼을 눌렀을 때, 이미지를 보여주는 버튼의 이벤트 효과도 함께 동작하게 해 보겠습니다. 간단하게 버튼 두 개와 이.. 2023. 4. 19. 이전 1 2 3 다음 728x90 반응형
