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 ...
随机推荐
- Scala学习——操作外部数据
scala操作外部数据 一.scala读取文件及网络数据 package top.ruandb.scala.Course08 import scala.io.Source object FileApp ...
- Python_结合Re正则模块爬虫
##### 爬取古诗文import reimport requestsdef parse_page(url): headers = { 'User-Agent':'Mozilla/5.0 (Windo ...
- R语言客户端RStudio快捷键大全
Console Description Windows & Linux Mac 将光标定位到控制台 Ctrl+2 Ctrl+2 清空控制台 Ctrl+L Command+L 将光标定位到行首 ...
- 以太坊-Win环境下remix环境搭建
一.node.js环境搭建 有多个安装方法,但是注意npm与node版本相关性较强!以下方案较为简便 1.下载网址 http://nodejs.cn/download/ 2.下载window 64位 ...
- 【连载】微服务网格Istio（一）
Istio基础 服务网格是用于描述构成应用程序的微服务网络以及应用之间的交互,服务网格的功能包括服务发现.负载均衡.故障恢复.指标和监控以及更加复杂的运维工作,例如A/B测试.金丝雀发布.限流.访问控 ...
- [考试总结]noip模拟21
中位数要排序!!!!!! 中位数要排序!!!!!! 中位数要排序!!!!!! 中位数要排序!!!!!! 中位数要排序!!!!!! 分差不加绝对值!!!! 分差不加绝对值!!!! 分差不加绝对值!!!! ...
- PhotoShop CC2015（64位）下载链接和破解教程
photoshop如今有cc和cs两种版本,之前出了一个cs的破解教程和扣圆形图,有很多朋友说cc比cs好用的多,希望出个cc的下载链接和破解教程,故推出2015pscc版破解教程和下载链接. 百度云 ...
- python代码下载m3u8视频
代码如下: # -*- coding: utf-8 -*- import requests import re import os import base64 from Crypto.Cipher i ...
- 记录21.07.21 —— ES6基础
学习目录 课件地址: ES6核心技术课件 1.let关键字 1.1 let与var的区别 ①let不能重复定义 ②块作用域的区别 ③变量声明之前let不能使用,var可以 ④ 课件代码 <htm ...
- Run Clojure Script with External Dependencies without leiningen
The normal way of deploy clojure files is using leiningen. But if we have no leiningen, or the scrip ...