jQuery基本筛选选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<!-- 为了测试，先添加一些样式 -->
<style type="text/css">
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
</style> <script type="text/javascript">
//jQuery的页面加载完成时触发的事件
$(document).ready(function(){
//$("div:first")表示：选择第一个div标签
$(button1).click(function(){
$("div:first").css("background-color", "red");
}); //$("div:last")表示：选择最后一个div标签
$(button2).click(function(){
$("div:last").css("background-color", "red");
}); //$("div:not(.one)")表示：选择除了class为one的所有div标签
$(button3).click(function(){
$("div:not(.one)").css("background-color", "red");
}); //$("div:even")表示：选择索引值为偶数的div标签
$(button4).click(function(){
$("div:even").css("background-color", "red");
}); //$("div:odd")表示：选择索引值为奇数的div标签
$(button5).click(function(){
$("div:odd").css("background-color", "red");
}); //$("div:eq(3)")表示：选择索引值为3的div标签
$(button6).click(function(){
$("div:eq(3)").css("background-color", "red");
}); //$("div:gt(3)")表示：选择索引值大于3的div标签
$(button7).click(function(){
$("div:gt(3)").css("background-color", "red");
}); //$("div:lt(3)")表示：选择索引值小于3的div标签
$(button8).click(function(){
$("div:lt(3)").css("background-color", "red");
}); //$(":header")表示：选择标题标签
$(button9).click(function(){
$(":header").css("background-color", "red");
}); //$(":animated")表示：选择有动画的标签
$(button10).click(function(){
$(":animated").css("background-color", "red");
});
});
</script>
</head>
<body>
<h3>标题</h3>
<a href="">刷新</a>
<input type="button" id="button1" value="选择第一个div元素."/>
<input type="button" id="button2" value="选择最后一个div元素."/>
<input type="button" id="button3" value="选择class不为one的 所有div元素."/>
<input type="button" id="button4" value="选择索引值为偶数 的div元素."/>
<input type="button" id="button5" value="选择索引值为奇数 的div元素."/>
<input type="button" id="button6" value="选择索引值等于3的元素."/>
<input type="button" id="button7" value="选择索引值大于3的元素."/>
<input type="button" id="button8" value="选择索引值小于3的元素."/>
<input type="button" id="button9" value="选择所有的标题元素."/>
<input type="button" id="button10" value="选择当前正在执行动画的所有元素."/>
<br/><br/>
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div> <div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div> <span id="mover">正在执行动画的span元素.</span> <script type="text/javascript">
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
</script> </body>
</html>
jQuery基本筛选选择器的更多相关文章
- jQuery的筛选选择器
基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
- jquery 属性筛选选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- jquery 内容筛选选择器
基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上 注意事项: :contains与:has都 ...
- jQuery选择器之表单对象属性筛选选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- jQuery选择器之属性筛选选择器
在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型 ...
- jquery-5 jQuery筛选选择器
jquery-5 jQuery筛选选择器 一.总结 一句话总结:选择器加动态添加方法可以不用想方法名,这个简单方便. 1.筛选选择器有哪三种? 过滤 查找 串联 1.过滤 eq();first(); ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- jquery 表单对象属性筛选选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- jquery 子元素筛选选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
随机推荐
- log4cpp简单示例
log4cpp简单示例 下载地址 Sample.cpp #include <iostream> #include <log4cpp/FileAppender.hh> #incl ...
- 悼念512汶川大地震遇难同胞——珍惜现在，感恩生活--hdu2191（多重背包模板）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2191 标准的多重背包 题目 有N种物品和一个容量为V的背包.第i种物品最多有n[i]件可用,每件费用是 ...
- Apache mahout 源码阅读笔记-DataModel之UserBaseRecommender
先来看一下使用流程: 1)拿到DataModel 2)定义相似度计算模型 PearsonCorrelationSimilarity 3)定义用户邻域计算模型 NearestNUserNeighborh ...
- thread msg
提取的nordic rf51xx/rf52xx sdk中的线程间消息通信机制,非常简洁 demo.c #include <stdio.h> #include <stdlib.h> ...
- Angular 笔记系列（一）项目组织与命名规范
其实使用 Angular.js 做项目已经很久了,也遇到过许多问题.其中很多问题的出现都是因为没有按照规范或者最佳实践来做,大部分原因是学的不够细,很多 tips 没 get 到,用到项目中就会出现各 ...
- 转载 C#开发串口总结，并提炼串口辅助类到公用类库中
C#开发串口总结,并提炼串口辅助类到公用类库中 开发C#相关的项目有很多年了,一直没有接触串口的开发,近期由于工作的需要,需要了解熟悉对硬件串口的开发,通过对串口的深入了解,串口也不再是什么神秘的东西 ...
- DEPHI XE5 XE6 ANDROID IOS开发的几点体会
DEPHI XE5 XE6 ANDROID IOS开发的几点体会 2014-09-04 20:48 1.不纠结于APK或者APP的大小.现在的客户端设备都很廉价,300元以上的新安卓设备都不在乎软件的 ...
- Full List of NMD R1 Singapore 2017
The initial adidas NMD Singapore, which sparked a sneaker craze larger than the Three Stripes could' ...
- BitmapFactory.decodeStream(inputStream)返回null的解决方法
场景:Android,通过inputStream从网络上获取图片 随后两次使用BitmapFactory对InputStream进行操作,一次获取宽高,另一次缩放 但是在缩放时,发现inputStre ...
- Docker+.Net Core 的那些事儿-2.创建Docker镜像
1.从store.docker.com获取.net core镜像 docker pull microsoft/dotnet 2.创建一个.net core项目,并发布 在上篇文章结尾建立的工作目录下, ...