JavaScript学习笔记8-jQuery内容过滤选择器、可见性过滤选择器深度解析

最新推荐文章于 2021-04-11 19:20:06 发布
最新推荐文章于 2021-04-11 19:20:06 发布
阅读量370 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hellochenlu/article/details/48419347
版权

内容过滤选择器


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <link rel="stylesheet" type="text/css" href="style.css" /> 
<script type="text/javascript" src="jquery-1.4.4.js"></script>

  <script type="text/javascript">

  $(function()
  {
	$("#button1").click(function()
	{
		$("div:contains('test')").css("background", "red");
	});

    $("#button2").click(function()
	{
		$("div:empty").css("background", "green");
	});

	$("#button3").click(function()
	{
		$("div:has(.mini)").css("background", "blue");
	});

	$("#button4").click(function()
	{
		$("div:parent").css("background", "#abaaee");
	});

  });

  </script>
 </head>

 <body>


 <h3>内容过滤选择器.</h3>
 
<input type="button" value="test1" id="button1">
<input type="button" value="test2" id="button2">
<input type="button" value="test3" id="button3">
<input type="button" value="test4" id="button4">



   <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为test</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>
  
 </body>
</html>

可见性过滤选择器 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

<link rel="stylesheet" type="text/css" href="style.css" /> 
<script type="text/javascript" src="jquery-1.4.4.js"></script>

  <script type="text/javascript">

   $().ready(function()
   {
		$("#button1").click(function()
		{
			//alert($('div:hidden').length);
			//alert($('input:hidden').length);

			$('div:hidden').show(10000).css("background", "blue");
		});

		$("#button2").click(function()
		{
			$('div:visible').css("background", "red");
		});
   });

  </script>

 </head>

 <body>
  
 <h3>可见性过滤选择器.</h3>
 
<input type="button" value="test1" id="button1">
<input type="button" value="test2" id="button2">

<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为test</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>


 </body>
</html>


