jQuery--基本过滤选择器
1.基本过滤选择器介绍
基本过滤器：
- :first 获取数组中第一个元素
- :last 获取数组中最后一个
- :eq(selector) 获取指定索引
- :gt(index) 大于指定索引
- :lt(index) 小于指定索引
- :even 偶数，从0开始计数（0、2、4即1/3/5行）
- :odd 奇数
- :not(selector) 去除所有与指定选择器匹配的元素
- :header 获得所有标题元素
- :animated 获得所有动画
- :focus 获得焦点
2.代码实例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>03-基本过滤选择器.html</title>
6 <!-- 引入jQuery -->
7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
8 <script src="./script/assist.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="./css/style.css" />
10 <script type="text/javascript">
11 $(function(){
12 // <input type="button" value="选择第一个div元素." id="btn1"/>
13 $("#btn1").click(function(){
14 $("div:first").css("background-color","red");
15 });
16 // <input type="button" value="选择最后一个div元素." id="btn2"/>
17 $("#btn2").click(function(){
18 $("div:last").css("background-color","red");
19 });
20 // <input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
21 $("#btn3").click(function(){
22 $("div:not('.one')").css("background-color","red");
23 });
24 // <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
25 $("#btn4").click(function(){
26 $("div:even").css("background-color","red");
27 });
28 // <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
29 $("#btn5").click(function(){
30 $("div:odd").css("background-color","red");
31 });
32 // <input type="button" value="选择索引值等于3的元素." id="btn6"/>
33 $("#btn6").click(function(){
34 $("div:eq(3)").css("background-color","red");
35 });
36 // <input type="button" value="选择索引值大于3的元素." id="btn7"/>
37 $("#btn7").click(function(){
38 $("div:gt(3)").css("background-color","red");
39 });
40 // <input type="button" value="选择索引值小于3的元素." id="btn8"/>
41 $("#btn8").click(function(){
42 $("div:lt(3)").css("background-color","red");
43 });
44 // <input type="button" value="选择所有的标题元素." id="btn9"/>
45 $("#btn9").click(function(){
46 $(":header").css("background-color","red");
47 });
48 // <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
49 $("#btn10").click(function(){
50 $(":animated").css("background-color","red");
51 });
52 // <input type="text" value="请输入账号" defaultValue="请输入账号" />
53 // <input type="text" value="请输入密码" defaultValue="请输入密码"/>
54 //给文本框绑定获取和失去焦点的事件
55 //on支持一个函数可以绑定多个事件
56 $("input[type='text']").on("blur focus",function(){
57 var defaultValue = $(this).attr("defaultValue");
58 if($(this).is(":focus")){
59 if($(this).val() == defaultValue){
60 $(this).val("");
61 }
62 } else {
63 if($(this).val() == "") {
64 $(this).val(defaultValue);
65 }
66 }
67 });
68 });
69 </script>
70 </head>
71 <body>
72 <h3>基本过滤选择器.</h3>
73 <button id="reset">手动重置页面元素</button>
74 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
75
76 <input type="button" value="选择第一个div元素." id="btn1"/>
77 <input type="button" value="选择最后一个div元素." id="btn2"/>
78 <input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
79 <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
80 <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
81 <input type="button" value="选择索引值等于3的元素." id="btn6"/>
82 <input type="button" value="选择索引值大于3的元素." id="btn7"/>
83 <input type="button" value="选择索引值小于3的元素." id="btn8"/>
84 <input type="button" value="选择所有的标题元素." id="btn9"/>
85 <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
86 <input type="text" value="请输入账号" defaultValue="请输入账号" />
87 <input type="text" value="请输入密码" defaultValue="请输入密码"/>
88
89 <br /><br />
90
91 <!-- 测试的元素 -->
92 <div class="one" id="one" >
93 id为one,class为one的div
94 <div class="mini">class为mini</div>
95 </div>
96
97 <div class="one" id="two" title="test" >
98 id为two,class为one,title为test的div.
99 <div class="mini" title="other">class为mini,title为other</div>
100 <div class="mini" title="test">class为mini,title为test</div>
101 </div>
102
103 <div class="one">
104 <div class="mini">class为mini</div>
105 <div class="mini">class为mini</div>
106 <div class="mini">class为mini</div>
107 <div class="mini"></div>
108 </div>
109
110
111
112 <div class="one">
113 <div class="mini">class为mini</div>
114 <div class="mini">class为mini</div>
115 <div class="mini">class为mini</div>
116 <div class="mini" title="tesst">class为mini,title为tesst</div>
117 </div>
118
119
120 <div style="display:none;" class="none">style的display为"none"的div</div>
121
122 <div class="hide">class为"hide"的div</div>
123
124 <div>
125 包含input的type为"hidden"的div<input type="hidden" size="8"/>
126 </div>
127
128
129 <span id="mover">正在执行动画的span元素.</span>
130
131 </body>
132 </html>
jQuery--基本过滤选择器的更多相关文章
- jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
- jQuery简单过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--jQuery选择器详解 根据所获 ...
- jQuery基本过滤选择器
jQuery基本过滤选择器: <h1>this is h1</h1> <div id="p1"> <h2>this is h2< ...
- Jquery的过滤选择器分为哪几种？
Jquery的过滤选择器分为哪几种? 转载▼ 标签: jquery 过滤选择器 分类 分类: JQuery 所有的过滤选择器分为哪几种: 一.基本过滤选择器(重点掌握下列八个) :first 选取第一 ...
- 第一百六十五节，jQuery，过滤选择器
jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...
- jquery :checked(过滤选择器) 和 空格:checked(后代选择器)
jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...
- JQuery 可见性过滤选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JQuery 内容过滤选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery内容过滤选择器与子元素过滤选择器用法实例分析
jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...
- jquery :checked(过滤选择器) 和 空格:checked(后代选择器)【转】
jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...
随机推荐
- python-利用xlrd模块中读取有合并单元格的excel数据
前言 对于excel中有合并单元格的情况,合并的单元格只能取到第一个单元格的值,合并的单元格后面的单元格内容的值为空,针对这个情况,写了下面一段代码实现, 对单元格进行判断,如果是传入的索引是合并单元 ...
- 记一次腾讯云服务器centos linux可视化桌面安装并进行远程桌面登录及其安装中文包
开始前请确保你有能上网的主机两部(一个是CentOS7系统,一个是Windows10系统)1.用SSH root用户登录Centos主机:2.检查你的centos是否装了epel库 执行命令:rpm ...
- webpack5学习
目录 1. Why Webpack? 2. Webpack上手 2.1 Webpack功能 2.2 需要安装的包 2.3 简易命令 3. Webpack配置文件 3.1 局部webpack打包 3.2 ...
- 不需要高价购买BI工具，掌握这个Excel插件就能碾压大数据
曾几何时,EXCEL在数据界可谓是独树一帜,引领风骚,在职场中无人不知,无人不晓.但是随着大数据的出现,EXCEL便风光不再,江河日下,一度被其他大数据工具挤到了后面,逐渐被边缘化了.而我是一个EX ...
- 浅谈MySQL日志文件｜手撕MySQL｜对线面试官
关注微信公众号[程序员白泽],进入白泽的知识分享星球 前言 上周五面试了字节的第三面,深感数据库知识的重要,我也意识到在平时的学习中,自己对于数据库的学习较为薄弱.甚至在有过一定实习经验之后,依旧因为 ...
- shell脚本编程练习
转至:http://www.178linux.com/88406 1.写一个脚本,使用ping命令探测172.16.250.1-172.16.250.254之间的所有主机的在线状态 在线的主机使用绿色 ...
- Java课程设计---删除学生
1.界面已经在上次修改操作的过程添加完成 2.在StudentDao中添加删除方法 public boolean delete(int id) throws SQLException { DbUtil ...
- python初略复习（2）及python相关数据分析模块的介绍
常用模块 Python中的模块在使用的时候统一都是采用的句点符(.) # 就是模块名点方法的形式 import time time.time() import datetime datetime.da ...
- Chapter09 项目
Chapter09 项目 房屋出租系统(面向对象中级) 9.1 房屋出租系统-需求 9.1.1项目需求说明 实现基于文本界面的<房屋出租软件>. 能够实现对房屋信息的添加.修改和删除(用数 ...
- LeetCode-098-验证二叉搜索树
验证二叉搜索树 题目描述:给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数. 节点的右子树只包含大于当前节点的数. 所有左子树和 ...