码迷,mamicode.com
首页 > Web开发 > 详细

Jquery过滤性选择器

时间:2016-05-13 00:03:27      阅读:360      评论:0      收藏:0      [点我收藏+]

标签:

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

看下正确的效果:

技术分享

Jquery过滤性选择器

标签:

原文地址:http://blog.csdn.net/u013045370/article/details/51344757

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!