Ginkela
Ginkela

锋利的jQuery学习笔记

看书时随手整理的jQuery的相关内容及API，之后会将相应的功能与JavaScript进行比对整理。

jQuery选择器

  • jQuery中无法使用DOM对象的方法
    $("#foo").html() //效果等于document.getElementById("foo")

  • $("#tt")获取的永远是对象，即使网页上没有此元素

  • 基本选择器

    • $("#myDiv") //根据给定的ID选择匹配的元素，返回：单个元素
    • $(".myClass") //根据给定的样式名称选择匹配的元素，返回：集合元素
    • $("div") //根据给定的元素名称选择匹配的元素，返回：集合元素
    • $("#myDiv,div.myClass,span") //根据给定的规则选择匹配的元素，返回：集合元素
    • $("*") //选择页面所有元素，返回：集合元素

  • 层次选择器

    • $("div span") //选择所有DIV元素下的所有span元素（所有后代元素），返回：集合元素
    • $("div>span") //选择所有DIV元素下的span子元素（仅子元素），返回：集合元素
    • $(".myClass+div") //选择样式名称为myClass的下一个DIV元素，返回：集合元素
      等价于 $(".myClass")`.next("div");
    • $(".myClass~div") //选择样式名称为myClass之后的所有DIV元素，返回：集合元素
      等价于 $(".myClass")`.nextAll();
    • $(".myClass").siblings("div") //选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素

  • 过滤选择器（index从0开始）

    • $("div:first") //选择所有DIV元素下的第一个DIV元素，返回：单个元素
    • $("div:last") //选择所有DIV元素下的最后一个DIV元素，返回：单个元素
    • $("div:not(.myClass)") //选择所有样式不包括myClass的DIV元素，返回：集合元素
    • $("div:even") //选择所有索引是偶数的DIV元素，返回：集合元素
    • $("div:odd") //选择所有索引是奇数的DIV元素，返回：集合元素
    • $("div:eq(index)") //选择所有索引等于index的DIV元素，返回：集合元素
    • $("div:gt(index)") //选择所有索引大于index的DIV元素，返回：集合元素
    • $("div:lt(index)") //选择所有索引小于index的DIV元素，返回：集合元素
    • $(":header") //选择所有标题元素（h1,h2,h3），返回：集合元素
    • $("div:animated") //选择所有正在执行去画的DIV元素，返回：集合元素

  • 内容过滤选择器

  • $(":contains(text)")//选择所有内容包含text的元素，返回：集合元素

  • $("div:empty") //选择所有内容为空的DIV元素，返回：集合元素

  • $("div:has(span)")//选择所有含有SPAN子元素的DIV元素，返回：集合元素

  • $("div:parent") //选择所有含有子元素的DIV元素（包括文本元素），返回：集合元素

  • 可见性选择器

  • $(":hidden")//选择所有不可见的元素（type="hidden" style="display:none" style="visibility:none"），返回：集合元素

  • $(":visible") //选择所有可见的元素，返回：集合元素

  • 属性过滤选择器

  • $("div[id]")选择拥有属性id的元素

  • $("div[title=test]")选择属性title为"test"的

    元素

  • $("div[title!=test]")title不等于"test"的div

  • $("div[title^=test]")title以"test"开始的div

  • $("div[title$=test]")title以"test"结束的div

  • $("div[title*=test]")title含有"test"的div

  • $("div[title|=en]")title等于en或以en为前缀（en-data）的元素

  • $("div[title~=uk]") title用空格分隔的值中包含字符uk的元素

  • $("div[id][title$='test']")拥有属性id，且title以"test"结束的div

  • 子元素过滤选择器

    • $(":nth-child(index/even/odd/3n+1)") //选择每个父元素下的第index/偶数/奇数/索引值是3n+1的子元素
      :eq(index)只能匹配一个元素，且Index从0开始，:nth-child可以匹配多个元素，Index从1开始
    • $(":first-child")//选择每个父元素下的第一个子元素，返回：集合元素
    • $(":last-child") //选择每个父元素下的最后一个子元素，返回：集合元素
    • $("ul li:only-child") //在UL元素中选择只有一个LI元素的子元素，返回：集合元素

  • 表单对象属性选择器

    • $("#myForm:enabled")//选择ID属性为myForm的表单的所有可用元素，返回：集合元素
    • $("#myForm:disabled") //选择ID属性为myForm的表单的所有不可用元素，返回：集合元素
    • $("#myForm:checked") //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素
    • $("#myForm:selected") //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素

  • 表单选择器

    • $(":input") //选择所有