首页 > 文章列表 > 了解jQuery选择器的不同类型及用法

了解jQuery选择器的不同类型及用法

选择器 属性 操作
381 2024-02-28

jQuery是一款流行的JavaScript库,它简化了在网页上操作HTML元素、事件处理、动画效果和Ajax等操作的过程。在使用jQuery进行开发时,熟练掌握各种选择器种类及其用途是至关重要的。选择器是jQuery中用于选取指定元素的方法,可以根据需要精准选择想要操作的元素,从而实现更加灵活的开发。

1. 基础选择器

  1. 元素选择器:选择所有指定元素,语法为$("element")。例如,$("p")选取所有段落元素。

    $("p").css("color", "red");
  2. ID选择器:选择特定id的元素,语法为$("#id")。例如,$("#myId")选取id为"myId"的元素。

    $("#myId").hide();
  3. 类选择器:选择指定类的元素,语法为$(".class")。例如,$(".myClass")选取类为"myClass"的元素。

    $(".myClass").fadeIn();

2. 层级选择器

  1. 后代选择器:选择指定元素的后代元素,语法为$("parent descendant")。例如,$("div p")选取所有div元素内的段落元素。

    $("div p").addClass("highlight");
  2. 子元素选择器:选择指定元素的直接子元素,语法为$("parent > child")。例如,$("ul > li")选取ul元素下的直接子元素li。

    $("ul > li").hover(function(){
     $(this).toggleClass("hover");
    });
    
    ### 3. 过滤选择器
  3. 第一个元素:选择第一个匹配的元素,语法为:first。例如,$("li:first")选取第一个li元素。

    $("li:first").css("font-weight", "bold");
  4. 最后一个元素:选择最后一个匹配的元素,语法为:last。例如,$("li:last")选取最后一个li元素。

    $("li:last").css("color", "blue");

    4. 内容选择器

  5. 包含指定文本内容的元素:选择包含指定文本内容的元素,语法为:contains(text)。例如,$("p:contains('Hello')")选取包含文本"Hello"的段落元素。

    $("p:contains('Hello')").addClass("highlight");
  6. 空元素:选择没有子元素的空元素,语法为:empty。例如,$("div:empty")选取空的div元素。

    $("div:empty").text("This div is empty");

    5. 状态选择器

  7. 可见元素:选择可见的元素,语法为:visible。例如,$("div:visible")选取可见的div元素。

    $("div:visible").fadeOut();
  8. 隐藏元素:选择被隐藏的元素,语法为:hidden。例如,$("div:hidden")选取被隐藏的div元素。