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 ...
随机推荐
- 浏览器判断及IE版本区分
备注:在火狐下和IE下,js的执行不一致,很多语句结果不一致,其他浏览器也可能,注意验证,多用if else包括window.onload: ①只用来区分IE和非IE内核的浏览器,由于只有IE支持Ac ...
- [转]ViewPager onPageChangeListener总结
android ViewPager滑动事件讲解 首先ViewPager在处理滑动事件的时候要用到OnPageChangeListener OnPageChangeListener这个接口需要实现三个方 ...
- [转] 一个程序猿眼中的国内主流地图api
在网站或者手机应用中,经常用到地图api.在现在这么激烈的竞争下,各地图服务提供的服务基本都趋于一致了.一个公司推出的新服务,其他公司肯定也会很快的跟进.这样,对于开发者来说,地图api的选择就主要参 ...
- （剑指Offer）面试题24：二叉搜索树的后序遍历序列
题目: 输入一个整数数组,判断该数组是不是某个二叉搜索树的后序遍历的结果,如果是则返回true,否则返回false. 假设输入的数组的任意两个数字都互不相同. 思路: 根据二叉搜索树的后序遍历特点,很 ...
- input标签写CSS时需要注意的几点（先收藏）
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...
- Objective-C运行时编程 - 方法混写 Method Swizzling
摘要: 本文描述方法混写对实例.类.父类.不存在的方法等情况处理,属于Objective-C(oc)运行时(runtime)编程范围. 编程环境:Xcode 6.1.1, Yosemite,iOS 8 ...
- Request对象的主要方法
setAttribute(String name,Object):设置名字为name的request的參数值 getAttribute(String name):返回由name指定的属性值 getAt ...
- [CentOS]yum安装postgres和ntfs-3g
卸载已经存在的postgreSql yum list | grep postgresyum remove postgresql-server 获取rpm文件并安装rpm -i http://yum.p ...
- 记录一些在VPS上折腾的东西
折腾这些东西,总是要经常借助搜索引擎找答案,找的次数多了,也就烦了,不想总是做重复工作. 所以把做过的一些事情记录一下,加深一下印象. 1.安装python2.7 VPS上面的太老了,之前安装的,过程 ...
- js日期计算及快速获取周、月、季度起止日
var now = new Date(); //当前日期 var nowDayOfWeek = (now.getDay() == 0) ? 7 : now.getDay() - 1; //今天是本周的 ...