jquery 收藏本站

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，开发者可以更方便地操作 DOM 元素，处理用户交互事件，并实现复杂的页面效果。

类型

jQuery 主要有以下几种类型：

核心：提供基本的工具函数。
选择器：用于选择和过滤 HTML 元素。
属性操作：用于获取和设置元素的属性。
CSS 操作：用于操作元素的样式。
DOM 操作：用于创建、删除和修改 DOM 元素。
事件处理：用于绑定和处理事件。
动画：用于实现元素的动画效果。
Ajax：用于与服务器进行异步数据交互。

应用场景

网页交互：通过 jQuery 可以轻松实现复杂的用户交互效果。
动态内容加载：使用 Ajax 和 jQuery 可以实现页面内容的动态加载。
表单验证：可以方便地实现表单的客户端验证。
动画效果：可以实现各种动态的页面动画效果。

示例代码：收藏本站

假设我们要实现一个简单的“收藏本站”功能，可以使用 jQuery 来绑定点击事件并执行相应的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收藏本站</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="favorite-btn">收藏本站</button>

    <script>
        $(document).ready(function() {
            $('#favorite-btn').click(function() {
                if (window.sidebar && window.sidebar.addPanel) { // Firefox
                    window.sidebar.addPanel(document.title, window.location.href, "");
                } else if (window.external && ('AddFavorite' in window.external)) { // Internet Explorer
                    window.external.AddFavorite(location.href, document.title);
                } else if (window.opera && window.print) { // Opera
                    this.title = document.title;
                    return true;
                } else { // Other browsers (Chrome, Safari)
                    alert('请按 Ctrl+D 手动收藏本页！');
                }
            });
        });
    </script>
</body>
</html>