jQuery针对各类元素操作基础教程

1. 简介

jQuery是一个快速、小巧并且功能丰富的JavaScript库。它通过封装常用的JavaScript操作，使得开发者可以使用更简单的代码完成更多的工作，提高开发效率和质量。

本教程主要介绍jQuery针对各类元素操作的基础知识，包括通过选择器选择元素、修改元素属性、添加、删除和修改元素等常用操作。

2. 选择器

jQuery提供了丰富的选择器，可以根据不同的需求选择需要操作的元素。

2.1 基本选择器

• 标签选择器：$("tagname")
• 类选择器：$(".classname")
• ID选择器：$("#idname")

示例：

// 获取所有的p标签
$("p");

// 获取类名为"box"的元素
$(".box");

// 获取id为"content"的元素
$("#content");

2.2 层次选择器

• 后代选择器：$("ancestor descendant")
• 子元素选择器：$("parent > child")
• 兄弟元素选择器：$("prev + next")

示例：

// 获取id为"content"元素内所有的p标签
$("#content p");

// 获取id为"list"元素下第一个li标签
$("#list > li:first-child");

// 获取class为"sibling"的元素后面相邻的下一个div元素
$(".sibling + div");

2.3 过滤选择器

• :first：选择第一个匹配的元素。
• :last：选择最后一个匹配的元素。
• :even：选择下标为偶数的元素。
• :odd：选择下标为奇数的元素。
• :eq(n)：选择下标为n的元素。
• :gt(n)：选择下标大于n的元素。
• :lt(n)：选择下标小于n的元素。
• :not(selector)：选择不匹配指定选择器的元素。
• :has(selector)：选择包含指定选择器的元素。

示例：

// 获取表格中的第一行和最后一行
$("tr:first, tr:last");

// 获取序号为偶数的li元素
$("#list li:even");

// 获取文本框外的所有元素
$(":not(input[type='text'])");

// 获取包含文本框的父元素
$(":has(input[type='text'])");

3. 元素操作

3.1 获取元素属性

• html()：获取或设置元素的内容。
• text()：获取或设置元素的文本内容。
• val()：获取或设置表单元素的值。
• attr()：获取或设置元素的属性值。

示例：

// 获取id为"content"的元素的内容
$("#content").html();

// 设置id为"content"的元素的内容为"Hello, World!"
$("#content").html("Hello, World!");

// 获取id为"username"的input元素的值
$("#username").val();

// 设置id为"username"的input元素的值为"John"
$("#username").val("John");

// 获取id为"logo"的img元素的src属性值
$("#logo").attr("src");

// 设置id为"logo"的img元素的src属性值为"logo.png"
$("#logo").attr("src", "logo.png");

3.2 添加、删除和修改元素

• append()：在元素内部末尾插入内容。
• prepend()：在元素内部开头插入内容。
• after()：在元素后面插入内容。
• before()：在元素前面插入内容。
• remove()：删除匹配的元素以及它的子元素。
• empty()：删除元素的子元素。

示例：

// 在id为"content"的元素内部末尾添加p元素
$("#content").append("<p>这是新添加的内容</p>");

// 在id为"content"的元素内部开头添加p元素
$("#content").prepend("<p>这是新添加的内容</p>");

// 在id为"content"的元素后面添加p元素
$("#content").after("<p>这是新添加的内容</p>");

// 在id为"content"的元素前面添加p元素
$("#content").before("<p>这是新添加的内容</p>");

// 删除id为"child"的元素及其子元素
$("#child").remove();

// 删除id为"content"的元素的子元素
$("#content").empty();

4. 结语

本文介绍了jQuery针对各类元素操作的基本知识，包括选择器、元素属性获取与修改以及元素添加、删除和修改。更多详细用法请参考官方文档。