本系列博客汇总在这里：JQuery 汇总
Jquery 子元素选择器
一、子元素选择器
1、:nth-child(index/even/odd/equation)
用法: $(”ul li:nth-child(2)”);
返回值：集合元素。
说明：匹配其父元素下的第 N 个子或奇偶元素。这个选择器和之前说的基础过滤 (Basic Filters) 中的 eq() 有些类似，不同的地方就是前者是从 0 开始，后者是从 1 开始。
2、:first-child
用法：$(”ul li:first-child”);
返回值：集合元素。
说明：匹配第一个子元素 。’:first’ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素。这里需要特别的记忆下区别。
3、:last-child
用法: $(”ul li:last-child”);
返回值：集合元素。
说明：匹配最后一个子元素。’:last’ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素。
4、: only-child
用法：$(”ul li:only-child”);
返回值：集合元素。
说明：如果某个元素是父元素中唯一的子元素，那将会被匹配。如果父元素中含有其他元素，那将不会被匹配。意思就是：只有一个子元素的才会被匹配！
二、代码演示
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${path }/js/jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
function myclick()
{
//序号从1开始
//var liObj = $("ul li:nth-child(3)");
//var liObj = $("ul li:first-child");
//var liObj = $("ul li:last-child");
var liObj = $("ul li:only-child");
alert(liObj.html());
}
</script>
</head>
<body>
<ul>
<li>列表项1</li>
<!-- <li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li> -->
</ul>
<input type="button" value="点击" onclick="myclick()">
</body>
</html>
此处不再演示，请读者自行尝试！
如有错误，欢迎指正！
149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
