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 ...
随机推荐
- python的setup.py文件及其常用命令
编写setup.py文件,获取帮助:python setup.py --help-commands [python] Standard commands: build ...
- 【洛谷P5008 逛庭院】tarjan缩点+贪心
既然没有题解,那么我就来提供给一份. -- 首先我们看到数据范围.妈耶!数据这么大,一开始还想用个DP来做,但是看着就不行,那么根据这个数据范围,我们大致可以猜到这道题的算法是一个贪心,那么我们怎么贪 ...
- Pelles C编译时出现的“POLINK: fatal error: 拒绝访问”问题的一种可能成因
在使用PellesC编译程序时,第一遍能正常编译执行,第二遍就无法编译,出现以下问题提示: Building NEWprogram2.exe. POLINK: fatal error: 拒绝访问. * ...
- pip批量安装库
将需要安装的库名和版本号都写在一个txt文档中,每个库名占一行,例如requests==2.24.0. 然后在用pip install -r命令去找到这个txt文档批量安装里面填写的库,如果嫌速度太慢 ...
- 深入刨析tomcat 之---第7篇 这个是链接,如果使用idea 创建servlet工程
recoded by 张艳涛 使用IDEA创建Servlet项目 使用IDEA创建Servlet项目
- 图解java多线程设计模式之一一synchronized实例方法体
synchronized实例方法体和synchronized代码块 synchronied void method(){ ....... } 这个等同于下面将方法体用synchronized(this ...
- "virtualbox for mac安装器遇到了一个错误, 导致安装失败. 请联系软件制造商以获得帮助"的解决办法
virtualbox下载地址: https://www.virtualbox.org/wiki/Downloads 原因:"Mac OS 10.13.4 会阻止外部内核扩展的安装" ...
- python grequest模块使用备忘录
手里上有一批链接,需要检查他们是否已经被删除.本来是想用多线程的,但是考虑了下一个是实现起来稍繁琐.而且性能不理想,单机基本超过10线程基本上就没有太多增益了. 所以考虑了下,还是决定用异步IO. 在 ...
- WinForm PerformClick()
在Winfrom开发中,经常遇到调用Click事件,如:btn_click(null,null),其实winfrom也自带一个模拟点击事件:PerformClick(),区别就是:前者无论控件是否En ...
- Jarvis OJ部分逆向
Jarvis OJ部分逆向题解 很久没有写博客了,前天上Jarvis OJ刷了几道逆向,保持了一下感觉.都是简单题目,写个writeup记录一下. easycrackme int __cdecl ma ...