JavaScript学习笔记8-jQuery属性过滤选择器、子元素过滤选择器深度解析

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

属性过滤选择器


<!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[title]').css("background", "green");
	});

    $("#button2").click(function()
	{
		$("div[title=test]").css("background","red");
	});

	$("#button3").click(function()
	{
		$("div[title!=test]").css("background","pink");
	});

	$("#button4").click(function()
	{
		$("div[title^=test]").css("background","pink");
	});

	$("#button5").click(function()
	{
		$("div[title$=st]").css("background","pink");
	});

	$("#button6").click(function()
	{
		$("div[title*=st]").css("background","pink");
	});

	$("#button7").click(function()
	{
		$("div[id][title^=t][title$=t]").css("background","pink");
	});

  });

  </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">
<input type="button" value="test5" id="button5">
<input type="button" value="test6" id="button6">
<input type="button" value="test7" id="button7">


   <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" id='aa' 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>

  
 </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">

$(function()
{
	$("#button1").click(function()
	{
		$('div.one :nth-child(2)').css("background", "red");
	});

	$('#button2').click(function()
	{
		$('div.one :first-child').css('background', 'green');
	});
	
	$('#button3').click(function()
	{
		$('div.one :last-child').css('background', 'pink');
	});

	$('#button4').click(function()
	{
		$('div.one :only-child').css('background', 'orange');
	});

});

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

<select multiple>
<option>aa</option>
<option>bb</option>
<option>cc</option>
<option>dd</option>
</select>

->

<select multiple>
<option>aa</option>
<option>bb</option>
<option>cc</option>
<option>dd</option>
</select>
 </body>
</html>


