jquery:内容过滤选择器和属性过滤选择器

最新推荐文章于 2024-04-05 12:11:45 发布
最新推荐文章于 2024-04-05 12:11:45 发布
阅读量1.2k 收藏
点赞数
文章标签： jquery div input function button class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/php398893944/article/details/7381391
版权

内容过滤选择器

   ①$("div:contains('您好')"):选出包含有文本"您好"的<div>

元素
        注意：只是内容
 
   ②$("div:empty"):选取不包含子元素(包含文本节点)的<div>

元素

   ③$("div:has(p)") 或者$(“div:has(.class)”)
:选取包含有

<p>元素的<div>元素

   ④$(“div:parent”):选取拥有子元素（包括文本元素）的

<div>

   ⑤$(“div:not(:contains(‘aa’))”)：选择不包含内容有“

aa“的div 

   ⑥$("div:hidden").show().css("background","green")：匹

配所有的不可见div元素也可以是input的hidden

   ⑦$("div:visible").css("background","green"):匹配所有

的可见元素 $(div:visible)


  案例：显示所有的input hidden:

   <input type="hidden" value="hidden_1">
   <input type="hidden" value="hidden_2">
   <input type="hidden" value="hidden_3">
   <input type="hidden" value="hidden_4">

   jquery:

      //显示隐藏的input $(input:hidden) 第一种
 $("#btn8").click(function (){
   
  $("input:hidden").each(function (i){
  //alert(i);
  alert(this.value);
  });   
  });  
  
  
     //显示隐藏的input $(input:hidden) 第二种
 $("#btn8_2").click(function (){
   
 $("input:hidden").each(function (index,domEle){
  //alert(index);
  //alert(domEle.value);
  alert($(domEle).val());
      });   
  });  
  
  
    //显示隐藏的input $(input:hidden) 第三种
 $("#btn8_3").click(function (){
   
     var input=$("input");
  $.each(input,function (index,domEle){
  //alert(index);
  //alert(domEle.value);
  alert($(domEle).val());
     });   
  });  

 

   小案例2:
           给每个p标签加一个onclick属性，并点击时显示值

       <p>这是第一个段落</p>
       <p>这是第二个段落</p>
       <p>这是第三个段落</p>
       <p>这是第四个段落</p>

       $("p").each(function (index,Element){
       $(Element).click(function(){
      //alert("aa");
     alert($(this).text());
     });
   
    });

属性过滤选择器
  
    ①$(“div[id]”)：选取拥有属性id的div元素
    ②$("div[id=one]")选取id=one的div $(div[id=one])
    ③$("div[id!=one]")选取id不=one的div $(div[id!=one])
   
    ④$("div[id][class!=three]")选取含有id且class!=three

的div $(div[id][class!=three])

    ⑤$("div[id^=o]")选取拥有id属性并且以o为开头的div

$(div[id^=o])

    ⑥$("div[id$=e]")选取拥有id属性并且以e为结尾的div

$(div[id$=e])

    ⑦$("div[class*=n]")选取拥有class属性并且含有n的div

$(div[class*=n])

    ⑧$("div[id*=h][class]")选取拥有class属性并且id含有h的

div $(div[id*=h][class])

 

 

 

<!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>练习选择器</title>
<style type="text/css">
div{
	width:150px;
	height:150px;
	background-color:#999;
	float:left;
	margin:30px;}

#three{
	width:100px;
	height:100px;
	margin:15px;
	background-color:#F90;}
	
.seven{
	display:none;}	
