jQuery深度笔记:从基础到高级

一、jQuery简介

  jQuery是一个快速、小巧且富有特色的JavaScript库。自2006年诞生以来,它已经成为Web开发中最受欢迎的工具之一。通过简化和统一JavaScript API,jQuery使得开发者能够更高效地编写交互式网页和复杂的前端应用。

二、选择器

  jQuery的选择器是其核心特性之一,它使得定位HTML元素变得非常简单。以下是选择器的一些示例:

  1. 基础选择器

    #id: 选择具有特定ID的元素。
    .class: 选择具有特定类的元素。
    element: 选择特定类型的元素。
    示例代码

// 改变ID为myId的元素的背景颜色
$("#myId").css("background-color", "red");

// 隐藏所有类为myClass的元素
$(".myClass").hide();
  1. 层次选择器

    ancestor descendant: 选择给定祖先元素的所有后代元素。
    示例代码

// 选择p元素内的所有span元素
$("p span").css("color", "blue");
  1. 过滤选择器

    :first, :last: 选择第一个或最后一个匹配的元素。
    :even, :odd: 选择偶数或奇数匹配的元素。
    示例代码

// 选择第一个li元素
$("li:first").css("text-decoration", "underline");
  1. 属性选择器

    [attribute]: 选择带有指定属性的元素。
    示例代码

// 选择所有带有title属性的元素并改变它们的背景颜色
$("input[title]").css("background-color", "yellow");
  1. 表单选择器

    :input: 选择所有输入元素(如,