本文详细分析了jQuery选择器在匹配子元素时的各种用法，包括:first-child、:last-child、:first-of-type、:last-of-type、:nth-child()、:nth-last-child()、:nth-of-type()和:only-child等。通过具体的HTML示例和JavaScript代码，展示了这些选择器如何在不同场景下选择和操作DOM元素。文章还提供了各个选择器在实际应用中的输出效果，帮助读者更好地理解和运用这些jQuery选择器。
jQuery选择器：
分类： 选择器： 描述：
子元素 :firstchild 匹配第一个子元素
:lastchild 匹配后一个子元素
:firstoftype1.9+ 选择所有相同的元素名称的第一个兄弟元素。
:lastoftype1.9+ 选择的所有元素之间具有相同元素名称的后一个兄弟元素。
:nthchild() 匹选中某个元素，该元素必须是某个父元素下的第n个子元 素。序号从1开始
:nthlastchild()1.9+ 选中某个元素，该元素必须是某个父元素下的倒数第n个子 元 素。序号从1开始
:nthoftype()1.9+ 选中某个元素，该元素必须是某个父元素下的指定类型第n 个子元素。序号从1开始
:nthlastoftype()1.9+ 选中某个元素，该元素必须是某个父元素下的指定类型倒数 第n个子元素。序号从1开始
:onlychild 如果某个元素是父元素中唯一的子元素，那将会被匹配
:onlyoftype1.9+ 选择所有没有兄弟元素和自己相同类型的元素
HTML部分： (图1)
分析输出内容：
输出1：3项(第19行的h2、第24行的li.pT2、第30行的li)
输出2：3项(第27行的li、第29行的ul、第33行的li)
输出3：5项(第19行的h2、第20行的p.pT1、第23行的ul、第24行的li.pT2、第30行的li)
输出4：5项(第19行的h2、第22行的p.pT1、第27行的li、第29行的ul、第33行的li)
输出5：2项(第46行的input)
输出6：4项(第19行的h2、第37行的label、第38行的input.pT2、第41行的label、第46行的input)
输出7：1项(第20行的p.pT1)
输出8：1项(第22行的p.pT1)
输出9：1项(第21行的p#P1.pT1)
输出10：1项(第21行的p#P1.pT1)
子元素：(jQuery部分)
var sZ1 = $(".div1 :first-child"); //div1下的第一个子元素
var sZ2 = $(".div1:last-child"); // div1后一个子元素
var sZ3=$(".div1:first-of-type");//div1下所有相同的元素名称的第一个兄弟元素
var sZ4=$(".div1:last-of-type");// div1下所有元素之间具有相同元素名称的后一 个兄弟元素。
var sZ5=$("divinput:only-child"); //如果某个元素是父元素中唯一的子元素，那将会被匹配。相当于 独生子的意思
var sZ6 = $("div:only-of-type"); //div下选择所有没有兄弟元素和自己相同类型的元素。如：没有亲兄弟的男孩
varsZ7=$("p:nth-child(2)");// :nth-child() 从1开始计算;选中某个元素，该元素必须是某个父元素下的第n个子元素；
varsZ8=$("p:nth-last-child(3)");//选中某个元素，该元素必须是某个父元素下的倒数第n个子元素。序号从1开始
varsZ9=$("p:nth-of-type(2)");//选中某个元素，该元素必须是某个父元素下的指定类型第n个子元素；
var sZ10 =$("p:nth-last-of-type(2)");//选中某个元素，该元素必须是某个父元素下的指定类型倒数第n个子元素。序号从1开始
把每个引用的值输出：
console.log(sZ1)console.log(sZ2) console.log(sZ3) console.log(sZ4) console.log(sZ5)
console.log(sZ6)console.log(sZ7) console.log(sZ8) console.log(sZ9)console.log(sZ10)
得到下图：1：3个 2：3个 3：5个 4：5个 5:2个 6:4个 7:1个 8:1个 9：1个 10:1个
各输出内容分析如图一右侧 输出1~10 所示
扫一扫
3411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
