jQuery 学习笔记

1. 简介

jQuery 是一款快速、简洁的 JavaScript 库，具有良好的跨浏览器兼容性。它使得处理 HTML 文档、处理事件、动画效果、DOM 操作变得更加便捷。

2. 基础语法及选择器

载入 jQuery

在 HTML 页面中载入 jQuery 库可以通过以下方式实现：

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

基础语法

jQuery 的基础语法如下：

javascriptCopy Code
$(selector).action();

其中，$ 符号定义 jQuery； selector 用于选择 HTML 元素； action() 执行对选择元素的操作。

选择器

选择器用于定位 HTML 元素。常见的选择器有：

$(element)：选择指定元素。
$(#id)：选择指定 id 的元素。
$(.class)：选择指定类名的元素。

示例代码：

javascriptCopy Code
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

该代码会在页面中所有按钮被点击时隐藏所有段落。

3. 事件

jQuery 可以很方便地绑定与触发事件。常见的事件有：

click：当元素被单击时触发。
dblclick：当元素被双击时触发。
mouseenter：当鼠标进入元素时触发。
mouseleave：当鼠标离开元素时触发。

示例代码：

javascriptCopy Code
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

该代码会在页面上所有段落被单击时隐藏对应的段落。

4. 动画

jQuery 可以方便地创建动画效果。常见的动画效果有：

$(selector).hide(speed,callback)：渐进式地隐藏指定元素。
$(selector).show(speed,callback)：渐进式地显示指定元素。
$(selector).toggle(speed,callback)：在.hide() 和 .show() 之间切换。

示例代码：

javascriptCopy Code
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});

该代码会在页面中所有按钮被点击时隐藏或显示所有段落。

5. DOM 操作

jQuery 可以很方便地操作 DOM 元素。常见的操作有：

$(selector).html(content)：设置 HTML 内容。
$(selector).text(content)：设置文本内容。
$(selector).val(value)：设置表单字段的值。

示例代码：

javascriptCopy Code
$(document).ready(function(){
  $("button").click(function(){
    $("div").html("<h1>Hello World!</h1>");
  });
});

该代码会在页面中所有按钮被点击时设置所有 <div> 元素为 Hello World! 的标题。

6. AJAX

jQuery 的 AJAX 功能可以用于在不重新加载整个页面的情况下，在后台与服务器交换数据。

示例代码：

javascriptCopy Code
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "demo_test.txt", success: function(result){
      $("#div1").html(result);
    }});
  });
});

该代码会在页面中所有按钮被点击时请求服务器上的 demo_test.txt 文件，并将结果显示在 <div id="div1"> 元素中。

7. 快捷方法

jQuery 还提供了很多快捷方法来简化常见的操作。例如：

$.get()：使用 AJAX HTTP GET 请求从服务器上获取数据。
$.post()：使用 AJAX HTTP POST 请求向服务器上发送数据。
$(document).ready()：当文档加载完毕时执行指定的函数。

以上是 jQuery 的一些基础知识及常用功能，希望能对您有所帮助。