第二篇 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 ...
随机推荐
- 主线程 Looper.loop() 死循环为何不会ANR
先看下 ActivityThread 中的这段代码: 而 loop() 方法中,存在一个死循环: public static void loop() { ... ... ... for (;;) { ...
- （十一）C语言之选择结构
- smarty逻辑运算符
smarty逻辑运算符 eq equal : 相等 neq not equal:不等于 gt greater than:大于 lt less th ...
- JS遍历OCX方法
/----查看OCX组件的属性 <html> <head> <title>OCX</title> <meta http-equiv="C ...
- 强大的unique
强大的unique 两道红题为例眼熟一下unique P1138 第k小整数 题解 这里用到了STL的去重函数哦 unique 首先你有一个待处理的数组 a[n] 一定要先排序鸭 sort( a+1 ...
- 利用ExpandableListView实现常用号码查询功能的实现
package com.loaderman.expandablelistviewdemo; import android.content.Context; import android.databas ...
- NavMenu 导航菜单
顶栏 适用广泛的基础用法. 导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式.另外,在菜单中通过submenu组件可以生成二级菜单.Menu 还提供了background-colo ...
- 使用EasyPrint实现不预览直接打印功能_非JS打印
插件地址 github 下载插件,安装后将在注册表中添加EasyPrint的协议 随后可以在开始->运行中输入EasyPrint://1&test 进行测试 参数分为两部分使用[&am ...
- springboot2.0---控制台打印Mybatis的SQL记录
题记:每次使用mybatis出错,都不知道sql原因,debug也不出结果,索性将其打印出来,更加容易排错. 亲测有效,只需要将下面的logback.xml放置在resource目录下即可打印. 方式 ...
- Windows下Java JDK环境变量的配置
注意:前提是你已经在电脑上安装了JDK 1.打开控制面板—系统和安全—系统,选择高级系统设置 2.选择环境变量 3. 然后看看用户变量中有没有JAVA_HOME和CLASSPATH变量 4.新建JAV ...