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 ...
随机推荐
- 【LeetCode】560. 和为K的子数组
560. 和为K的子数组 知识点:数组:前缀和: 题目描述 给定一个整数数组和一个整数 k,你需要找到该数组中和为 k 的连续的子数组的个数. 示例 输入:nums = [1,1,1], k = 2 ...
- Scala学习——操作外部数据
scala操作外部数据 一.scala读取文件及网络数据 package top.ruandb.scala.Course08 import scala.io.Source object FileApp ...
- EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
参考: https://blog.csdn.net/weixin_43236850/article/details/100320564
- Docker安装和常用配置【Linux】
Linux下安装配置docker 安装指南:https://developer.aliyun.com/article/110806 一.配置国内镜像源 1.1 设置国内阿里巴巴下载源 [root@lo ...
- VM虚拟机桥接模式无法联网、NAT模式能正常联网
桥接模式:使虚拟机客户机可以和主机在同一网段,这样,和主机同局域网内的其他主机就也可以ping到虚拟机了: 因此,虚拟机设置为桥接模式,这样以后就可以方便的使用虚拟机了: 有时,虚拟机为桥接模式上不了 ...
- SpringBoot之了解自动配置原理
承接上文: import注解的使用: 作用:引用时,容器自动创建出这填写的类型的组件,默认组件的名字就是全类名. 往容器中添加两个组件 @Import({User.class, DBHelper.cl ...
- Python - 浅拷贝的四种实现方式
浅拷贝详解 https://www.cnblogs.com/poloyy/p/15084277.html 方式一:使用切片 [:] 列表 # 浅拷贝 [:] old_list = [1, 2, [3, ...
- 浅析线程池 ThreadPoolExecutor 源码
首先看下类的继承关系,不多介绍: public interface Executor {void execute(Runnable);} public interface ExecutorServic ...
- intouch 趋势图Y轴自适应功能完善
在项目中有利用到历史趋势,其y轴往往展示的是该点的最小/最大值范围,对于曲线波动展示不够友好.故而利用自带方法进行完善,以此记录. Histrend1.MinRange=HTGetAutoScaleV ...
- MegEngine TensorCore 卷积算子实现原理
作者:章晓 | 旷视 MegEngine 架构师 一.前言 2020 年 5 月 Nvidia 发布了新一代的 GPU 架构安培(Ampere).其中和深度学习关系最密切的莫过于性能强劲的第三代的 T ...