jquery 쿼리 스트레치 상자

JQuery는 간단하고 사용하기 쉬운 JavaScript 라이브러리입니다. 이는 많은 일반적인 JavaScript 작업을 캡슐화하고 HTML 문서 및 DOM 요소를 조작하는 간단한 방법을 제공합니다. 이 기사에서는 독자에게 JQuery를 사용하여 쿼리 확장 상자를 만드는 방법을 소개합니다.

쿼리 확장 상자는 사용자가 쿼리 조건을 입력하고 결과를 반환할 수 있는 웹 애플리케이션의 일반적인 구성 요소입니다. 일반적으로 텍스트 상자와 선택적인 "검색" 버튼이 포함됩니다. 사용자가 쿼리 조건을 입력하면 스트레치 박스가 입력 조건에 따라 결과를 자동으로 필터링하여 사용자가 필요한 것을 더 빠르게 찾을 수 있도록 도와줍니다.

JQuery를 사용하여 쿼리 스트레치 상자를 만들려면 다음 단계가 필요합니다.

1. HTML 문서에서 스트레치 상자 요소를 만듭니다.

HTML의 기본 요소를 사용하여 스트레치 박스를 만들 수 있습니다. 일반적으로 스트레치 상자에는 입력 상자와 검색 버튼이 포함되어 있습니다. 입력 상자는 쿼리 조건을 입력하는 데 사용되고, 검색 버튼은 검색 작업을 실행하는 데 사용됩니다.

다음은 쿼리 확장 상자를 생성하기 위한 간단한 HTML 코드입니다.

<div class="search-container">
  <input type="text" placeholder="输入搜索关键字...">
  <button class="search-button">搜索</button>
</div>

이 예에서는 "text" 입력 상자 유형의 DIV 요소와 "search-container"라는 클래스 이름을 가진 DIV 요소를 생성합니다. 클래스 이름이 "search-button"인 검색 버튼. 입력 상자의 "placeholder" 속성은 사용자가 입력해야 하는 내용을 이해하는 데 도움이 되도록 입력 상자에 대한 기본 텍스트를 제공합니다.

2. 페이지에 JQuery 라이브러리 추가

JQuery 라이브러리를 사용하려면 페이지의 헤드 또는 하단에 JQuery 라이브러리에 대한 링크를 추가해야 합니다. 다음은 HTML 페이지에 JQuery 라이브러리를 추가하는 간단한 링크입니다:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

이 링크를 사용하여 JQuery 라이브러리를 HTML 문서에 추가하면 JQuery의 모든 기능을 사용하여 문서 요소를 조작할 수 있습니다.

3. JQuery 코드를 작성하여 쿼리 기능 구현

페이지에 스트레치 상자 요소를 만들고 JQuery 라이브러리를 추가한 후에는 JQuery 코드 작성을 시작하여 스트레치 상자 기능을 구현할 수 있습니다. 입력 상자에 입력한 텍스트로 요소를 필터링하고 결과를 페이지에 표시하기 위해 다음 코드를 작성하겠습니다.

$(document).ready(function(){
    $('.search-button').click(function(){
        var searchText = $('.search-container input').val();
        $('.search-list li').each(function(){
            if($(this).text().toUpperCase().indexOf(searchText.toUpperCase()) == -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});

위의 JQuery 코드는 다음 단계를 사용합니다.

1. 페이지가 준비되었을 때만 실행되는 함수로 코드를 래핑하기 위해 .ready() 함수를 사용합니다.
2. 검색 버튼을 클릭할 때 실행되는 함수에 코드를 래핑하기 위해 .click() 함수를 사용합니다.
3. 먼저 사용자가 입력한 쿼리 기준을 가져오며 이는 검색 상자 값에 저장됩니다.
4. 우리는 .each() 함수를 사용하여 결과가 포함된 요소 목록을 탐색합니다(여기서 요소 목록은 예를 들어 클래스 이름이 "search-list"인 순서가 지정되지 않은 목록을 사용합니다).
5. 각 요소에 대해 함수를 실행하고 쿼리 조건이 요소의 텍스트와 일치하면 해당 요소를 표시하고 그렇지 않으면 숨깁니다.

사용자가 검색 버튼을 클릭하면 JQuery 코드는 목록의 각 요소를 확인하고 쿼리 기준이 포함되어 있지 않으면 해당 요소를 숨깁니다. 쿼리 기준이 포함된 경우 계속 표시됩니다.

4. CSS 스타일링

마지막으로 쿼리 확장 상자를 별도의 요소 집합처럼 보이게 하려면 일부 CSS 스타일을 추가해야 합니다. 다음은 페이지의 모든 쿼리 확장 상자에 검색 상자 및 검색 버튼의 스타일을 적용하는 간단한 CSS 스타일입니다.

.search-container {
  display: flex;
  align-items: center;
}

.search-container input[type=text] {
  padding: 8px;
  font-size: 17px;
  border: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.search-container button {
  padding: 10px;
  font-size: 17px;
  border: none;
  background-color: #388e3c;
  color: #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

.search-container button:hover {
  background-color: #388e3c;
}

위 CSS 스타일에서는 .search-container 클래스 아래에 몇 가지 스타일을 정의했습니다. 검색창과 검색 버튼이 포함된 DIV 요소에 적용됩니다. 또한 입력 상자와 검색 버튼에 특정 스타일을 정의하여 더욱 아름답게 보이도록 했습니다.

결론

이 기사에서는 독자들에게 JQuery를 사용하여 쿼리 스트레치 상자를 만드는 방법을 소개했습니다. 우리는 HTML 요소 생성, JQuery 라이브러리 추가, JQuery 코드 작성, CSS 스타일 추가의 네 단계를 거쳐 이 목표를 달성했습니다. JQuery를 사용하면 쿼리 확장 상자를 더 쉽게 만들 수 있을 뿐만 아니라 웹 애플리케이션을 더욱 사용자 친화적이고 사용하기 쉽게 만듭니다.

위 내용은 jquery 쿼리 스트레치 상자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!