jQuery 过滤器选择器

╰+攻爆jí腚メ 2024-02-17 17:08 41阅读 0赞

## 一、过滤选择器 ##

过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同。

按照不同的过滤规则，过滤选择器可以分为以下几种：

1、基本过滤选择器

2、内容过滤选择器

3、可见性过滤选择器

4、属性过滤选择器

5、子元素过滤选择器

6、表单对象属性过滤选择器

## 1.1基本过滤选择器 ##

基本过滤选择器是过滤选择器中用的最多的一种，它的过滤规则主要体现在元素的位置(索引)上及一些特定的元素。

基本过滤选择器规则：

![Center][]

![Center 1][]

如下：

<body>
    
    <div id="n1">
        <input name="name" type="text" label="姓名"><br>
        <input name="age" type="text" label="年龄"><br>
        <input name="cellphone" type="text" label="手机号码">
    </div>
    <div id="message"></div>
    
    <hr/>
    <h2>网络小说</h2>
    <ul>
      <li>王妃不好当</li>
      <li>致命交易</li>
      <li class="three">迦兰寺</li>
      <li>逆天之宠</li>
      <li>交错时光的爱恋</li>
      <li>张震鬼故事</li>
      <li>第一次亲密接触</li>
    </ul>
    <h5>网络小说11</h5>
    </body>

<script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
    	  //第一个
    	 // $("li:first").css("color", "red");
    	   
    	  //最后一个
    	 // $("li:last").css("color", "green");
    	 
    	 //隔行变色  偶数 从 0 开始计数
    	// $("li:even").css("background", "cyan");
    	  
    	   //所有索引值为奇数的元素，从 0 开始计数
    	  //  $("li:odd").css("background", "yellow");
    	  
    	  //匹配一个给定索引值的元素 :eq(index)
    	//  $("li:eq(3)").css("font-size", "29px");
    	  
    	  //匹配所有大于给定索引值的元素 :gt(index)
    	  //  $("li:gt(3)").css("border", "2px solid red");
    	  
    	  //匹配所有小于给定索引值的元素  :lt(index)
    	 // $("li:lt(3)").css("background", "brown");
    	 
    	 //去除所有与给定选择器匹配的元素 :not(selector)
    	  //  $("li:not(.three)").css("color","pink");
          
        //选取所有标题元素，如h1~h6  :header
          $(":header").css("border","5px dashed red");
    	  
    	  
    	  //匹配当前获取焦点的元素。  :focus
         
    	  // 当<input>元素获得焦点时，在#message中显示"请输入[姓名]"、"请输入[年龄]"等相应的提示信息。
    $("input").on("focus blur", function(){
        var me = $(this);
        var msg = me.is(":focus") ? ("请输入[" + me.attr("label") + "]") : "";
        $("#message").html(msg);
    });
    	  
      });
    
    </script>

## 1.3可见性过滤选择器 ##

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

可见性过滤选择器规则：

![Center 2][] 如下：

<style type="text/css">
    #txt_hide {display:block; color:#F30;}
    #txt_show {display:none; color:#00C;}
    
    </style>
    </head>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
       $(function(){
    	   
    	   $("[name='show']").click(function(){
    		   
    		   $("p:hidden").show();
    		   
    		});
    		
    		
    		 $("[name='hide']").click(function(){
    		   
    		   $("p:visible").hide();
    		   
    		});
    		
    		
    		
    		//无效（不能有空格）
    		$("#txt_hide :visible").hide();
    		
    		//
    		//$("#txt_hide:visible").hide();
    	   
    	   
    	});
    </script>
    
    <body>
    <p id="txt_hide">点击按钮，我会被隐藏哦~</p>
    <p id="txt_show">隐藏的我，被显示了，嘿嘿^^</p>
    <input name="show" type="button" value="点击显示文字" />
    <input name="hide" type="button" value="点击隐藏文字" />
    </body>

## 1.4属性过滤选择器 ##

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

属性过滤选择器规则：

![Center 3][]

![Center 4][]

如下：

