这里以 <li> 为例
1.第一个为li的子元素,最后一个为li的子元素 $("li:first") $("li:last")
2.第n个子元素（从0开始索引） $("li:eq(n-1)")
3.获取包含“text”字符串内容的全部元素对象 $( " li:contains ( ‘ text ‘ ) " )
4.获取指定包含某个元素名的全部<li>元素,比如含p元素 $( " li:has( ‘p‘ )")
5.获取全部不可见的元素 $( "li:hidden" )
6.获取全部可见的元素$("li:visible")
7.[attribute=value]获取与属性名和属性值完全相同的全部元素 如，title是“蔬菜”所在的li $("li[title=‘蔬菜‘]")
8.[attribute*=value]获取属性值中包含指定内容的全部元素 如，包含“果”字的title所在的li $("li[title*=‘果‘]")
9.:first-child子元素过滤选择器选择一组相同标签中的第一个元素（与first区别：first只能选择一个元素，first-child返回一个集合）
（其实这里跟父子元素没有关系，在选择的时候是以li:first-child或li:first做选择，而不是ul:first进行选择）
实操一个实例，http://www.imooc.com/code/1103
点击“更多”的时候，展示隐藏的2个li,同时将“更多”变为“简化”；点击“简化”的时候隐藏起来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<body>
<ul>
<li hidden>1</li>
<li hidden>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<a href="#">更多</a>
<script>
var $data=$("li:hidden");
$("a").click(function(){
if($("a").html()=="更多")
{
$data.show(1000);
$("a").html("简化");
}
else if($("a").html()=="简化")
{
$data.hide(1000);
$("a").html("更多");
}
})
</script>
</body>
</html>
刚开始犯了一个低级错误， var $data=$("li:hidden");放到了click函数里，导致每次都要重获取，展开后就获取不到了，所以只能展开不能隐藏。
看下正确的效果：
时间： 2024-10-09 23:13:21