第二篇 jQuery 选择器
2-1,2 table隔行变色
<!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>实现隔行变色</title> <style type="text/css">
body{ font-size:12px; text-align:center;}
#tbStu{ width:260px; border:solid 1px #666; background-color:#eee;};
#tbStu tr{ line-height:23px;};
#tbStu tr th{ background-color:#ccc; color:#fff;};
#tbStu .trOdd{ background-color:#fff;};
.trOdd{ background-color:#fff;};
</style> <script>
/*
window.onload = function(){s
var obj = document.getElementById("tbStu");
for(var i=0;i<obj.rows.length-1;i++)
{
if(i%2)
{
obj.rows[i].classname ="trOdd";
}
}
}; */
</script> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
/*
$(function(){
//:odd 奇数 :even 偶数
$("#biaoqi").css({background:"#fff"});
$("#tbStu tr:odd").css({background: "#ccc"});
$("#tbStu tr:even").css({background: "#fff"});
});
*/
$(function(){
$("#tbStu tr:nth-child(even)").addClass("trOdd");
})
$(function(){
$("#tbStu tr:odd").css({background: "#ccc"});
})
</script>
</head> <body>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tbody>
<tr id="biaoqi"><th>11</th><th>11</th><th>11</th><th>11</th></tr>
<tr><td>22</td><td>22</td><td>22</td><td>22</td></tr>
<tr><td>33</td><td>33</td><td>33</td><td>33</td></tr>
</tbody>
</table>
</body>
</html>
2-3,4 jQuery选择器的不同
<!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>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//jQuery选择器定位页面元素时，元素考虑所定位的元素在页面中是否存在，即使该元素不存在该元素，浏览器也不提示出错信息，极大地方便了代码的执行效率
//js不同，会报错
</script>
</head>
<body>
</body>
</html>
2-5 jQuery基本选择器
<!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>jQuery基本选择器</title>
<style type="text/css">
body{ font-size:12px; text-align:center;}
.clsFrame{ width:300px; height:100px;}
.clsFrame div,span{ display:none; float:left; width:65px; height:65px; border:solid 1px #ccc; margin:8px;}
.clsone{ background-color:#eee; display:none;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
$(function(){
//基本：id,class,元素名，多个选择符
//
$("#divone").css("display","block");
//
$("div span").css("display","block");
//
$(".clsFrame .clsone").css("display","block");
//
$("#divone,.clsone").css("display","block");
})
</script>
</head>
<body>
<div class="clsFrame">
<div id="divone">ID</div>
<div class="clsone">CLASS</div>
<span>SPAN</span>
</div>
</body>
</html>
2-6 jQuery层次选择器
<!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>jQuery层次选择器</title>
<style type="text/css">
body{ font-size:12px; text-align:center;}
div,span{ float:left; border:solid 1px #ccc; margin:8px; display:none; }
.clsFraA{ width:65px; height:65px;}
.clsFraP{ width:45px; height:45px; background-color:#eee;}
.clsFraC{ width:25px; height:25px; background-color:#ddd;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
$(function(){
//后代 包括孙子
$("#divMid").css("display","block");
$("div span").css("display","block");
//匹配子元素 只包括儿子
$("#divMid").css("display","block");
$("div>span").css("display","block");
//匹配后面元素 下面为两个不同的写法
$("#divMid + div").css("display","block");
$("#divMid").next().css("display","block");
//匹配所有后面的元素
$("#divMid ~ div").css("display","block");
$("#divMid").nextAll().css("display","block");
//匹配所有相邻的元素
$("#divMid").siblings("div").css("display","block");
})
</script>
</head>
<body>
<div class="clsFraA">left</div>
<div class="clsFarA" id="divMid">
<span class="clsFraP" id="Span1">
<span class="clsFraC" id="Span2"></span>
</span>
</div>
<div class="clsFraA">Right_1</div>
<div class="clsFraA">Right_2</div>
</body>
</html>
2-7 jQuery 简单过滤选择器
<!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>jquery基本(简单)过滤选择器</title>
<style type="text/css">
body{ font-size:12px; text-align:center;}
div{ width:241px; height:83px; border:solid 1px #eee;}
h1{ font-size:13px;}
ul{ list-style-type:none; padding:0px;}
.DefClass,.NotClass{ height:23px; width:60px; line-height:23px; float:left; border-top:solid 1px #eee; border-bottom:solid 1px #eee;}
.GetFocus{ width:58px; border:solid 1px #666; background-color:#eee;}
#spnMove{ width:238px; height:23px; line-height:23px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//first() :first
//last() :last
//:not(selector)
//:even -偶数
//:odd -奇数
//:eq(index)
//:gt(index)
//:lt(index)
//:header
//:animated $(function(){//增加第一个元素的类别
$("li:first").addClass("GetFocus");
}) $(function(){//增加最后一个元素的类别
$("li:last").addClass("GetFocus");
}) $(function(){//增加去除所有与给定选择器匹配的元素类别
$("li:not(.NotClass)").addClass("GetFocus");
}) $(function(){
//获取所有索引值为偶数的元素，索引号从0开始
$("li:even").addClass("GetFocus");
}) $(function(){
//获取所有索引值为奇数的元素，索引号从0开始
$("li:odd").addClass("GetFocus");
}) $(function(){
//获取指定索引值的元素，索引号从0开始
$("li:eq(1)").addClass("GetFocus");
}) $(function(){
//获取所有大于给定索引值的元素
$("li:gt(1)").addClass("GetFocus");
}) $(function(){
//获取所有小于给定索引值的元素
$("li:lt(1)").addClass("GetFocus");
}) $(function(){
//:header获取所有标题类型的元素
$("div h1").css("width","238");
$(":header").addClass("GetFocus");
}) //获取正在执行动画效果的元素
$(function(){
animateIt();
$("#spnMove:animated").addClass("GetFocus");
})
//动画效果的方法
function animateIt(){
$("#spnMove").slideToggle("slow",animateIt);
}
</script>
</head>
<body>
<div>
<h1>基本(简单)过滤选择器</h1>
<ul>
<li class="DefClass">Item 0</li>
<li class="DefClass">Item 1</li>
<li class="NotClass">Item 2</li>
<li class="DefClass">Item 3</li>
</ul>
<span id="spnMove">span move</span>
</div>
</body>
</html>
2-8 内容过滤选择器
<!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>jquery --内容过滤选择器</title> <style type="text/css">
body{ font-size:12px; text-align:center;}
div{ float:left; border:sol 1px #ccc; margin:8px; width:65px; height:65px; display:none;}
span{ float:left; border:solid 1px #ccc; margin:8px; width:45px; height:45px; background-color:#eee;}
</style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//:contains(text) --获取包含给定文本的元素
//:empty --获取所有不包含子元素或者文本的空元素
//:has(selector) --获取含有选择器所匹配的元素的元素
//:parent --获取含有子元素或者文本的元素
$(function(){
$("div:contains('A')").css("display","block");
}) $(function(){
$("div:empty").css("display","block");
}) $(function(){
$("div:has(span)").css("display","block");
}) $(function(){
$("div:parent").css("display","block");
}) </script>
</head>
<body>
<div>ABCD</div>
<div><span></span></div>
<div>EFaH</div>
<div></div>
</body>
</html>
2-9 可见性过滤选择器
<!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>jquery --可见性过滤选择器</title> <style type="text/css">
body{ font-size:12px; text-align:center;}
div,span{ float:left; border:solid 1px #ccc; margin:8px; width:65px; height:65px;}
.GetFocus{ border:solid 1px #666; background-color:#eee;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script> //:hidden 获取所有不可见元素，或者type为hidden的元素 (包括样式display:none,type="hidden",visibility:hidden)
//：visible 获取所有的可见元素 $(function(){//增加所有可见元素类别
$("span:hidden").show();
$("div:visible").addClass("GetFocus");
}) $(function(){//增加所有不可见元素类别
$("span:hidden").show().addClass("GetFocus");
}) </script> </head> <body>
<span style="display:none;">Hidden</span>
<div>Visible</div>
</body>
</html>
2-10 属性过滤选择器
<!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>jquery --属性过滤选择器</title> <style type="text/css">
body{ font-size:12px; text-align:center;}
div{ float:left; border:solid 1px #ccc; margin:8px; width:65px; height:65px; display:none;}
</style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//show(3000)表示用3000毫秒显示。 $(function(){//显示所有含有ID属性的元素
$("div[id]").show(3000);
}) $(function(){//显示所有属性title的值是“A”的元素
$("div[title='A']").show(3000);
}) $(function(){//显示所有属性title的值不是“A”的元素
$("div[title != 'A']").show(3000);
}) $(function(){//显示所有属性title的值以"A"开始的元素
$("div[title ^= 'A']").show(3000);
}) $(function(){//显示所有属性title的值以"C"结束的元素
$("div[title $= 'C']").show(3000);
}) $(function(){//显示所有属性title的值中含有"B"的元素
$("div[title *= 'B']").show(3000);
}) $(function(){//显示所有属性title的值中含有"B"且属性id的值是“divAB”的元素
$("div[id = 'divAB'][title *= 'B']").show(3000);
})
</script>
</head>
<body>
<div id="divID">ID</div>
<div title="A">Title A</div>
<div id="divAB" title="AB">ID <br />Title AB</div>
<div title="ABC">Title ABC</div>
</body>
</html>
2-11 子元素过滤选择器
<!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>jquery --子元素过滤选择器</title> <style type="text/css">
body{ font-size:12px; text-align:center;}
ul{ width:241px; list-style-type:none; padding:0px;}
ul li{ height:23px; width:60px; line-height:23px; float:left; border-top:solid 1px #eee; border-bottom:solid 1px #eee; margin-bottom:5px;}
.GetFocus{ width:58px; border:solid 1px #666; background-color:#eee;}
</style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//:nth-child(eq|even|odd|index)
//:first-child
//:last-child
//:only-child $(function(){//增加每个父元素下的第2个子元素类别
$("li:nth-child(2)").addClass("GetFocus");
}) $(function(){//增加每个父元素下的第一个子元素类别
$("li:first-child").addClass("GetFocus");
}) $(function(){//增加每个父元素下的最后一个子元素类别
$("li:last-child").addClass("GetFocus");
}) $(function(){//增加每个父元素下只有一个子元素类别
$("li:only-child").addClass("GetFocus");
}) </script> </head> <body>
<ul>
<li>Item 1-0</li>
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul> <ul>
<li>Item 2-0</li>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
</ul> <ul>
<li>Item 3-0</li>
</ul>
</body>
</html>
2-12 表单对象属性过滤选择器
<!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>jquery --表单对象属性过滤选择器</title> <style type="text/css">
body{ font-size:12px; text-align:center;}
div{ display:none;}
select{ height:65px;}
.clsIpt{ width:100px; padding:3px;}
.GetFocus{ border:solid 1px #666; background-color:#eee;}
</style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//:enabled 获取表单中所有属性为可用的元素
//:disabled 获取表单中所有属性为不可用的元素
//:checked 获取表单中所有被选中的元素
//:selected 获取表单中所有被选中option的元素 $(function(){//增加表单中所有属性为可用的元素类别
$("#divA").show(3000);
$("#form1 input:enabled").addClass("GetFocus");
}) $(function(){//增加表单中所有属性为不可用的元素类别
$("#divA").show(3000);
$("#form1 input:disabled").addClass("GetFocus");
}) $(function(){//增加表单中所有被选中的元素类别
$("#divB").show(3000);
$("#form1 input:checked").addClass("GetFocus");
}) $(function(){
$("#divC").show(3000);
$("#Span2").html("选中项是："+
$("select option:selected").text());
}) </script> </head> <body> <form id="form1" style="width:241px;"> <div id="divA">
<input type="text" value="可用文本框" class="clsIpt" />
<input type="text" disabled="disabled" value="不可用文本框" class="clsIpt" />
</div> <div id="divB">
<input type="checkbox" checked="checked" value="1" />选中
<input type="checkbox" value="0" />未选中
</div> <div id="divC">
<select multiple="multiple">
<option value="0">Item 0</option>
<option value="1" selected="selected">Item 1</option>
<option value="2">Item 2</option>
<option value="3" selected="selected">Item 3</option>
</select><br />
<span id="Span2"></span>
</div> </form>
</body>
</html>
2-13 表单选择器
<!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>jquery --表单选择器</title> <style type="text/css">
body{ font-size:12px; text-align:center;}
form{ width:241px;}
textarea,select,button,input,span{ display:none;}
.btn{ border:#666 1px solid; padding:2px; width:60px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);}
.txt{ border:#666 1px solid; padding:3px;}
.img{ padding:2px; border:solid 1px #ccc;}
.div{ border:solid 1px #ccc; background-color:#eee; padding:5px;}
</style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//:input :text :password :radio :checkbox :submit :image :reset :button :file $(function(){ //显示Input类型元素的总数量
$("#form1 div").html("表单共找出Input类型元素："+ $("#form1 :input").length );
$("#form1 div").addClass("div");
}) $(function(){//显示所有文本框对象
//
$("#form1 :text").show(500);
}) $(function(){//显示所有密码框对象
$("#form1 :password").show(500);
}) //显示所有单选按钮对象
$(function(){
$("#form1 :radio").show(500);
}) //显示所有复选框对象
$(function(){
$("#form1 :checkbox").show(500);
})
//显示所有提交按钮对象
$(function(){
$("#form1 :submit").show(500);
}) //显示所有图片域对象
$(function(){
$("#form1 :image").show(500);
}) //显示所有重置按钮对象
$(function(){
$("#form1 :reset").show(500);
}) //显示所有按钮对象
$(function(){
$("#form1 :button").show(500);
}) //显示所有文件域对象
$(function(){
$("#form1 :file").show(500);
}) </script> </head> <body> <form id="form1">
<textarea class="txt">TextArea</textarea>
<select><option value="0">Item 0</option></select>
<input type="text" value="text" class="txt" />
<input type="password" value="password" class="txt" />
<input type="radio" /><span id="Span1">Radio</span>
<input type="checkbox"/><span id="Span2">checkbox</span>
<input type="submit" value="Submit" class="btn" />
<input type="image" title="Image" src="img/1.png" class="img" />
<input type="reset" value="Reset" class="btn" />
<input type="button" value="Button" class="btn" />
<input type="file" title="File" class="txt"/> <div id="divShow"></div> </form> </body>
</html>
第二篇 jQuery 选择器的更多相关文章
- 第二章 jQuery选择器
选择器是行为与文档内容之间的纽带,其目的是能轻松的找到文档中的元素. jQuery中的选择器继承了CSS的风格.利用jQuery选择器,可以非常便捷快速地找出特定的DOM元素,然后给它们添加相应的行为 ...
- Jquery第二篇【选择器、DOM相关API、事件API】
前言 前面已经介绍过了Jquery这门语言,其实就是一个javaScript的库-能够简化我们书写的代码-.本博文主要讲解使用Jquery定位HTML控件[定位控件就是获取HTML的标签],使用Jqu ...
- 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器
<锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 第二章（jQuery选择器）
2.1jQuery选择器是什么 1.CSS选择器 选择器 示例 选择器 示例 标签选择器 a{ } p{ } ul{ } ID选择器 #ID{ } 类选择器 .class{ } 群组选择器 td,p, ...
- JQuery选择器大全 前端面试送命题：面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性（又叫抗变）帮助理解
JQuery选择器大全 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素 ...
- jquery jtemplates.js模板渲染引擎的详细用法第二篇
jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个t ...
随机推荐
- rabbitmq访问控制试坑篇
访问控制我理解就是两层,第一层是Virtual host,相当于一个个独立主机 第二层是这个permissions,对照下图权限表 权限表(重要!) 需求 configgure write read ...
- 小程序web-view利用url给内嵌的网页传值
这个方法跟网页上的一样,直接通过截取url中传过来的参数来取值 <web-view src="https://www.baidu.com/test.html?url=http://ww ...
- vmware安装centos虚拟机，没有ip地址
如果centos没有ip地址,就不能通过xshell等工具进行连接,且在上面部署的项目,外部也不能正常访问 两种方式可以解决 第一种,在安装的时候,在INSTALLATION SUMMARY界面的SY ...
- 开源运维自动化平台-opendevops
开源运维自动化平台-opendevops 简介 官网 | Github| 在线体验 CODO是一款为用户提供企业多混合云.自动化运维.完全开源的云管理平台. CODO前端基于Vue iview开发. ...
- PLSQL报错： ORA-12514：TNS：监听程序当前无法识别连接描述符中请求的服务
一开始吓尿了,以为自己动着什么东西了把数据库玩坏了,谁知道打开服务发现服务没启动........... 我们要确保数据库服务是启动状态
- LC 961. N-Repeated Element in Size 2N Array【签到题】
In a array A of size 2N, there are N+1 unique elements, and exactly one of these elements is repeate ...
- Steps 步骤条
引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步. 基础用法 简单的步骤条. 设置active属性,接受一个Number,表明步骤的 index,从 0 开始.需 ...
- 解决SpringCloud使用Feign跨服调用时header请求头中的信息丢失
在使用SpringCloud进行Feign跨服调用时header请求头中的信息会丢失,是因为Feign是不会带上当前请求的Cookie信息和头信息的,这个时候就需要重写请求拦截. 1.需要重写Requ ...
- html to pdf 把HTML转换为PDF
http://www.evopdf.com/userguide/userguide.htm
- mariadb数据库集群
1.主从架构: 每个从节点需要一个dump线程连接主节点 异步:效率高,安全性低,有延迟 同步:效率低,安全性高,无延迟 主:可读可写,(dump thread) 从:可读不可写 (sql threa ...