jquery常用函数大全

jQuery常用函数详解

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，本文将介绍一些常用的jQuery函数，帮助大家更好地理解和使用jQuery。

1、$() 选择器

$() 是jQuery的核心函数，用于选取HTML元素，它可以接收一个字符串参数，该参数可以是一个CSS选择器、一个DOM元素或者一个jQuery对象。

// 选取所有的<p>标签
var paragraphs = $("p");
// 选取id为"myDiv"的元素
var myDiv = $("#myDiv");
// 选取class为"myClass"的所有元素
var myClassElements = $(".myClass");

2、.html() 和 .text() 方法

.html() 方法用于获取或设置元素的HTML内容，而 .text() 方法用于获取或设置元素的文本内容。

// 获取id为"myDiv"的元素的HTML内容
var htmlContent = $("#myDiv").html();
// 设置id为"myDiv"的元素的HTML内容
$("#myDiv").html("<p>这是新的HTML内容</p>");
// 获取id为"myDiv"的元素的文本内容
var textContent = $("#myDiv").text();
// 设置id为"myDiv"的元素的文本内容
$("#myDiv").text("这是新的文本内容");

3、.attr() 和 .prop() 方法

.attr() 方法用于获取或设置元素的属性值，而 .prop() 方法用于获取或设置元素的属性值（包括布尔属性）。

// 获取id为"myDiv"的元素的href属性值
var hrefValue = $("#myDiv").attr("href");
// 设置id为"myDiv"的元素的href属性值
$("#myDiv").attr("href", "https://www.example.com");
// 获取id为"myDiv"的元素的checked属性值（布尔属性）
var checkedValue = $("#myDiv").prop("checked");
// 设置id为"myDiv"的元素的checked属性值（布尔属性）
$("#myDiv").prop("checked", true);

4、.addClass() 和 .removeClass() 方法

.addClass() 方法用于向元素添加一个类名，而 .removeClass() 方法用于从元素中移除一个类名。

// 向id为"myDiv"的元素添加一个名为"active"的类名
$("#myDiv").addClass("active");
// 从id为"myDiv"的元素中移除一个名为"active"的类名
$("#myDiv").removeClass("active");

5、.on() 和 .off() 方法

.on() 方法用于绑定一个事件处理函数到一个元素，而 .off() 方法用于移除一个元素上绑定的事件处理函数。

// 当id为"myDiv"的元素被点击时，执行clickHandler函数
$("#myDiv").on("click", clickHandler);
// 移除id为"myDiv"的元素上的click事件处理函数
$("#myDiv").off("click", clickHandler);