`
BradyZhu
  • 浏览: 245524 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery的过滤选择器

 
阅读更多

在jQuery中,有一种非常好用的选择器,名为jQuery过滤选择器,这种选择器可以根据很多需要进行选择,下面我

们来举例说明jQuery的过滤选择器的用法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>过滤选择器</title>
	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	
	<script type="text/javascript">
		$(function(){//选择第一个div
			$("#button1").click(function(){
				$("div:first").css("background","red");
			})
		})
		
		$(function(){//选择最后一个div
			$("#button2").click(function(){
				$("div:last").css("background","blue");
			})
		})
		
		$(function(){//选择索引为偶数的div
			$("#button3").click(function(){
				$("div:even").css("background","green");
			})
		})
		
		$(function(){//选择索引为奇数的div
			$("#button4").click(function(){
				$("div:odd").css("background","orange");
			})
		})
		
		$(function(){//选择索引为3的div
			$("#button5").click(function(){
				$("div:eq(3)").css("background","orange");
			})
		})
		
		$(function(){//选择class不是min的元素
			$("#button6").click(function(){
				$("div:not(.min)").css("background","orange");
			})
		})
		
		$(function(){//选择索引大于3的元素
			$("#button7").click(function(){
				$("div:gt(3)").css("background","red");
			})
		})
		
		$(function(){//选择索引小于3的元素
			$("#button8").click(function(){
				$("div:lt(3)").css("background","blue);
			})
		})
		
		
	</script>
  </head>
  
  <body>
   <div id="div1">div1</div>
   <br/><br/>
   <div class="min">div2<div>div3</div></div><br/><br/>
   <div>div3</div><br/><br/>
   <span>我们</span><br/><br/>
   
   <input id="button1" type="button" value="test1"/><br/>
   <input id="button2" type="button" value="test2"/><br/>
   <input id="button3" type="button" value="test3"/><br/>
   <input id="button4" type="button" value="test4"/><br/>
   <input id="button5" type="button" value="test5"/><br/>
   <input id="button6" type="button" value="test6"/><br/>
   <input id="button7" type="button" value="test7"/><br/>
   <input id="button8" type="button" value="test8"/><br/>
  
  </body>
</html>


分享到:
评论

相关推荐

    jQuery过滤选择器用法示例

    本文实例讲述了jQuery过滤选择器用法。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;...

    PPT和案例\jQuery选择器

    jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

    jquery基本过滤选择器

    jquery基本过滤选择器举例、代码、html、可直接运行、学习jquery入门篇

    jQuery过滤选择器用法分析

    本文实例讲述了jQuery过滤选择器用法。分享给大家供大家参考。具体分析如下: 在实践中,可以在基本选择器的基础上添加过滤选择器来完成查询任务,根据具体情况,在过滤选择器中可以使用元素的索引值、内容、属性、...

    jQuery过滤选择器:not()方法使用介绍

    主要介绍了jQuery过滤选择器:not()方法的使用,需要的朋友可以参考下

    jQuery过滤选择器详解

    本文主要给大家详细介绍了jQuery过滤选择器,包含基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器等,十分全面,需要的朋友可以参考下

    jQuery选择器之基本过滤选择器用法实例分析

    jQuery过滤选择器就是通过特定的过滤规则来筛选出所需的DOM元素,jQuery过滤选择器的过滤规则与CSS伪类选择器语法是相同的都以冒号(:)开头。按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤、属性...

    jQuery过滤选择器经典应用

    本文实例为大家分享了经典的jQuery过滤选择器应用,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;过滤选择器&lt;/title&gt; &...

    jquery可见性过滤选择器使用示例

    jquery可见性过滤选择器使用示例

    jQuery选择器-过滤器总结

    jQuery选择器过滤器全面的总结,老师推荐!

    最全面的jQuery基础知识

    jQuery过滤选择器,以冒号:开头 1、基本过滤选择器 2、内容过滤选择器 3、可见性过滤选择器 4、属性过滤选择器 5、子元素过滤选择器 6、表单对象属性过滤选择器 //不用加双引号的选择器 $(document) $(this)

    jQuery基础选择器练习题

    JQ 选择器大全包含:基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手

    使用jQuery内容过滤选择器选择元素实例讲解

    内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位,接下来为大家详细介绍下jQuery选择器,感兴趣的朋友可以参考下哈

    JQuery中基础过滤选择器用法实例分析

    主要介绍了JQuery中基础过滤选择器用法,涉及jQuery属性选择及样式操作的相关技巧,需要的朋友可以参考下

    JQuery中属性过滤选择器用法实例分析

    主要介绍了JQuery中属性过滤选择器用法,实例分析了jQuery属性过滤选择器的相关使用技巧,需要的朋友可以参考下

Global site tag (gtag.js) - Google Analytics