hellochenlu
关注
专栏目录
JQuery学习笔记 选择器 --- 过滤选择器
uncle-panda
09-13 274
过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的选择器语法相同，即选择器器都睡以冒号开头。 过滤选择器可以分为： 基本过滤 内容过滤 可见性过滤 属性过滤 子元素过滤 表单对象属性过滤   1、基本过滤选择器 :first---选取第一个元素---返回单个元素---$("div:first")选取所有&lt;div&gt;元素中的...
jquery隐藏显示元素：$('#id').css('display','none');$('#id').hide();
热门推荐
kungfu_panda的专栏
08-14 3万+
方法一： $('#id').css('display','none'); $('#id').css('display','block'); 方法二： $('#id').hide(); $('#id').show();
JQuery学习笔记二：选择器
q33275971的专栏
01-06 592
过滤器学习笔记 过滤器都是[:]之后跟相应的内容 1.  基本过滤器 $('li:first').css('color', 'red');//全局第一个li标签变红 $('li').first().css('color', 'red'); $('li:first').css('color', 'red'); //全局最后一个li标签变红 $('li').last().css('color',
a毛 jquery 学习记 4过滤选择器1
pymxb1991的专栏
04-07 610
jquery 学习 四(1)  过滤选择器 参考资料：李炎恢老师的视频 、w3cschool  、锋利的jquery、 做法跟前面一样，复制前面的文件夹到'4过滤选择器1'中， index.html页面内容如下： 列表1 列表2 列表3 列表4 列表5 列表6 列表1 列表2 列表3 列表4 列表5 列表6
JavaScript学习笔记8-jQuery基本过滤选择器深度解析
hellochenlu的博客
09-12 509
过滤选择器 （filter） –基本过滤 –内容过滤 –可见性过滤 –属性过滤 –子元素过滤 –表单对象属性过滤 基本过滤选择器 New Document $(document).ready(function() { $("#button1").click(function() {
jQuery学习笔记（二）--jQuery选择器
shixihaoma的专栏
07-01 508
jQuery控制页面CSS 在jQuery框架中，通过自带
jQuery学习笔记之四----过滤选择器
techan007的专栏
08-14 339
一 基本过滤器 二内容guol
JQuery学习笔记（二）——选择器
x_k的专栏
07-31 851
一、基本选择器。二、层次选择器。三、过滤选择器:通过特定的过滤规则筛选所需的DOM元素，以":"开头
JavaScript个人学习笔记总结 - jQuery
weixin_50594210的博客
04-11 610
文章目录jQuery1、选择器1.1 层级选择器1.2 查找和过滤2、操作DOM2.1 修改DOM结构3、事件4、动画5、AJAX6、扩展 jQuery 1、选择器 1.1 层级选择器 1.2 查找和过滤 2、操作DOM 2.1 修改DOM结构 3、事件 4、动画 5、AJAX 6、扩展 ...
Jquery学习笔记分享：优势应用及选择器详解
我们介绍了基本选择器、层次选择器、过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器和表单选择器等不同类型的选择器，展示了它们的用法和示例。...
Jquery学习笔记分享
最新发布
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
JQuery入门教程：选择器、CSS操作与节点关系解析
"JQuery学习笔记一(JQuery选择器.css样式操作,节点关系)" 这篇学习笔记主要介绍了jQuery的基础知识，包括jQuery的理解、jQuery对象与DOM对象的转换、选择器的使用、CSS样式的操作以及节点关系的处理。以下是详细...
学习笔记 · JQuery选择器
oALiKongZuo的博客
11-02 257
学习笔记 · JQuery选择器jQuery选择器选择器的使用方法基本选择器ID选择器元素选择器类名选择器复合选择器通配符选择器(*)层级选择器祖孙选择器（ancestor descendant选择器）孩子选择器 (parent > child 选择器)相邻选择器 (prev + next 选择器)随后选择器（prev ~ siblings选择器）过滤选择器简单过滤器内容过滤器可见性过滤器表单对象的属性过滤器子元素选择器属性选择器表单选择器 作者：氯磷Rolin 参考书籍：《HTML+CSS+Java
$.cookie is not a function;原因及解决办法
hellochenlu的博客
04-14 3万+
一、没有引入jQuery库文件 二、jQuery库文件和jquery.cookie.js文件的顺序问题。须先引入jQuery库文件再引入cookie插件文件 三、页面的加载顺序所导致 大家的问题大多出在第三个原因！ 网上有人说是一个页面由于二次或多次引入了jquery插件导致。 我觉得应该这样总结： 火狐浏览器报错$.cookie is not a func
nodejs爬虫简易实现和jquery的each方法
hellochenlu的博客
09-23 2038
var http = require('http'); var cheerio = require('cheerio'); var url = 'http://blog.csdn.net/hellochenlu'; http.get(url, function(res){ var html = '' res.on('data', function(data){ //console.l
JavaScript学习笔记8-jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别
hellochenlu的博客
09-10 520
jQuery的口号是：write less, do more // ready方法的作用是当页面中的dom加载完毕后执行参数中的函数 $(document).ready(function() { alert("Hello World"); }); jquery $(document).ready() 与window.onload的区别 这两个方法的效果都
JavaScript学习笔记8-jQuery入门介绍、css选择器复习
hellochenlu的博客
09-11 497
New Document click me if(document.getElementById("hello")) { document.getElementById("hello").style.color = "red"; } New Document
JavaScript学习笔记8-jQuery表单对象属性过滤
hellochenlu的博客
09-14 435
表单对象属性过滤 （注意冒号后面的空格） $(function() { $("#button1").click(function() { $("#form1 input:not(.test):enabled").val("hello world"); }); $("#button2").click(function() { $
JavaScript学习笔记8-jQuery表单选择器
hellochenlu的博客
09-14 405
表单选择器 $(function() { //alert($('#form1 :text').length); //alert($('#form1 :password').length); //alert($('#form1 :radio').length); //alert($('#form1 :checkbox').length); //a
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值