jQuery选择器之基本过滤选择器Demo
测试代码:
03-基本过滤选择器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03-基本过滤选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
//<input type="button"div:first value="选择第一个div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:first").css("background","red");
});
//<input type="button" value="选择最后一个div元素." id="btn2"/>
$("#btn2").click(function(){
$("div:last").css("background","red");
});
//<input type="button" value="选择class不为one的 所有div元素.div:not(.one)" id="btn3"/>
$("#btn3").click(function(){
$("div:not(.one)").css("background","blue");
});
//<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div:even").css("background","red");
});
//<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div:odd").css("background","red");
});
//<input type="button" value="选择索引值等于3的元素." id="btn6"/>
$("#btn6").click(function(){
$("div:eq(3)").css("background","red");
});
//<input type="button" value="选择索引值大于3的元素." id="btn7"/>
$("#btn7").click(function(){
$("div:gt(3)").css("background","red");
});
//<input type="button" value="选择索引值小于3的元素." id="btn8"/>
$("#btn8").click(function(){
$("div:lt(3)").css("background","red");
});
//<input type="button" value="选择所有的标题元素." id="btn9"/>
$("#btn9").click(function(){
//<h3><h4>
$(":header").css("background","red");
});
//<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
function move(){
// slideDwon(); 向下滑动
// slideUp(); 向上收起
//如果界面的元素是隐藏的，调用这个slideToggle方法，它会自动显示元素，
//如果是显示的，调用这个slideToggle方法，它会自动隐藏元素，
$("#mover").slideToggle("slow",move);
//滑动切换：当元素隐藏时，向下滑动，但元素显示时，先上收起..
}
move();
//获取正在执行动画的元素...
$("#btn10").click(function(){
$(":animated").css("background","red");
});
//animated
});
</script>
</head>
<body>
<h3>基本过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选择第一个div元素." id="btn1"/>
<input type="button" value="选择最后一个div元素." id="btn2"/>
<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
<input type="button" value="选择索引值等于3的元素." id="btn6"/>
<input type="button" value="选择索引值大于3的元素." id="btn7"/>
<input type="button" value="选择索引值小于3的元素." id="btn8"/>
<input type="button" value="选择所有的标题元素." id="btn9"/>
<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
<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>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover" >正在执行动画的span元素.</span>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>
jQuery选择器之基本过滤选择器Demo的更多相关文章
- jQuery选择器之内容过滤选择器Demo
测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- jQuery选择器之可见性过滤选择器Demo
测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- jquery选择器之层级过滤选择器
$("ancestor descendant"):选取parent元素后所有的child元素 $("parent > child"):选取parent元素 ...
- jQuery选择器之表单选择器Demo
测试代码: 09-表单选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jquery选择器之属性过滤选择器
<style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...
- jquery选择器之内容过滤选择器
先写出DOM元素的HTML结构: <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray ...
- jquery选择器之属性过滤选择器详解
代码如下: <style type="text/css"> /*高亮显示*/ .highlight{ } </style> 复制代码代码如下 ...
- jquery选择器之基本过滤选择器
<style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...
- jQuery选择器之子元素选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
随机推荐
- KMP算法及java实现
参考: http://blog.csdn.net/cdnight/article/details/11935387
- XML与DataSet相互转换，DataSet查询
以FileShare.Read形式读XML文件: string hotspotXmlStr = string.Empty; try { Stream fileStream = new FileStre ...
- 检查.net代码中占用高内存函数(翻译)
哈哈,昨天没事做,在CodeProject瞎逛,偶然看到这篇文章,居然读得懂,于是就翻译了一下,当练习英语,同时增强对文章的理解,发现再次翻译对于文章的一些细节问题又有更好的理解.下面是翻译内容,虽然 ...
- CloudStack4.2 更新全局参数
{ "updateconfigurationresponse": { "configuration": { "category": &quo ...
- perl学习笔记（3）—— 坑
(1)用perl来ls一个目录: 写perl的时候,经常要调用到系统命令,perl有很多等价的函数可以用,但是,不小心任性了,就想用system来实现了,好吧,来个ls把,列出指定的一个目录,直接上代 ...
- T4模板语法
T4,即4个T开头的英文字母组合:Text Template Transformation Toolkit. T4文本模板,即一种自定义规则的代码生成器.根据业务模型可生成任何形式的文本文件或供程序调 ...
- Flex Builder 开发语言切换问题
1.Flex Builder 4.6切换语言 打开\Adobe\Adobe Flash Builder 4.6\FlashBuilder.ini -nlzh_CN-startupeclipse/plu ...
- PL/pgSQL学习笔记之十一
http://www.postgresql.org/docs/9.1/static/plpgsql-declarations.html 39.3.4. Row 类型 name table_name%R ...
- EasyUI-右键菜单变灰不可用效果
使用过EasyUI的朋友想必都知道疯狂秀才写的后台界面吧,作为一个初学者我不敢妄自评论它的好坏,不过它确实给我们提供了一个很好框架,只要在它的基础上进行修改,基本上都可以满足我们开发的需要. 知道“疯 ...
- 从零开始学android开发-项目打包发布
右键项目 选择[android tools]-[export signed application package] 点击[next] 如果没有keystore可以选择[create new keys ...