HTML, CSS 및 jQuery를 사용하여 웹 페이지 내에서 검색 기능을 구현하는 방법-JS 튜토리얼-php.cn

HTML, CSS 및 jQuery를 사용하여 웹 페이지 내에서 검색 기능을 구현하는 방법

PHPz

풀어 주다： 2023-10-25 11:38:10

원래의

1437명이 탐색했습니다.

HTML, CSS 및 jQuery를 사용하여 웹 페이지 내에서 검색 기능을 구현하는 방법

HTML, CSS, jQuery를 사용하여 웹페이지 내 검색 기능을 구현하는 방법

소개:
인터넷의 급속한 발전과 함께 검색 엔진은 사람들이 정보를 얻는 중요한 수단이 되었습니다. 그러나 어떤 경우에는 사용자가 원하는 것을 빠르게 찾을 수 있도록 특정 웹페이지 내에 검색 기능을 구현해야 할 수도 있습니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 웹 페이지 내에서 검색 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 코드의 HTML 부분:
먼저 HTML을 사용하여 기본 웹 페이지 구조를 구축하고 검색 상자와 검색 결과를 표시할 영역을 추가해야 합니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页内搜索功能</title>
    <style>
        /* CSS样式代码在下一部分给出 */
    </style>
</head>
<body>
    <div class="search-container">
        <input type="text" id="search-input" placeholder="请输入关键字...">
        <button id="search-button">搜索</button>
    </div>
    <div id="search-results">
        <!-- 搜索结果显示在这里 -->
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        /* jQuery代码在下一部分给出 */
    </script>
</body>
</html>

로그인 후 복사

2. CSS 부분 코드:
다음으로 CSS를 사용하여 검색창과 검색결과 영역의 스타일을 아름답게 만들어야 합니다. 코드는 다음과 같습니다.

.search-container {
    text-align: center;
    margin-top: 20px;
}

#search-input {
    width: 300px;
    height: 40px;
    font-size: 16px;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    outline: none;
}

#search-button {
    width: 80px;
    height: 40px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    margin-left: 10px;
    cursor: pointer;
}

#search-results {
    margin-top: 20px;
}

로그인 후 복사

3. 코드의 jQuery 부분:
마지막으로 jQuery를 사용하여 검색 기능을 구현합니다. 코드는 다음과 같습니다.

$(document).ready(function() {
    $("#search-button").click(function() {
        var keyword = $("#search-input").val(); // 获取搜索关键字

        // 遍历网页内的所有要搜索的元素，并将匹配到的结果显示在搜索结果区域
        $("p, h1, h2, h3, h4, h5, h6").each(function() {
            var text = $(this).text(); // 获取元素的文本内容
            if (text.includes(keyword)) {
                $(this).css("background-color", "yellow");
            } else {
                $(this).css("background-color", ""); // 清除之前匹配到的元素的背景颜色
            }
        });
    });
});

로그인 후 복사

코드 설명:

먼저 $(document).ready() 함수에 코드를 작성하여 실행 전 페이지가 로드되는지 확인합니다.
검색 버튼을 클릭하면 검색창에 키워드가 표시되고, Each() 함수를 사용하여 검색할 모든 요소를 순회합니다(여기서는 검색할 요소가 페이지의 제목과 단락이라고 가정). ).
각 요소에 대해 text() 함수를 통해 텍스트 내용을 얻고, include() 함수를 사용하여 키워드가 포함되어 있는지 확인합니다.
키워드가 포함되어 있으면 CSS() 함수를 통해 배경색을 노란색으로 설정하여 결과가 일치함을 나타내고, 키워드가 포함되지 않으면 이전에 일치한 요소의 배경색을 지웁니다.

요약:
HTML, CSS, jQuery의 조합을 통해 웹페이지 내에서 검색 기능을 쉽게 구현할 수 있습니다. 사용자는 검색창에 키워드를 입력할 수 있으며, 검색 버튼을 클릭하면 페이지에 키워드와 일치하는 요소가 강조 표시되어 사용자가 원하는 콘텐츠를 빠르게 찾을 수 있습니다. 위의 내용은 특정 코드 예제가 포함된 사용 지침입니다. 모든 사람에게 도움이 되기를 바랍니다.

위 내용은 HTML, CSS 및 jQuery를 사용하여 웹 페이지 내에서 검색 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!