hellochenlu
关注
专栏目录
尚硅谷JAVA基础笔记吐血整理
02-03
“尚硅谷JAVA基础笔记”涵盖了Java语言的基础知识，包括语言概述、基本语法、面向对象概念、封装、继承和多态，以及一些关键概念如形参与实参、属性与局部变量、构造器、this关键字、包和MVC设计模式的使用。...
Java基础知识面试题
学Java，找哪吒
08-24 5万+
一、JDK 和 JRE 有什么区别？ JDK（Java Development Kit），Java开发工具包 JRE（Java Runtime Environment），Java运行环境 JDK中包含JRE，JDK中有一个名为jre的目录，里面包含两个文件夹bin和lib，bin就是JVM，lib就是JVM工作所需要的类库。 二、== 和 equals 的区别是什么？ 1、对于基本类型，==比较的是值； 2、对于引用类型，==比较的是地址； 3、equals不能用于基本类型的比较； 4、如果
20道java基础面试题，你的会吗？你好久没有进行基础知识回顾了
qq_28245087的博客
04-25 5634
这些面试题主要涵盖了岗位要求的相关领域，如技术技能、沟通能力、团队协作等方面。通过这些问题，面试官可以更全面地了解应聘者的能力和性格特点。同时，这些问题也考验了应聘者的应变能力和思维深度，帮助面试官更加客观地评估应聘者的能力和潜力。最终，通过这样的面试过程，公司可以聘用到最适合的人才，提升团队的整体水平和绩效。
Java面试题大全~基础题(55题)
Yong的博客
06-27 1万+
最近一段时间在准备面试，所以就整理了一下技术栈。在整理的过程中也能够沉淀一下学过的知识。本篇是Java面试题中的基础篇。总共55题，2万多字，以问答的形式呈现，这样也能更好的模拟面试的环节。本文的答案部分有图有代码，这样解释会更加详细和易懂
Java基础知识点梳理（详细）
热门推荐
程序员小辰的代码小窝
03-08 9万+
Java基础知识点全面梳理（详细）
Java基础问题汇总
AprRain的博客
12-14 398
Java基础知识汇总。
java后端面试问题整理
03-27
1. **Java基础知识** - 描述Java的垃圾回收机制及其工作原理。 - 解释Java中的封装、继承和多态。 - 讲解Java集合框架中的ArrayList和LinkedList的区别。 - 什么是JVM？它是如何运行Java程序的？ - Java异常...
JAVA面试常见问题整理
08-21
JRE（Java运行环境）包含了JVM和Java基础类库，提供了运行Java程序所需的环境。而JDK（Java开发工具包）则在JRE基础上增加了编译器和其他开发工具，用于开发和调试Java程序。 2. **equals和hashCode**：`==`比较的...
java基础知识整理.doc
08-17
Java基础知识涵盖了多个方面，从DOS命令到Java编程的核心概念，是学习Java开发的基础。首先，我们要理解DOS命令行的使用，这是计算机基础的一部分。DOS命令行提供了与计算机进行交互的方式，例如，我们可以通过`cd`...
java面试基础整理
05-13
Java 面试基础知识整理 本节课主要讲解了 Java 面试基础知识，包括面向对象的特征、访问修饰符的区别、基本数据类型、类型转换等。 一、面向对象的特征 面向对象的特征主要有以下几个方面： * 抽象：抽象是将一...
java 基础知识
sekever的博客
06-27 700
但是，两个对象有相同的 hashcode 值，它们也不一定是相等的，重写的目的就是为了防止俩个相同的对象有不同的 hashcode。被该关键字修饰的变量（该关键字不能修饰方法或者类）不可以被序列化，只能存在于本地的内存中，最简单的例子就是不可以被IO输出到磁盘中，同样不能被远程传输。静态导包，用来导入类中的静态资源，格式为：import static 这两个关键字连用可以指定导入某个类中的指定静态资源，并且不需要使用类名调用类中静态成员，可以直接使用类中静态成员变量和成员方法。
Java基础知识总结归纳
qq_31716541的博客
06-08 4742
Java基础知识总结归纳
Java基础部分面试题（2023最新）
记录，是一种习惯；坚持，是一种品质。
04-24 1272
如果不同的话，就会重新散列到其他位置。基本数据类型中用来描述文本数据的是 char，但是它只能表示单个字符，如果要描述一段文本，就需要使用 char 类型数组，但是使用数组过于麻烦，所以就有了 String，String 底层就是一个 char 类型的数组，只是使用的时候开发者不需要直接操作底层数组，使用更加简便。的关键字，一般作用在try-catch-finally代码块中，在处理异常的时候，通常我们将一定要执行的代码放在finally代码块中，表示不管是否出现异常，该代码块都会执行，一般用来。
java基础知识汇总
Relievedz的博客
04-03 1万+
数组就是存储数据长度固定的容器，存储多个数据的数据类型要一致。1.2.1第一种数据类型[] 数组名示例：int[] arr;char[] arr;1.2.2第二种数据类型 数组名[]示例：int arr[];char arr[];
Java基础常见面试题及详细答案（总结40个）
ayouki123456的博客
05-26 3万+
最近看到网上流传着各种面试经验及面试题，往往都是一大堆技术题目贴上去，但是没有答案。 为此我业余时间整理了40道Java基础常见的面试题及详细答案，望各路大牛发现不对的地方不吝赐教，留言即可。 八种基本数据类型的大小，以及他们的封装类 引用数据类型 Switch能否用string做参数 equals与==的区别 自动装箱，常量池 Object有哪些公用方法 Java的四种引用，强弱软虚，用到的场景 Hashcode的作用 HashMap的hashcode的作用 为什么重载hashCod
Java面试题【必知必会】常见基础题（2024）
最新发布
系统看你学习很认真，随机送了一个月会员！
03-06 1544
面向对象是一种思想，简单来说就是将数据和操作数据的方法封装在对象中。举个例子来说比如洗衣机洗衣服。我们通常会把这个拆分成两个对象——人和洗衣机。人需要干的就是：打开洗衣机—放入衣服—放入洗衣液—关闭洗衣机门-按下各种开关，洗衣机则负责：清洗—烘干面向对象拥有三大特性其实也可以说四大特性：封装–继承–多态–抽象相等于封装来说，就是把一切内部信息隐藏起来，对外不透明，只提供最简单的调用。继承是从已有的一个类得到信息并创建新类的过程，一般我们称这个提供信息的类为父类，得到信息的的类为子类。
Java基础50题最新2023版
2301_76996311的博客
10-13 683
说明：图片转存失败，完整版pdf见资源。
JAVA面试题大全(200+道题目)
qq_38078190的博客
05-04 8万+
面试题 一、Java 基础 1.JDK 和 JRE 有什么区别？ 2.== 和 equals 的区别是什么？ 3.两个对象的 hashCode()相同，则 equals()也一定为 true，对吗？ 4.final在 java 中有什么作用？ 5.java中的 Math.round(-1.5) 等于多少？ 6.String 属于基础的数据类型吗？ 7.java中操作字符串都有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值