这里以 <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函数里,导致每次都要重获取,展开后就获取不到了,所以只能展开不能隐藏。
看下正确的效果: