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 ...
随机推荐
- Notes on Probabilistic Latent Semantic Analysis (PLSA)
转自:http://www.hongliangjie.com/2010/01/04/notes-on-probabilistic-latent-semantic-analysis-plsa/ I hi ...
- OC：通讯录实战
实战(使用OC的知识制作一个简易通讯录) //语法糖.笑笑语法 // NSString * string = [NSString stringWithFormat:@"string" ...
- MFC程序中消息以及函数的处理顺序简介[转]
MFC应用程序中处理消息的顺序 1.AfxWndProc() 该函数负责接收消息,找到消息所属的CWnd对象,然后调用AfxCallWndProc 2.AfxCallWndProc() 该 ...
- GIT 中提示 please tell me who you are
如果使用git过程中出现了,please tell me who you are ,需要设置一下使用者的身份. 1.git config user.name "username" ...
- 10635 - Prince and Princess
Problem D Prince and Princess Input: Standard Input Output: Standard Output Time Limit: 3 Seconds In ...
- TCP/IP TIME_WAIT状态原理
原文转载:http://elf8848.iteye.com/blog/1739571 IME_WAIT状态原理 ---------------------------- 通信双方建立TCP连接后,主动 ...
- registerClassAlias()函数和getClassByAlias()函数
flash.net 包中包含包级函数,可用于打开新的浏览器窗口,向服务器发送 URL 请求以及处理类别名. registerClassAlias()函数 public function registe ...
- 谷歌技术"三宝"之MapReduce
江湖传说永流传:谷歌技术有"三宝",GFS.MapReduce和大表(BigTable)! 谷歌在03到06年间连续发表了三篇非常有影响力的文章,各自是03年SOSP的GFS,04 ...
- 使用TypeDescriptor给类动态添加Attribute
给类动态添加Attribute一直是我想要解决的问题,从msdn里找了很久,到Stack Overflow看了不少文章,算是最终有了答案. 先是有这样的一段解释 Attributes are stat ...
- 抛砖引玉：关于Android的ListView中CheckBox错乱
首先:参考了这篇翻译的文章:http://www.cnblogs.com/xiaowenji/archive/2010/12/08/1900579.html 文章中关于说的Android中的Recyc ...