jquery函数

jQuery 函数概述

jQuery 是一个快速、简洁的 JavaScript 库，封装了常见的 DOM 操作、事件处理、动画效果和 Ajax 交互。其核心函数 $()（或 jQuery()）用于选择元素或创建 DOM 对象。

常用 jQuery 函数分类

选择器函数

通过 CSS 选择器获取元素：

$("#id")          // ID 选择器  
$(".class")       // 类选择器  
$("div")          // 标签选择器  
$("div p")        // 后代选择器  

DOM 操作函数

• 内容操作

  .html()          // 获取或设置 HTML 内容  
  .text()          // 获取或设置文本内容  
  .val()           // 获取或设置表单元素值  

• 属性操作

  .attr("name")    // 获取属性  
  .attr("name", "value") // 设置属性  
  .removeAttr("name") // 删除属性  

• 样式操作

  .css("property") // 获取样式  
  .css("property", "value") // 设置样式  
  .addClass("class")  
  .removeClass("class")  

事件处理函数

.click(function() { ... })   // 点击事件  
.on("event", handler)       // 通用事件绑定  
.off("event")               // 解绑事件  

动画效果函数

.hide()           // 隐藏元素  
.show()           // 显示元素  
.fadeIn()         // 淡入  
.fadeOut()        // 淡出  
.animate({params}, speed) // 自定义动画  

Ajax 函数

$.ajax({  
  url: "endpoint",  
  type: "GET/POST",  
  data: {key: value},  
  success: function(response) { ... }  
});  

链式调用示例

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

$("button").click(function() {  
  $(this).addClass("active").next().slideDown();  
});  

实用工具函数

• 遍历与过滤

  .each(function(index, element) { ... }) // 遍历  
  .filter(".class")                       // 过滤  

• 数组/对象操作

  $.each(array, callback)     // 遍历数组  
  $.extend(target, object)    // 合并对象  

注意事项

1. 确保在调用 jQuery 函数前引入库文件：

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 使用 $(document).ready() 确保 DOM 加载完成后再执行代码：

   $(function() {  
     // 代码逻辑  
   });