jquery 函数

jQuery 函数基础

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

常用函数分类

1. 选择器函数

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

     $(".class")  // 选择所有 class="class" 的元素
     $("#id")     // 选择 id="id" 的元素

   • find() / children()：在已选元素内查找子元素。

2. DOM 操作函数

   

   • html() / text()：获取或设置元素内容。

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

   • append() / prepend()：插入内容到元素内部末尾或开头。

3. 事件处理函数

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

     $("button").on("click", function() { alert("Clicked!"); });

   • click() / hover()：快捷事件方法。

4. 动画效果函数

   

   • hide() / show()：隐藏或显示元素。
   • animate()：自定义动画。

     $("#box").animate({ left: "100px" }, 500);

5. AJAX 函数

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

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

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

自定义 jQuery 函数

通过 $.fn 扩展 jQuery 插件：

$.fn.myPlugin = function() {
  this.css("color", "red");
  return this; // 保持链式调用
};
$("p").myPlugin(); // 调用自定义函数

链式调用

jQuery 函数通常返回对象本身，支持链式操作：

$("#element").addClass("active").fadeOut().delay(500).fadeIn();

性能优化建议

• 缓存选择器结果避免重复查询：

  var $element = $("#myElement");
  $element.hide();

• 使用事件委托减少绑定数量：

  $(document).on("click", ".dynamic-btn", handler);

jQuery 的详细文档可参考 官方 API。