jQuery中的基本过滤选择器（四、三）：:first、:last、:not() ... ...
<!DOCTYPE html>
<html>
<head>
<title>基本过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei"
}
.divCls {
width:180px;
height:180px;
color: white;
border: solid 1px white;
margin-left: 10px;
float: left;
background-color: #4CA902;
}
.subDivCls {
width:60px;
height:60px;
color:white;
border: solid 1px white;
font-size: 12px;
margin: 5px;
float: right;
background-color: #FF4500;
}
.spanCls{
color:white;
border: solid 1px white;
margin: 5px;
float: left;
height: 50px;
background-color: #B7103B;
}
div span{
border: solid 1px white;
font-size: 12px;
margin:5;
background-color: #B7103B;
}
.cGreen{background-color: #4CA902}
.cPink{background-color: #ED4A9F}
.cBlue{background-color: #0092E7}
.cCyan{background-color: #01A6A2}
.cYellow{background-color: #DCA112}
.cRed{background-color: #B7103B}
.cPurple{background-color: #792F7C}
.cBlack{background-color: #110F10}
.cOrange{background-color: #FF4500}
.cGray{background-color: #A9A9A9}
.hide{display: none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
// <input type="button" id="btn1" value=":first选取id为div4的第一个子div">
$("#btn1").click(function() {
/*
注意:前后不能加空格，因为其实我们知道空格是代表后代的意思；
之所以>前后可以加空格，是因为其实>子元素的意思，而子元素也是从后代中取的，
所以这里加空格不影响，并且后代的空格可以加任意个，只是平时我们为了好看只
加了一个空格而已。
这里选择id为div4的第一个子div，可以用后代选择器，也可以用子元素选择器；
但是我觉得子元素选择器更准确，所以使用子元素选择器。
但是这里两种都能达到同样的效果。
*/
// $("#div4 div:first").addClass("cBlack");
$("#div4 > div:first").addClass("cBlack");
});
// <input type="button" id="btn2" value=":last选取id为div4的最后一个子div">
$("#btn2").click(function() {
$("#div4 > div:last").addClass("cBlack");
});
// <input type="button" id="btn3" value=":not()选取id为div2的所有非div元素">
$("#btn3").click(function() {
// 注意之前说的规则！冒号左边的空格必须有，代表后代；
// 冒号右边不能有空格！！冒号一般情况下都不能加空格，
// 除非和后代选择器，子元素选择器配合使用才加空格！
// 千万注意这里的冒号右边不能加空格，不然就凉凉。
$("#div2 :not(div)").addClass("cBlack");
});
// <input type="button" id="btn4" value=":even选取索引号(从0开始)为偶数的div元素">
$("#btn4").click(function() {
// 对所有的div，不再是某一个div了
$("div:even").addClass("cBlack");
});
// <input type="button" id="btn5" value=":odd选取索引号(从0开始)为奇数的div元素">
$("#btn5").click(function() {
$("div:odd").addClass("cBlack");
});
// <input type="button" id="btn6" value=":eq()选取索引号(从0开始)等于2的div元素">
$("#btn6").click(function() {
// 千万注意，这里的索引号是从0开始的！！！
$("div:eq(2)").addClass("cBlack");
});
// <input type="button" id="btn7" value=":gt选取索引号(从0开始)大于2的div元素">
$("#btn7").click(function() {
$("div:gt(2)").addClass("cBlack"); // gt：great than
// 以上是大于的时候，大于等于就使用加逗号分隔开的形式。
// $("div:gt(2), div:eq(2)").addClass("cBlack"); // gt：great than
});
// <input type="button" id="btn8" value=":lt选取索引号(从0开始)小于2的div元素">
$("#btn8").click(function() {
$("div:lt(2)").addClass("cBlack"); // lt：little than
// 以上是小于的时候，小于等于就使用逗号加分隔开的形式。
// $("div:lt(2), div:eq(2)").addClass("cBlack"); // lt：little than
});
// <input type="button" id="btn9" value=":header选取标题元素">
/* 所谓header选择器，其实就是对h1~hx我记不得了，所有的标题标签的选择 */
$("#btn9").click(function() {
// 设置字体为白色，背景为黑色，并且弹出内容来表示选中。
/*
在jQuery中使用方法连缀很方便，因为其回调的属性，可以支持我们
在语句后一直连缀方法，最后都是返回执行的$("*:header")中的内容
click().change().addClass(). ... 可以一直连缀下去。
这样的话，一个语句就可以完成我们的全部操作。
<
js中都是onclick，onchange；jQuery中都是click，change之类的
发现从过程到了对象 ...
>
$("*:header").css("color", "white").addClass("cBlack");
alert($("*:header").text());
*/
$(":header").css("color", "white").addClass("cBlack");
alert($(":header").text());
/*
以上两种方式加*或者什么都不写把冒号左边空出来。
两种方式都可以。因为之前讲过，*代表整个文档树（所有html内容）
在具体使用中可以在冒号左边再使用expr来定位位置：
具体的某个div中h标签等。
*/
});
// <input type="button" id="btn10" value=":animated选取正在执行动画的div元素">
$("#btn10").click(function() {
// 所有正在执行动画的div，所以不能再冒号左边加空格
$("div:animated").addClass("cBlack");
});
});
// --------动画设置--------begin
$(document).ready(function() {
// 设置执行动画
doAnimate($("#div5")[0]);
});
function doAnimate(obj){
$(obj).animate({"opacity": "toggle"}, "slow", function(){
doAnimate(this);
});
}
// --------动画设置--------end
</script>
</head>
<body>
<h3>基本过滤选择器</h3><br><br>
<div id="div1" class="divCls">id 为div1 的div<br><br>
<div class="subDivCls">class为subDivCls的div</div>
</div>
<div id="div2" class="divCls">id 为div2 的div
<br><br>
<span id="span1">div2里面的span,id为span1</span>
<br><br>
<div class="subDivCls" style="float:left;">class为subDivCls的div</div>
<div class="subDivCls">subDivCls<br>
<span id="span2">span2</span>
</div>
</div>
<div id="div3" class="divCls" title="itcast">
id 为div3 的div，title为itcast，包含隐藏输入框
<input type="hidden" value="hello">
</div>
<span class="spanCls">div3的兄弟元素span</span>
<div id="div4" class="divCls">id 为div4 的div<br>
<div class="subDivCls" style="float:left;">subDivCls<br>
<span id="span2">span4</span></div>
<div class="subDivCls" title="itcast">title为itcast</div>
<div class="subDivCls" style="float:left;">class为subDivCls的div</div>
<div class="subDivCls"></div>
</div>
<div id="div5" class="divCls" >id为div5的正在执行动画的div</div>
<p style="clear:both;"></p>
<br>
<hr>
<input type="button" id="btn1" value=":first选取id为div4的第一个子div">
<input type="button" id="btn2" value=":last选取id为div4的最后一个子div">
<input type="button" id="btn3" value=":not()选取id为div2的所有非div元素">
<input type="button" id="btn4" value=":even选取索引号(从0开始)为偶数的div元素">
<input type="button" id="btn5" value=":odd选取索引号(从0开始)为奇数的div元素">
<input type="button" id="btn6" value=":eq()选取索引号(从0开始)等于2的div元素">
<input type="button" id="btn7" value=":gt选取索引号(从0开始)大于2的div元素">
<input type="button" id="btn8" value=":lt选取索引号(从0开始)小于2的div元素">
<input type="button" id="btn9" value=":header选取标题元素">
<input type="button" id="btn10" value=":animated选取正在执行动画的div元素">
</body>
</html>jQuery中的基本过滤选择器（四、三）：:first、:last、:not() ... ...的更多相关文章
- jQuery中的属性过滤选择器（四、五）：[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等
<!DOCTYPE html> <html> <head> <title>属性过滤选择器</title> <meta http-equ ...
- jQuery表单对象属性过滤选择器
jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...
- jQuery中first-child与first选择器区别
1.first-child first-child为每个父级元素匹配第一个子元素,可以匹配出多个元素: 示例代码: <!DOCTYPE html> <html lang=" ...
- Jquery | 基础 | jQuery表单对象属性过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...
- js进阶 11-1 jquery中的页面内容操作的三个方法
jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...
- jQuery选择器之可见性过滤选择器Demo
测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- JQuery中常用的 属性选择器
jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1) $('#id') id选择器 2) $('.class') css选择器,class类名 3) $ ...
- jQuery中的基本的选择器学习(补充版)
先看整体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- jQuery选择器之内容过滤选择器Demo
测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
随机推荐
- File类与常用IO流第九章——转换流
第九章.转换流 字节编码和字符集 编码:按照某种规则将字符以二进制存储到计算机中. 解码:将存储在计算机中的二进制数按照某种规则解析显示出来. 字符编码:Character Encoding ,就是一 ...
- 分别在Update和FixedUpdate使用GetKeyDown
测试目的 探究分别在Update和FixedUpdate使用GetKeyDown执行次数,会不同的 测试开始 在Update测试 我们先在Update测试,很正常是一帧重置一下状态,以防止点击一下执行 ...
- CentOS 7命令行修改网卡名称
在CentOS学习中,配置多个网卡,配置独立的IP地址,为网卡设置新的名称等,已经是必备技能,经小编亲测,以下方法能修改系统的网卡名称,操作步骤和截图一并和小伙伴们分享, 希望对大家的学习和使用有所帮 ...
- 关键字替代符号C++
不知从什么时候的哪里我看到了一个and关键字,心想这是个什么玩意...然后知道它相当于&&,于是开启了罪恶的生涯-- 替代关键字,似乎可读性更好,但是有些编译器可能会无法识别(eg.M ...
- 【Uva1025 A Spy in the Metro】动态规划
题目描述 某城市地铁是线性的,有n(2≤n≤50)个车站,从左到右编号1~n.有M1辆列车从第1站开始往右开,还有M2辆列车从第n站开始往左开.列车在相邻站台间所需的运行时间是固定的,因为所有列车的运 ...
- Deepin 20.1打造软件开发环境
支持国产操作系统,替代Windows势在必行,不能让美国卡"脖子"是广大计算机爱好者的共同心愿,下面列举一下Deepin V20.1下如何安装常用软件 ============== ...
- 手把手教你玩转HarmonyOS版地图应用开发
一.导读 7月31日,华为HarmonyOS开发者日将在杭州举行.为了方便更多开发者,高德开放平台地图SDK已在业内率先实现鸿蒙化迁移和重构,全面适配HarmonyOS并面向开发者免费发布.开发者可 ...
- Java生鲜电商平台-关于学习生鲜电商平台的思考(小程序/APP)
Java生鲜电商平台-关于学习生鲜电商平台的思考(小程序/APP) 说明:最近群里面的一个网友问的一个问题,让我陷入了深思,他问的问题很基础也很真实,"大佬,你们是怎么学习的呢?" ...
- Apache ActiveMQ(CVE-2016-3088)
影响版本 Apache ActiveMQ 5.0.0-5.13.x 路径地址 http://192.168.49.2:8161/admin/test/systemProperties.jsp 该漏洞允 ...
- 【Flutter学习一】Android的App的三种开发方式
是时候学习新技术了: 转自:https://blog.csdn.net/qq_41346910/article/details/86692124 移动开发发展到现在,已经出现了三种开发方式.本文我将为 ...