JQuery学习笔记 选择器 - 代码练习

最新推荐文章于 2024-10-30 16:06:51 发布
最新推荐文章于 2024-10-30 16:06:51 发布
阅读量135 收藏
点赞数
分类专栏： JQuery 文章标签： jquery 前端 web javascript 源文件 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wabdzhd1/article/details/84741488
版权 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample HTML</title>
<link href="./style.css" rel="stylesheet" type="text/css"> 
<script src="../scripts/jquery.js"></script>
<script src="./myjs.js"></script>

</head>
<body>

<h3>基本选择器</h3>
<!-- 控制基本选择器按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1"/>  
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
<input type="button" value="选择 所有的元素." id="btn4"/>
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/><br/><br/>
<h3>层次选择器</h3>
<!--控制层次选择器按钮-->
<input type="button" value="选择 body内的所有div元素." id="btna1"/>
<input type="button" value="在body内,选择子元素是div的。" id="btna2"/>
<input type="button" value="选择 所有class为one 的下一个div元素." id="btna3"/>
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btna4"/><br/><br/>
<h3>基本过滤选择器</h3>
<!--控制基本过滤选择器-->
<input type="button" value="选择第一个div元素." id="btnb1"/>
  <input type="button" value="选择最后一个div元素." id="btnb2"/>
  <input type="button" value="选择class不为one的 所有div元素." id="btnb3"/>
  <input type="button" value="选择索引值为偶数 的div元素." id="btnb4"/>
  <input type="button" value="选择索引值为奇数 的div元素." id="btnb5"/>
  <input type="button" value="选择索引值等于3的元素." id="btnb6"/>
  <input type="button" value="选择索引值大于3的元素." id="btnb7"/>
  <input type="button" value="选择索引值小于3的元素." id="btnb8"/>
  <input type="button" value="选择所有的标题元素." id="btnb9"/>
  <input type="button" value="选择当前正在执行动画的所有元素." id="btnb10"/>
  <input type="button" value="选择当前获取焦点的所有元素." id="btnb11"/><br/><br/>
  
  <h3>内容过滤选择器</h3>
   <input type="button" value="选取含有文本“di”的div元素." id="btnc1"/>
  <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btnc2"/>
  <input type="button" value="选取含有class为mini元素 的div元素." id="btnc3"/>
  <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btnc4"/><br/><br/>
  <h3>可见性过滤选择器</h3>
  <input type="button" value="选取所有可见的div元素." id="btnd1"/>
  <input type="button" value="选取所有不可见的元素.包括&lt;input type='hidden'/&gt;和&lt;div style='display:none;'&gt;以及br." id="btnd2"/><br/><br/>
  
  <h3> 属性选择器.</h3>
  <input type="button" value="选取含有 属性title 的div元素." id="btne1"/>
  <input type="button" value="选取 属性title值等于“test”的div元素." id="btne2"/>
  <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btne3"/>
  <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btne4"/>
  <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btne5"/>
  <input type="button" value="选取 属性title值 含有“es”的div元素." id="btne6"/>
  <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btne7"/><br/><br/>
  
  <h3> 属性选择器(加强).</h3>
<input type="button" value="选取 属性title值 以 en 开始 的div元素" id="btne1-1"/>
<input type="button" value="选取 属性title值 含有 en  的div元素" id="btne2-1"/>
<input type="button" value="选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素" id="btne3-1"/>
<input type="button" value="选取 属性title用空格分隔的值中包含字符uk的元素." id="btne4-1"/><br/><br/>

<h3>子元素过滤选择器.</h3>
  <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btnf1"/>
  <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btnf2"/>
  <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btnf3"/>
  <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btnf4"/><br/><br/>



<!--测试元素-->

<br/>
<div title="en">title为en的div元素 属性选择器(加强)</div> 
<div title="en-UK">title为en-UK的div元素 属性选择器(加强)</div> 
<div title="english">title为english的div元素 属性选择器(加强)</div> 
<div title="en uk">title为en uk的div元素 属性选择器(加强)</div>  
<div title="uken">title为uken的div元素 属性选择器(加强)</div> 


<div class="one" id="one">
id为one，class为one的div
<div class="mini">class为mini的div</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>

 

style.css

