jQuery知识点整理

什么是jQuery

jQuery是一个JavaScript库，它可以快速并且优化JavaScript代码的编写，尤其是对于DOM（文档对象模型）的操作。

jQuery的引入

只需要在HTML文档中添加以下代码，就可以引入jQuery。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery语法

jQuery语法基于CSS选择器，它通过选择器查找HTML元素，并对它们进行操作。

jQuery中的函数以$开头，可以让我们很方便的使用jQuery库中的功能。

以下是一些常用的jQuery语法：

$(selector).action() : 选中元素并执行相应操作。
$(selector).css(property, value) : 设置CSS属性的值。
$(selector).html(content) : 设置或获取HTML元素的内容。
$(selector).attr(attribute, value) : 设置或获取HTML元素的属性值。
$(selector).val(value) : 设置或获取表单元素的值。

jQuery事件

jQuery事件是对用户触发的动作的响应。以下是一些常用的jQuery事件：

click() : 点击事件。
dblclick() : 双击事件。
mouseenter() : 鼠标进入事件。
mouseleave() : 鼠标离开事件。
change() : 转变事件。
keydown() : 键盘按下事件。

jQuery效果

jQuery效果可以让我们在操作元素时添加一些特殊的动画效果，以增强页面的交互性和可用性，以下是一些常用的jQuery效果：

hide() : 隐藏元素。
show() : 显示元素。
fadeIn() : 逐渐增强元素的不透明度以显示元素。
fadeOut() : 逐渐降低元素的不透明度以隐藏元素。
slideUp() : 将元素向上滑动。
slideDown() : 将元素向下滑动。

jQuery AJAX

通过jQuery AJAX，我们可以在不刷新整个页面的情况下从服务器加载数据。以下是一些jQuery AJAX常用的方法：

$.ajax() : 执行异步请求。
$.get() : 获取数据。
$.post() : 提交数据。
$.getJSON() : 获取JSON数据。
$.ajaxSetup() : 设置全局AJAX请求的属性。

示例一

在一个页面中，当我们点击一个按钮时，会通过AJAX获取数据并将其添加到页面中。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery AJAX</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){ // 点击按钮
                $.ajax({url: "https://api.github.com/users/jerry20021009",
                    success: function(result){
                        $("#detail").html(result.login); // 将获取到的数据添加到页面中
                    }});
            });
        });
    </script>
</head>
<body>
    <h1>jQuery AJAX</h1>
    <button>获取GitHub数据</button>
    <div id="detail"></div>
</body>
</html>

示例二

根据不同的用户输入，通过AJAX动态筛选和过滤出符合条件的数据。

<!DOCTYPE html>
<html>
<head>
    <title>动态筛选数据</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#search").on("keyup", function(){ // 用户输入时触发筛选操作
                var value = $(this).val().toLowerCase();
                $("table tr").filter(function(){ // 筛选和过滤元素
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </script>
</head>
<body>
    <h1>动态筛选数据</h1>
    <input type="text" id="search" placeholder="输入条件">
    <br>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>Alice</td>
            <td>18</td>
            <td>女</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>Charlie</td>
            <td>22</td>
            <td>男</td>
        </tr>
        <tr>
            <td>Davie</td>
            <td>19</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

以上就是jQuery的知识点整理的完整攻略。通过学习jQuery，我们可以方便地操作DOM元素，实现更加丰富、动态的页面效果，同时也能快速地加载和获取数据，提高网站的效率和流畅度。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery知识点整理 - Python技术站

jQuery知识点整理

jQuery知识点整理

什么是jQuery

jQuery的引入

jQuery语法

jQuery事件

jQuery效果

jQuery AJAX

示例一

示例二

相关文章