锋利jquery---内容过滤选择器(第二章)

最新推荐文章于 2019-08-07 19:08:00 发布
最新推荐文章于 2019-08-07 19:08:00 发布
阅读量903 收藏
点赞数
分类专栏： jquery 文章标签： jquery 
<!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>2-7</title>
 <!--   引入jQuery --> 
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="../scripts/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
  <script type="text/javascript">
  $(document).ready(function(){
	  //选取含有文本"di"的div元素.
      $('#btn1').click(function(){
		  $('div:contains(di)').css("background","#bbffaa");
	  })
	  //选取不包含子元素(或者文本元素)的div空元素.
	  $('#btn2').click(function(){
		  $('div:empty').css("background","#bbffaa");
	  })
	  //选取含有class为mini元素 的div元素.
	  $('#btn3').click(function(){
		  $('div:has(.mini)').css("background","#bbffaa");
	  })
	  //选取含有子元素(或者文本元素)的div元素.
	  $('#btn4').click(function(){
		  $('div:parent').css("background","#bbffaa");
	  })
  });
  </script>
</head>
<body>
  <h3>内容过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
  <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
  <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
  <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>


<br /><br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>

  

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在执行动画的span元素.</span>

</body>
</html>

txj2zln1314
关注
专栏目录
锋利的jQuery——第二章、jQuery选择器
weixin_42003972的博客
01-25 166
目录   2.1 jQuery选择器是什么 2.2 jQuery选择器 2.2.1 基本选择器 2.2.2 层次选择器 2.2.3 过滤选择器 2.2.4 表单选择器 2.3 选择器的一些注意事项 2.1 jQuery选择器是什么 jQuery选择器和css选择器很相似，CSS选择器找到元素后添加样式，而jQuery选择器找到元素后是添加行为，并且可以跨浏览器兼容。jQuery...
jquery-2.0.3.js和jquery-2.0.3.min.js
08-13
1. **选择器增强**：jQuery 2.0.3支持CSS3选择器，使得开发者可以通过更复杂的CSS规则来选取元素，提高了代码的灵活性和可读性。 2. **事件处理**：事件绑定和解绑的API更加简洁，同时增加了事件委托功能，使得动态...
jQuery选择器——内容过滤选择器
十一的博客
06-18 323
实例：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
常用的 DOCTYPE 声明
撑伞的猫小姐
07-28 300
常用的 DOCTYPE 声明 HTML 5 HTML 4.01 Strict 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 HTML 4.01 Transitional 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Fra
锋利的Jquery【读书笔记】 -- 第二章 jQuery选择器
CherishLyf
09-12 509
第二章 jQuery选择器jQuery选择器jQuery选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素才生效。 比如：<script> function demo(){ alert("JavaScript demo!"); } </script> </head> <body> <p onclick="demo()">点击我</p>
锋利的jQuery读书笔记-第2章 jQuery选择器
江湖小虾米
12-15 454
一、jQuery选择器是什么 1.jQuery选择器完全集成CSS的风格，主要用于快速和便捷的找出页面特定的DOM元素，然后为之添加行为。选择器是jQuery的基础，所有的行为都是在选定元素后进行的。 2.HTML代码与CSS代码分离是一种很好的编码习惯，分离之后不仅便于阅读和维护，在进行修改时也十分方便。 3.CSS选择器与jQuery选择器一样都是为了找到特定的DOM元素
锋利的jQuery-第三章 jQuery中的DOM操作
记录学习前端的点滴知识
04-04 994
***jQuery中的DOM操作*** 3.1DOM操作的分类 DOM操作分为3各方面：DOM Core（核心），HTML-DOM和CSS-DOM. 3.2jQuery中的DOM操作 3.21查找节点 备注：因为我之前只是看了前三章并没有在电脑上敲代码，所以以为jq和js使用的环境一样，导致书上的案例没有弹出，然后又往前看了书，下载了jq库，现在jq能够正常使用了
《锋利的jQuery》学习笔记---第2章 jQuery选择器
一棵雪松
05-13 395
选择器   实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 元素 .class.class $(".intro.demo") 所
锋利的jQuery第二章
weixin_30696427的博客
08-07 136
感觉还是看书好一些，jQuery并不难，但是对于一些东西如果你不知道，你就会感觉到很头疼，比如以前看选择器，网上那么多文章，总结的挺好的，但是不能看下去，太多了，对电脑不爽。现在从书上看到这些总结，感觉很清晰，也可以接受。 1，用jQuery判断某个元素是否存在 if($("#tt").length > 0) { //使用长度判断 } if( $("#tt")[0] ...
《锋利的jQuery》读书笔记第二章（jQuery选择器）
牛爷爷的博客
11-18 659
jQuery选择器 jQuery中的完全继承了CSS的风格。利用jQuery选择器，可以非常便捷和快速地找出特定地DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。学会使用选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素后才能生效。 jQuery选择器的写法与CSS选择器的写法十分相似，只不过两者的作用效果不同，CSS选择器找到元素后是添加样式，而j
jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】
11-01
`selector`可以是CSS选择器，如`$("#id")`选取ID为`id`的元素，`$(".class")`选取所有class为`class`的元素。 - `$(element).html()`：获取或设置元素的HTML内容。 - `$(element).append()`/`.prepend()`：在元素...
jquery-1.8.3.js 、jquery-1.8.3.min.js 【官方jquery包 js】
11-01
首先，我们来看标题中的两个文件："jquery-1.8.3.js" 和 "jquery-1.8.3.min.js"。这两个文件都是jQuery 1.8.3的核心库，但它们之间存在显著的区别。"jquery-1.8.3.js"是未压缩和未优化的源代码版本，适合在开发环境...
jQuery子元素过滤选择器用法示例
10-21
主要介绍了jQuery子元素过滤选择器用法,结合实例形式分析了jQuery中nth-child、first-child、last-child、only-child等进行子元素过滤操作的相关技巧,需要的朋友可以参考下
jquery-ui-1.9.2.custom.min.js
06-07
在我们讨论的文件 "jquery-ui-1.9.2.custom.min.js" 中，我们可以看到这是该库的一个特定版本——1.9.2的自定义最小化版本。这个文件的核心在于“定制”和“最小化”，这两个特点使得它在实际项目中更具灵活性和效率...
基于SpringBoot仿天猫购物系统.zip(毕设&课设&实训&大作业&竞赛&项目)
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
Python网络爬虫与推荐算法新闻推荐平台(毕设&课设&实训&大作业&竞赛&项目)
最新发布
09-20
Python网络爬虫与推荐算法新闻推荐平台：网络爬虫：通过Python实现新浪新闻的爬取，可爬取新闻页面上的标题、文本、图片、视频链接（保留排版） 推荐算法：权重衰减+标签推荐+区域推荐+热点推荐.zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
THUCNews数据集
09-20
THUCNews数据集
Q音：Vue3+Pinia+Vue Router4+Vant4的移动端仿抖音短视频项目.zip(毕设&课设&实训&大作业&竞赛&
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
jQuery选择器深入解析：伪类选择符nth-child的用法
"jQuery选择器详解，重点讲解:nth-child伪类选择符的使用" 在JavaScript库jQuery中，选择器是核心功能之一，它允许开发者高效地选取DOM元素进行操作。jQuery不仅支持基本的CSS选择符，还扩展了许多CSS3的伪类选择符...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值