<script type="text/javascript" src="jquery-1.8.3.js"></script>
    
    <script type="text/javascript">
     $(document).ready(function(){
    	 // [attribute]可以根据是否包含某属性来选取元素
    	  //$("h2[title]").css("background","red");
    	 
    	 //[attribute=value]可以根据属性的值来选取元素
            // $("[title=hy_jp]").css("background","red");
    		
    		//[attribute!=value]匹配所有不含有指定的属性，或者属性不等于特定值的元素。
    		// $("[class!=odds]").css("background","red");
    		
    		//[attribute^=value]匹配给定的属性是以某些值开始的元素
    		//$("[title^=y]").css("background","red");
    		
    		
    		//[attribute$=value]匹配给定的属性是以某些值开始的元素
    		//$("[title$=jp]").css("color","red");
    		
    		
    		//[attribute*=value]匹配给定的属性是以包含某些值的元素
    		//$("[title*=l]").css("color","red");
    		
    		//[attr1][attr2][attrN]支持多属性条件复合查找元素
    	   $("li[class][title^=h").css("color","red");
    	 
      });
    </script>
    
    <body>
    <div id="box">
    		<h2 class="odds" title="cartoonlist">动画列表</h2>
    		<ul>
    			<li class="odds" title="kn_jp">名侦探柯南</li>
    			<li class="evens" title="hy_jp">火影忍者</li>
    			<li class="odds" title="ss_jp">死神</li>
    			<li class="evens" title="yj_jp">妖精的尾巴</li>
    			<li class="odds" title="yh_jp">银魂</li>
    			<li class="evens" title="hm_da">黑猫警长</li>
    			<li class="odds" title="xl_ds">仙履奇缘</li>
    		</ul>
    	</div>
    
    
    </body>

其他后续。。。。

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/1ce67b689cf6434f82c4e63924ec1575.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/8c57bc39c13140beb06a6b988f4025a3.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/d4d7c72a60324d0e9ac97dc158a1763c.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/7ea6caaa2df34a1ca119d2cbe61bab34.png
[Center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/02f6e637d2a34688b046a95adb8efe7f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，41人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery 过滤器选择器

一、过滤选择器　过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同。　　按照不同的过滤规则，过滤选择器可以分为以

╰+攻爆jí腚メ/ 2024年02月17日 17:08/ 0 赞/ 42 阅读

相关 jQuery选择器、jQuery关系选择器、jQuery伪选择器

一、jQuery选择器 1、父元素(向上遍历单一层级)：parent() 2、祖先元素：parents(selector) 3、子元素(向下遍历单一层级)：child

本是古典何须时尚/ 2023年10月07日 11:58/ 0 赞/ 81 阅读

相关 Jquery——Day1(Jquery基本选择器+过滤选择器+表单选择器+表单过滤器)

A、jQuery常规选择器，大体上来讲，简单选择器、进阶选择器、高级选择器 1、简单选择器，分为id选择器、元素（标签）选择器、类（class）选择器与cs

妖狐艹你老母/ 2022年07月12日 11:41/ 0 赞/ 338 阅读

相关 Jquery选择器-基本选择器

jquery作为我们常用前端工具之一，实际项目中常用的的选择器有id选择器(\id)、元素选择器(element)、样式选择器(.class)。 \id 概述:根据给定

秒速五厘米/ 2022年07月10日 05:58/ 0 赞/ 438 阅读

相关 jQuery-jQuery选择器

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择

雨点打透心脏的1/2处/ 2022年04月17日 07:05/ 0 赞/ 486 阅读

相关 jQuery选择器

jQuery选择器　　jq 选择器和 css 的选择器语法类似, jq 的选择器是他的灵魂　　就是将 html 中的节点元素选择出来的语法, 　　jq 的选择器

╰半夏微凉°/ 2022年01月11日 06:45/ 0 赞/ 351 阅读

相关 Jquery 选择器

使用特殊操作符或“组合符”可以将简单选择器组合起来，表达文档树中元素之间的关系。下表列举了jQuery支持的组合选择器。这些组合选择器与CSS3支持的组合选择器是一样的。下

╰半橙微兮°/ 2021年10月08日 05:58/ 0 赞/ 549 阅读

相关 jQuery-选择器

[http://www.webhek.com/post/jquery-61-selector.html][http_www.webhek.com_post_jquery-61-

小鱼儿/ 2021年09月28日 10:46/ 0 赞/ 510 阅读

相关 jQuery 选择器

1.基本选择器 $("id") //ID选择器 $("div") //元素选择器 $(".cla

﹏ヽ暗。殇╰゛Y/ 2021年07月24日 19:07/ 0 赞/ 566 阅读

相关 jQuery 选择器

jQuery 选择器

╰半橙微兮°/ 2021年07月04日 14:22/ 0 赞/ 626 阅读