jquery函数

jQuery 函数概述

jQuery 是一个快速、简洁的 JavaScript 库，通过封装原生 JavaScript 功能，简化 DOM 操作、事件处理、动画和 AJAX 等任务。其核心函数 $() 或 jQuery() 是 jQuery 的入口点，用于选择元素或创建 DOM 对象。

常用 jQuery 函数分类

选择器函数

• $("selector")：通过 CSS 选择器获取 DOM 元素。

  $("p") // 选择所有 <p> 元素
  $(".class") // 选择所有 class="class" 的元素

• $(document).ready()：确保 DOM 完全加载后执行代码。

  $(document).ready(function() {
    // 初始化代码
  });

DOM 操作函数

• .html()：获取或设置元素的 HTML 内容。

  $("#div1").html("<p>New content</p>");

• .text()：获取或设置元素的文本内容。

  $("#div1").text("Hello World");

• .val()：获取或设置表单元素的值。

  

  $("input").val("New value");

事件处理函数

• .on()：绑定事件监听器。

  $("#btn").on("click", function() {
    alert("Button clicked");
  });

• .click()：绑定点击事件简写。

  $("#btn").click(function() {
    console.log("Clicked");
  });

AJAX 函数

• $.ajax()：发送异步 HTTP 请求。

  

  $.ajax({
    url: "data.json",
    method: "GET",
    success: function(data) {
      console.log(data);
    }
  });

• $.get() 和 $.post()：简化 GET/POST 请求。

  $.get("data.json", function(data) {
    console.log(data);
  });

动画函数

• .hide() 和 .show()：隐藏或显示元素。

  $("#box").hide(1000); // 1秒内渐隐

• .animate()：自定义动画效果。

  $("#box").animate({ left: "250px" }, 1000);

链式调用

jQuery 支持链式调用，多个操作可串联执行：

$("#div1")
  .css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

注意事项

• 避免与其他库的 $ 冲突，可通过 jQuery.noConflict() 解决。
• 优先使用 .on() 而非已废弃的 .bind() 或 .delegate()。
• 在现代前端开发中，原生 JavaScript 或框架（如 React/Vue）可能更高效，但 jQuery 仍适用于遗留项目或快速原型开发。