</style>
<script type="text/javascript" src="../include/jquery.js"></script>
<script type="text/javascript">
  
    $(document).ready(function (){
		
		//选中内容包含您好的div $(div:contains('您好'))
		$("#btn1").click(function (){
			
			$("div:contains('您好')").css("background","green");
		  });
			
		
		//选取不包含子元素（包括文本节点）的<div>元素 $(div:empty)
		$("#btn2").click(function (){
			
			$("div:empty").css("background","green");
		  });
		  
		  
		 //选取包含<p>元素的div $(div:has(p))
		 //包含各种标签都行<span>
		 //这样也行$("p:has(span)")
		$("#btn3").click(function (){
			
			$("div:has(p)").css("background","green");
		  });
				
			
		
		//选取拥有子元素包括文本节点的div $(div:parent)
		//parent与empty相反
		$("#btn4").click(function (){
			
			$("div:parent").css("background","green");
		  });	
			
		
		//选中内容不包含您好的div $(div:not(:contains('您好')))
		$("#btn5").click(function (){
			
			$("div:not(:contains('您好'))").css("background","green");
		  });	
		  
		  
		//匹配所有的不可见元素 $(div:hidden)
		$("#btn6").click(function (){
			
			$("div:hidden").show().css("background","green");
		  });	
		  
		  
		//匹配所有的可见元素 $(div:visible)
		$("#btn7").click(function (){
			
			$("div:visible").css("background","green");
		  });  
		  
		 
		 //显示隐藏的input $(input:hidden) 第一种
		$("#btn8").click(function (){
			
			$("input:hidden").each(function (i){
				//alert(i);
				alert(this.value);
				});			
		  });   
		
		
		//显示隐藏的input $(input:hidden) 第二种
		$("#btn8_2").click(function (){
			
			$("input:hidden").each(function (index,domEle){
				//alert(index);
				//alert(domEle.value);
				alert($(domEle).val());
				});			
		  });   
		
		
		//显示隐藏的input $(input:hidden) 第三种
		$("#btn8_3").click(function (){
			
			var input=$("input");
			$.each(input,function (index,domEle){
				//alert(index);
				//alert(domEle.value);
				alert($(domEle).val());
				});			
		  });   
		  
		  
		
		//给每个p标签加一个onclick属性，并点击时显示值  
		    $("p").each(function (index,Element){
		     $(Element).click(function(){
			   //alert("aa");
			  alert($(this).text());
			  });
			 
			 });
		 
		
		
		//选取拥有id的div
		$("#btn9").click(function (){
			
			$("div[id]").css("background","green");
		  });	
		
		
		//选取id=one的div $(div[id=one])
		$("#btn10").click(function (){
			
			$("div[id=one]").css("background","green");
		  });
		  
		  
		  //选取id不=one的div $(div[id!=one])
		$("#btn11").click(function (){
			
			$("div[id!=one]").css("background","green");
		  });
		  
		  
		  //选取含有id且class!=three的div $(div[id][class!=three])
		$("#btn12").click(function (){
			
			$("div[id][class!=three]").css("background","green");
		  });
		  
		  
		 //选取拥有id属性并且以o为开头的div $(div[id^=o])
		$("#btn13").click(function (){
			
			$("div[id^=o]").css("background","green");
		  });
		  
		  
		 //选取拥有id属性并且以e为结尾的div $(div[id$=e])
		$("#btn14").click(function (){
			
			$("div[id$=e]").css("background","green");
		  });
		  
		  
		 //选取拥有class属性并且含有n的div $(div[class*=n])
		$("#btn15").click(function (){
			
			$("div[class*=n]").css("background","green");
		  });
		  
		  
		 //选取拥有class属性并且id含有h的div $(div[id*=h][class])
		$("#btn16").click(function (){
			
			$("div[id*=h][class]").css("background","green");
		  });
		
		
		
		});

</script>
</head>

<body>

  <div id="one">
  
   id=one
    <div id="three" class="three">您好，我是id=three,class=three</div>
    
   </div>
   
 <div id="two">id=two</div>

 <div class="one">class=one
   <span>我是span</span>
 </div>
 
 <div class="two">class=two
   <p>我是一个p <span>我是span</span></p>
 </div>
 
 <div class="six"> </div>
 
 <div class="seven"> </div>
 <div id="one">id=one</div>
 
 <input type="hidden" value="hidden_1">
 <input type="hidden" value="hidden_2">
 <input type="hidden" value="hidden_3">
 <input type="hidden" value="hidden_4">
 
 <p>这是第一个段落</p>
 <p>这是第二个段落</p>
 <p>这是第三个段落</p>
 <p>这是第四个段落</p>

 <div style="width:150px; height:150px; clear:both;">
  
   <input type="button" id="btn0" value="清除样式">
   <input type="button" id="btn1" value="选中内容包含您好的div $(div:contains('您好'))">
   <input type="button" id="btn2" value="选取不包含子元素（包括文本节点）的<div>元素 $(div:empty)">
   <input type="button" id="btn3" value="选取包含<p>元素的div $(div:has(p))">
   <input type="button" id="btn4" value="选取拥有子元素包括文本元素的div $(div:parent)">
   <input type="button" id="btn5" value="选中内容不包含您好的div $(div:not(:contains('您好')))">
   <input type="button" id="btn6" value="匹配所有的不可见元素 $(div:hidden)">
   <input type="button" id="btn7" value="匹配所有的可见元素 $(div:visible)">
   <input type="button" id="btn8" value="显示隐藏的input 第一种 $(input:hidden)">
   <input type="button" id="btn8_2" value="显示隐藏的input 第二种 $(input:hidden)">
   <input type="button" id="btn8_3" value="显示隐藏的input 第三种 $(input:hidden)">
   <input type="button" id="btn9" value="选取拥有属性id的div $(div[id])">
   <input type="button" id="btn10" value="选取id=one的div $(div[id=one])">
   <input type="button" id="btn11" value="选取id不=one的div $(div[id!=one])">
   <input type="button" id="btn12" value="选取含有id且class!=three的div $(div[id][class!=three])">
   <input type="button" id="btn13" value="选取拥有id属性并且以o为开头的div $(div[id^=o])">
   <input type="button" id="btn14" value="选取拥有id属性并且以e为结尾的div $(div[id$=e])">
   <input type="button" id="btn15" value="选取拥有class属性并且含有n的div $(div[class*=n])">
   <input type="button" id="btn16" value="选取拥有class属性并且id含有h的div $(div[id*=h][class])">
 
 </div>