div,span,p{
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini{
width:55px;
height:55px;
background-color:#aaa;
font-size:12px;
}
div.hide{
display:none;
}

 

myjs.js

$(document).ready(function(){

//给id为mover的元素添加动画.
	function animateIt() {
		$("#mover").slideToggle("slow", animateIt);
	}
	animateIt();
//控制基本选择器
$("#btn1").click(function(){
$("#one").css("background","#bbffaa");
});
$("#btn2").click(function(){
$(".mini").css("background","#bbffaa");
});
$("#btn3").click(function(){
$("div").css("background","#bbffaa");
});
$("#btn4").click(function(){
$("*").css("backgroundColor","#bbffaa");
});
$("#btn5").click(function(){
$("span,#two").css("background","#bbffaa");
});
//控制层次选择器
$("#btna1").click(function(){
$("body div").css("background","#bbffaa");
});
$("#btna2").click(function(){
$("body>div").css("background","#bbffaa");
});
$("#btna3").click(function(){
$(".one+div").css("background","#bbffaa");
});
$("#btna4").click(function(){
$("#two~div").css("background","#bbffaa");
});
//控制基本过滤选择器
$("#btnb1").click(function(){
$("div:first").css("background","#bbffaa");
});
$("#btnb2").click(function(){
$("div:last").css("background","#bbffaa");
});
$("#btnb3").click(function(){
$("div:not(.one)").css("background","#bbffaa");
});
$("#btnb4").click(function(){
$("div:even").css("background","#bbffaa");
});
$("#btnb5").click(function(){
$("div:odd").css("background","#bbffaa");
});
$("#btnb6").click(function(){
$("div:eq(3)").css("background","#bbffaa");
});
$("#btnb7").click(function(){
$("div:gt(3)").css("background","#bbffaa");
});
$("#btnb8").click(function(){
$("div:lt(3)").css("background","#bbffaa");
});
$("#btnb9").click(function(){
$(":header").css("background","#bbffaa");
});
$("#btnb10").click(function(){
$(":animated").css("background","#bbffaa");
});
$("#btnb11").click(function(){
$(":focus").css("background","#bbffaa");
});
//控制内容过滤选择器
$("#btnc1").click(function(){
$("div:contains('di')").css("background","#bbffaa");
});
$("#btnc2").click(function(){
$("div:empty").css("background","#bbffaa");
});
$("#btnc3").click(function(){
$("div:has('.mini')").css("background","#bbffaa");
});
$("#btnc4").click(function(){
$("div:parent").css("background","#bbffaa");
});
//可见性过滤选择器
$("#btnd1").click(function(){
$("div:visible").css("background","#bbffaa");
});
$("#btnd2").click(function(){
alert( "不可见的元素有："+$('body :hidden').length +"个!\n"+
		   "其中不可见的div元素有:"+$('div:hidden').length+"个!\n"+
		   "其中文本隐藏域有:"+$('input:hidden').length+"个!");
		  $('div:hidden').show(3000).css("background","#bbffaa");
$("div:hidden").show(3000).css("background","#bbffaa");
});
//控制属性选择器
$("#btne1").click(function(){
$("div[title]").css("background","#bbffaa");
});
$("#btne2").click(function(){
$("div[title='test']").css("background","#bbffaa");
});
$("#btne3").click(function(){
$("div[title!='test']").css("background","#bbffaa");
});
$("#btne4").click(function(){
$("div[title^='te']").css("background","#bbffaa");
});
$("#btne5").click(function(){
$("div[title$='est']").css("background","#bbffaa");
});
$("#btne6").click(function(){
$("div[title*='es']").css("background","#bbffaa");
});
$("#btne7").click(function(){
$("div[id][title*='es']").css("background","#bbffaa");
});
//控制属性选择器 加强
$("#btne1-1").click(function(){
$("div[title^='en']").css("background","#bbffaa");
});
$("#btne2-1").click(function(){
$("div[title*='en']").css("background","#bbffaa");
});
$("#btne3-1").click(function(){
$("div[title|='en']").css("background","#bbffaa");
});
$("#btne4-1").click(function(){
$("div[title~='uk']").css("background","#bbffaa");
});
//控制子元素过滤选择器
$("#btnf1").click(function(){
$("div.one :nth-child(2)").css("background","#bbffaa");
});
$("#btnf2").click(function(){
$("div.one :first-child").css("background","#bbffaa");
});
$("#btnf3").click(function(){
$("div.one :last-child").css("background","#bbffaa");
});
$("#btnf4").click(function(){
$("div.one :only-child").css("background","#bbffaa");
});
});

 

jquery 用的是v1.7.1。

 

-----总结自《Jquery（第二版）》

wabdzhd1
关注
专栏目录
JQuery学习笔记 选择器 --- 过滤选择器
uncle-panda
09-13 278
过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的选择器语法相同，即选择器器都睡以冒号开头。 过滤选择器可以分为： 基本过滤 内容过滤 可见性过滤 属性过滤 子元素过滤 表单对象属性过滤   1、基本过滤选择器 :first---选取第一个元素---返回单个元素---$("div:first")选取所有&lt;div&gt;元素中的...
jQuery学习笔记--制作简易留言板
努力追光的小王
07-20 4578
功能实现 点击发布，通过下滑方式展示留言。点击删除，通过上滑方式删除留言。没有本地存储，所以刷新之后会重置。 运行结果 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
Pythone4_Selenium实战
weixin_33923148的博客
08-16 928
2019独角兽企业重金招聘Python工程师标准>>> ...
总结
Liuxb_zao的博客
10-10 279
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">script> script> $(document).re
jQuery子元素选择器
热门推荐
何明洋的编程技术博客
06-28 1万+
jQuery子元素选择器&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;    &lt;title&gt;子元素选择器&lt;/title&gt; &lt;meta charse
JQuery
04-29 95
//基本选择器 //id选择器 $("#one") //class选择器 $(".mini") //元素选择器 $("div") //选择所有 $("*") //元素，和id $("span,#two") //层...
jQuery选择器
weixin_34348805的博客
06-13 149
1.基本选择器 //选择 id为 one 的元素 $("#btn1").click(function() { $("#one").css("background-color", "red"); }); //选择 class 为 mini 的所有元素 $("...
JQuery学习笔记 选择器 --- 表单选择器
uncle-panda
09-13 114
表单选择器 在基本选择器，层次选择器，过滤选择器之后，是表单选择器，也是最后的一个了、 表单选择器能极其方便地获取到表单的某个或某类型的元素   :input --- 选取所有的input, textarea, select, button元素---返回集合元素---$(":input")选取所有的input, textarea, select, button元素 :text --- ...
JQuery 学习笔记 选择器之二
12-10
本篇学习笔记将深入探讨jQuery中的四种选择器：后代选择器、子元素选择器、相邻兄弟选择器和一般兄弟选择器。 1. **后代选择器（Descendant Selector）** 后代选择器，用空格分隔两个选择器，表示第一个选择器的...
韩顺平jquery学习笔记及练习
01-18
《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源，由知名讲师韩顺平的课程实录整理而成，旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...
jquery 学习笔记总结
08-01
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库，它简化了网页文档对象模型（DOM）操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在...
jQuery网页版键盘打字练习代码.zip
09-21
jQuery的语法使得这些操作变得简单，例如使用`$()`选择器选取DOM元素，`.on('keydown', function() {...})`监听键盘事件，`.val()`获取或设置输入值，`.html()`或`.text()`更新元素内容。 在jQuery中，`$(document)...
在Android开发中WebView的详细使用方法
LLZjiayou的博客
10-25 1207
WebView是一个非常强大的工具，用于在应用内加载网页内容。通过使用和其他配置，可以实现丰富的网页交互功能，同时确保应用的安全性和稳定性。如果有特定功能需求，可以在 Android 官方文档中查阅的详细说明。
【333基于Java Web的考编论坛网站的设计与实现
paopaokaka_luck的博客
10-25 1093
刚开始学习Java语言的时候，是不知道还有Tomcat这些东西的，各种语法各种输出在控制台进行输出结果，当Java网站开发的时候就不可避免的学习到了Tomcat服务器。Tomcat准确的来讲不算是服务器，可以说是vue引擎或者一个容器，这些都是学术上或者原理上都比较贴切的，但是实际工作中Tomcat就是作为一个web服务器来用的，因为可以实现网站的发布和运行。
vue3中toRef和toRefs的用法以及使用场景
涂涂
10-25 501
toRef。
vue如何让下拉框可以输入---查询下拉框内容
qq_42666729的博客
10-28 433
使用filterable。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 557
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
Google Recaptcha V2 简单使用
最新发布
吴家健ken的博客
10-30 145
Google Recaptcha V2 简单使用
JavaScript 前端开发
A_aspectJ的博客
10-27 474
JavaScript是一种广泛应用于前端开发的脚本语言，它赋予了网页动态化和交互性的能力。前端开发作为构建用户界面的重要一环，对于任何希望在互联网上有所作为的个体或组织来说都至关重要。JavaScript，作为前端开发的核心语言，凭借其强大的功能和灵活的特性，成为了现代前端开发者不可或缺的工具。
jQuery选择器详解与实战应用
jQuery选择器学习笔记是一份适合初学者的教程，详细介绍了如何使用jQuery进行网页元素的选择和操作。该笔记涵盖了丰富的CSS选择器及其在jQuery中的应用，包括： 1. CSS选择器： - 标签选择器: 选择文档中具有指定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值