</body>
</html>


 

 

 

php398893944
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Jquery之选择器和过滤器
CruellyJohn的博客
10-10 904
基本选择器 基本选择器 功能 返回值 示例 $("#id") 根据给定的id匹配一个元素 单个元素 $(“xdl”):选取id值为xdl的元素 $(".class") 根据给定的类匹配元素 元素集合 $(".xdl"):选择所有class值为xdl的元素 $(“element”) 根据给定的元素名匹配元素 元素集合 $(“p”):选择所有&lt; p &gt;元素 $(...
JQuery中属性过滤选择器用法实例分析
10-24
主要介绍了JQuery中属性过滤选择器用法,实例分析了jQuery属性过滤选择器的相关使用技巧,需要的朋友可以参考下
jQuery：表单选择器、过滤器
dengfengling999的博客
07-24 885
代码】jQuery表单选择器、过滤器。
jQuery基础——使用选择器—2过滤选择器
weixin_57575133的博客
11-03 859
过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素，过滤选择器的语法形式与CSS的伪类选择器的语法格式相同，以冒号作为前缀标识符。根据需求的不同，过滤选择器又可以分为定位过滤器、内容过滤器和可见过滤器。
JQuery全部过滤选择器详细介绍上
业精于勤，荒于嬉
07-22 833
1、:first 用法: $(“tr:first”) ; 返回值 单个元素的组成的集合2、:last 用法: $(“tr:last”) 返回值 集合元素3、:not(selector)用法: $(“input:not(:checked)”)返回值 集合元素4、:even 用法: $(“tr:even”) 返回值 集合元素5、: odd 用法: $(“tr:odd”) 返回值 集合元素6、:eq(index)用法: $(“tr:eq(0)”) 返回值 集合元素7、:gt(index)用法: $(“tr:gt(
jQuery--过滤选择器（可见性过滤选择器、属性过滤选择器）详解
吴声子夜歌的博客
10-01 2778
可见性过滤选择器 可见性过滤选择器是指根据元素的可见性来筛选元素的选择器。 选择器 描述 返回 :hidden 选取所有的不可见元素，或者ytpe为hidden的元素 jQuery对象数组 :visible 选取所有的可见元素 jQuery对象数组 其中，:hidden选择器用于选取所有不可见元素，包括< input type=“hidden” />、< ...
jQuery对象、基本选择器、表单属性过滤器和实现Ajax请求简介
Reggie97的博客
04-05 758
本文详细介绍了jQuery的含义，并介绍饿了DOM对象和jQuery对象的相互转化，并介绍了基本选择器和表单属性过滤器等内容，也介绍了如何操作jQuery数组，包括怎么jquery怎么使用Ajax发起请求。
jquery表单过滤选择器和表单对象属性过滤选择器
xiaozhuangyumaotao的博客
06-03 748
表单过滤选择器 1、:input 用法: $(”:input”) ; 返回值 集合元素 说明:匹配所有 input, textarea, select 和 button 元素 2、:text 用法: $(”:text”) ; 返回值 集合元素 说明: 匹配所有的单行文本框. 3、:password 用法: $(”:password”) ; 返回值 集合元素 说明: 匹配所有密码框. 4、:radio 用法: $(”:ra...
jQuery的属性过滤选择器
越努力越幸运的博客
06-27 896
jQuery的属性过滤选择器 jQuery的属性过滤选择器一般用中括号[]表示，有以下几种： [attribute]:匹配包含给定属性的元素 [attribute=value]：匹配给定的属性是某个特定值的元素 [attribute!=value]:匹配所有不含有指定属性或不等于指定属性的元素 [attribute^=value]匹配以某些值开始的元素 [attribute$=value]:匹配以某些值结尾的元素 [attribute*value]:匹配包含某些值的元素
jQuery--过滤选择器（简单过滤选择器、内容过滤选择器）详解
吴声子夜歌的博客
10-01 1453
过滤选择器 基本选择器和层次选择器可以满足大部分页面元素的选取需求。在jQuery中还提供了功能更加强大的过滤选择器，根据特定的过滤规则来筛选出所有需要的页面元素。过滤选择器又分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器。 简单过滤选择器 简单过滤选择器是过滤选择器中用得最多的一种，过滤规则主要体现在元素的位置上或一些特定的元素上，...
jQuery选择器(二)（基本过滤器，内容过滤器，可见过滤器）
m0_70571756的博客
05-22 5645
jQuery是一个快速、简洁的 JavaScript 框架，是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess，DoMore”，即倡导写更少的代码，做 更多的事情。jQuery封装了 JavaScript 常用的功能代码，提供一种简便的 JavaScript 🍋jQuery选择器 🥙过滤器 🧀1.基本过滤器 🍤2.内容过滤器 🧁3.可见过滤器 ☕️4.属性过滤器 🍹5.子元素过滤器
jquery表单对象属性过滤选择器实例分析
10-24
在本例中，我们关注的是jQuery中的表单对象属性过滤选择器，这些选择器专门用于筛选表单元素，如输入(input)、复选框(checkbox)、单选按钮(radio)以及下拉列表(select)的选项(option)。以下是对这些选择器的详细说明...
jQuery子属性过滤选择器用法分析
10-24
主要介绍了jQuery子属性过滤选择器用法,实例分析了:first-child、:last-child、:nth-child、:only-chilid等子属性过滤选择器使用技巧,需要的朋友可以参考下
jQuery表单对象属性过滤选择器实例详解
10-21
jQuery是一个广泛应用于Web开发的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。...总之，熟练掌握jQuery的表单对象属性过滤选择器，能极大地提升网页交互的灵活性和用户体验。
基于JAVA的厨艺交流平台（Vue.js+SpringBoot+MySQL）
08-01
基于Vue.js和SpringBoot的厨艺交流平台是一个功能丰富的在线社区，旨在为烹饪爱好者提供一个分享和学习烹饪技巧的平台。该平台分为管理后台和用户网页端，支持管理员和普通用户两种角色。管理后台提供对菜谱分类、菜谱信息、食材信息、商品信息和美食日志模块的全面管理功能，包括添加、编辑、删除和查询等操作。用户网页端则为用户提供了一个友好的界面，可以浏览和搜索各种菜谱，查看食材和商品信息，发表自己的美食日志，与其他用户互动交流。整个平台采用现代化的前端技术和后端框架，保证了良好的用户体验和高效的数据处理能力。 演示录屏：https://www.bilibili.com/video/BV1uz42197zu 配套教程：https://www.bilibili.com/video/BV1pW4y1P7GR
层次分析法数学建模论文.doc
最新发布
08-01
层次分析法数学建模论文
操作系统原理试卷及参考答案(A).doc
08-01
操作系统原理试卷及参考答案(A)
客户销售额排名.xlsx.xlsx
08-01
销售管理，客户类型，客户满意度，客户登记，进销存，客户记录 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
基于java及C++实现的Arduino智能小车，六种控制方式（超声波避障/跟随，红外循迹/遥控，蓝牙遥控，PS2遥控)+源码
08-01
基于java及C++实现的Arduino智能小车，六种控制方式（超声波避障/跟随，红外循迹/遥控，蓝牙遥控，PS2遥控)+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ 基于java及C++实现的Arduino智能小车，六种控制方式（超声波避障/跟随，红外循迹/遥控，蓝牙遥控，PS2遥控)+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ 项目简介： arduino程序使用模块化设计，可扩展各类玩法。 目前支持六种控制方式，主要分为程控方式和遥控方式， 程控方式 超声波避障 超声波跟随 红外循线 遥控方式 红外遥控 蓝牙遥控 PS2遥控
jQuery教程：属性过滤选择器与优势解析
以下是一些常见的属性过滤选择器： 1. `[attr]` - 选择具有指定属性的所有元素，无论属性值是什么。例如，`$("input[type='text']")`会选择所有type属性为text的输入元素。 2. `[attr=value]` - 选择属性值精确...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值