- 浏览: 425890 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
springaop_springmvc:
apache lucene开源框架demo使用实例教程源代码下 ...
Java搜索工具——Lucene实例总结(一) -
chengang292214:
总结的不错
Web开发中的路径问题 -
liuyuanhui0301:
aka~
Java 归并排序(基于数组) -
IT人_:
不错
远程连接MySQL,防火墙阻止访问,解决办法 -
zhuchao_ko:
借鉴。
JNDI访问LDAP
1. 表格各行变色
HTML & CSS:
<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} </style> <table id="tbStu" cellpadding="0" cellspacing="0"> <tr> <th>学号</th><th>姓名</th><th>性别</th><th>总分</th> </tr> <!--奇数行--> <tr> <td>1001</td><td>张小明</td><td>男</td><td>320</td> </tr> <!--偶数行--> <tr> <td>1002</td><td>李明琪</td><td>女</td><td>350</td> </tr> </table>
JavaScript & jQuery
//Javascript: <script type="text/javascript"> window.onload=function(){ var oTb=document.getElementById("tbStu"); for(var i=0;i<oTb.rows.length-1;i++){ if(i%2){ oTb.rows[i].className="trOdd"; } } } </script> //Jquery: <script type="text/javascript"> $(function(){ $("#tbStu tr:nth-child(even)").addClass("trOdd"); }) </script>
2. jQuery检测机制
javascript操作元素时,对为空的元素需要进行判断,如果不为空,才能进行下一步的操作。如果对为空的元素不判断就进行操作,浏览器会报错。而jQuery自身具有检测机制,无需再添加判断。
//javaScript: <script type="text/javascript"> window.onload=function(){ if(document.getElementById("divT")) { var oDiv=document.getElementById("divT"); oDiv.innerHTML="这是一个检测页面"; } } </script> //要想操作id为divT的元素,需要判断该元素是否存在,即if(document.getElementById("divT"))。如果不判断,浏览器就会提示错误,页面会中断执行。 //Jquery: <script type="text/javascript"> $(function(){ $("#divT").html("这是一个检测页面"); }) </script> //Jquery中无需判断,如果divT不存在,页面也会正常执行。
3. 基本选择器
ID选择器,标签选择器,类选择器
<script type="text/javascript"> $(function(){ //ID匹配元素 $("#divOne").css("display","block"); }) $(function(){ //元素名匹配元素 (div元素下的span元素进行显示) $("div span").css("display","block"); }) $(function(){ //类匹配元素 (class为.clsFrame元素下的class为.clsOne的元素进行显示) $(".clsFrame .clsOne").css("display","block"); }) $(function(){ //匹配所有元素 $("*").css("display","block"); }) $(function(){ //合并匹配元素(id为divOne的元素和span元素进行显示) $("#divOne,span").css("display","block"); }) </script>
4. 层次选择器
层次选择器通过DOM元素之间的层次关系获取元素,层次关系包括后代、父子、相邻、兄弟关系。
<style type="text/css"> body{font-size:12px;text-align:center} div,span{float:left;border:solid 1px #ccc;margin:8px;display:none} </style> <div class="clsFraA">Left</div> <div class="clsFraA" 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> //Jquery: <script type="text/javascript"> $(function(){ //匹配后代元素 $("#divMid").css("display","block"); $("div span").css("display","block");//div下的所有span元素(包括子和孙子) }) $(function(){ //匹配子元素 $("#divMid").css("display","block"); $("div>span").css("display","block");//仅仅是div下的所有子span元素 }) $(function(){ //匹配后面元素(#divMid紧跟着的下一个元素) $("#divMid + div").css("display","block");//if#divMid后面紧跟的元素不是div,则不报错也不显示。 $("#divMid").next().css("display","block"); }) $(function(){ //匹配所有后面元素 $("#divMid ~ div").css("display","block"); $("#divMid").nextAll().css("display","block"); }) $(function(){ $("#divMid").siblings().css("display","block");//匹配所有相邻元素 包括前后 $("#divMid").siblings(“div”).css("display","block");//匹配所有相邻的div元素 }) </script>
5. 简单过滤选择器
<script type="text/javascript"> $(function(){ //为第一个li元素增加类别 $("li:first").addClass("GetFocus"); }) $(function(){ //为最后一个li元素增加类别 $("li:last").addClass("GetFocus"); }) $(function(){ //为所有除了class为.NotClass的li元素增加类别 $("li:not(.NotClass)").addClass("GetFocus"); }) $(function(){ //为所有索引值为偶数的li元素增加类别,从0开始计数 $("li:even").addClass("GetFocus"); }) $(function(){ //为所有索引值为奇数的li元素增加类别,从0开始计数 $("li:odd").addClass("GetFocus"); }) $(function(){ //为索引值为1的li元素增加类别,从0开始计数 $("li:eq(1)").addClass("GetFocus"); }) $(function(){ //为索引值大于1的li元素增加类别,从0开始计数 $("li:gt(1)").addClass("GetFocus"); }) $(function(){ //为索引值小于4的li元素增加类别,从0开始计数 $("li:lt(4)").addClass("GetFocus"); }) $(function(){ //增加标题类元素类别 $("div h1").css("width","238"); $(":header").addClass("GetFocus");//获取所有标题类型元素,如h1,h2… }) $(function(){ animateIt(); //增加动画效果元素类别 $("#spnMove:animated").addClass("GetFocus");//获取所有有动画效果的并且id为spnMove的元素 }) function animateIt() { //动画效果 $("#spnMove").slideToggle("slow", animateIt); } </script>
6. 内容过滤选择器
<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} span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee;display:none} </style> <script type="text/javascript"> $(function(){ //获取包含给定文本div的元素 $("div:contains('A')").css("display","block"); }) $(function(){ //获取所有不包含子元素或者文本的空div元素 $("div:empty").css("display","block"); }) $(function(){ //获取含有选择器所匹配的元素(span)的div元素 $("div:has(span)").css({"display":"block","border":"1px solid blue"}); }) $(function(){ //获取含有子元素或者文本的div元素 $("div:parent").css("display","block"); }) </script> <body> <div>ABCD</div> <div><span></span></div> <div>EFaH</div> <div></div> </body>
7. 可见性过滤选择器
显示函数:show() 隐藏函数:hide() <script type="text/javascript"> $(function(){ //:hidden获取不可见span元素,包括display:none和type=hidden以及visibility:hidden的元素 $("span:hidden").show(); $("div:visible").addClass("GetFocus");//获取所有可见的div元素 }) $(function(){ $("span:hidden").show().addClass("GetFocus"); }) </script>
8. 属性过滤选择器
<script type="text/javascript"> $(function(){ //显示所有含有id属性的div元素 $("div[id]").show(3000); }) $(function(){ //显示所有属性title的值是"A"的divdiv元素 $("div[title='A']").show(3000); }) $(function(){ //显示所有属性title的值不是"A"的div元素 $("div[title!='A']").show(3000); }) $(function(){ //显示所有属性title的值以"A"开始的div元素 $("div[title^='A']").show(3000); }) $(function(){ //显示所有属性title的值以"C"结束的div元素 $("div[title$='C']").show(3000); }) $(function(){ //显示所有属性title的值中含有"B"的div元素 $("div[title*='B']").show(3000); }) $(function(){ //显示所有属性title的值中含有"B"且属性id的值是"divAB"的div元素 $("div[id='divAB'][title*='B']").show(3000); }) </script>
9. 子元素过滤选择器
<script type="text/javascript"> $(function(){ //获取所有索引为2的li元素 $("li:nth-child(2)").addClass("GetFocus"); }) $(function(){ //获取所有索引为0的li元素 $("li:first-child").addClass("GetFocus"); }) $(function(){ //增加每个父元素下的最后一个子元素类别 $("li:last-child").addClass("GetFocus"); }) $(function(){ //增加每个父元素下只有一个子元素类别 $("li:only-child").addClass("GetFocus"); }) </script>
10. 表单对象属性过滤选择器
$(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(){ //显示表单中所有被选中option的元素内容 $("#divC").show(3000); $("#Span2").html("选中项是:"+$("select option:selected").text()); })
11. 表单选择器
<script type="text/javascript"> $(function(){ //显示Input类型元素的总数量 $("#form1 div").html("表单共找出 Input 类型元素:"+$("#form1 :input").length); //:input 表示获取所有input,textarea,select表单元素 $("#form1 div").addClass("div"); }) $(function(){ //显示所有文本框对象 $("#form1 :text").show(3000); }) $(function(){ //显示所有密码框对象 $("#form1 :password").show(3000); }) $(function(){ //显示所有单选按钮对象 $("#form1 :radio").show(3000); $("#form1 #Span1").show(3000); }) $(function(){ //显示所有复选框对象 $("#form1 :checkbox").show(3000); $("#form1 #Span2").show(3000); }) $(function(){ //显示所有提交按钮对象 $("#form1 :submit").show(3000); }) $(function(){ //显示所有图片域对象 $("#form1 :image").show(3000); }) $(function(){ //显示所有重置按钮对象 $("#form1 :reset").show(3000); }) $(function(){ //显示所有按钮对象 $("#form1 :button").show(3000); }) $(function(){ //显示所有文件域对象 $("#form1 :file").show(3000); }) </script>
评论
2 楼
zzqrj
2011-10-10
完整代码: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>
<title>使用jQuery选择器实现隔行变色</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<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}
</style>
<script type="text/javascript">
$(function(){
$("table tr:nth-child(even)").addClass("trOdd");
})
</script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tr>
<th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
</tr>
<!--奇数行-->
<tr>
<td>1001</td><td>张小明</td><td>男</td><td>320</td>
</tr>
<!--偶数行-->
<tr>
<td>1002</td><td>李明琪</td><td>女</td><td>350</td>
</tr>
</table>
</body>
</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>
<title>使用jQuery选择器实现隔行变色</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<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}
</style>
<script type="text/javascript">
$(function(){
$("table tr:nth-child(even)").addClass("trOdd");
})
</script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tr>
<th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
</tr>
<!--奇数行-->
<tr>
<td>1001</td><td>张小明</td><td>男</td><td>320</td>
</tr>
<!--偶数行-->
<tr>
<td>1002</td><td>李明琪</td><td>女</td><td>350</td>
</tr>
</table>
</body>
</html>
1 楼
八岭书生
2011-10-07
表格各行变色
js 用了 没反应 啊
js 用了 没反应 啊
发表评论
-
How tomcat works
2011-10-30 10:01 10511. Tomcat 模型:connector--------- ... -
jQuery Cookie插件
2011-10-06 10:49 0back>> cookie插件可以很 ... -
jQuery form表单插件
2011-10-06 10:45 979back>> http://www.cnbl ... -
jQuery验证插件
2011-10-06 10:40 1394back>> 使用示例: <!DOCTY ... -
jQuery性能优化
2011-10-06 10:28 1658back>> 1. 优化选择器的执行速度 ... -
jQuery中工具函数
2011-10-06 10:06 5212back>> 工具函数的一般格式如下:$.函数名 ... -
ajax在jQuery中的应用
2011-10-06 09:50 1794back>> 1. 加载异步数据 ... -
jQuery动画与特效
2011-10-05 15:26 2194back>> 1. 显示与隐 ... -
jQuery事件
2011-10-05 15:08 2594back>> 1. 事件机制 ... -
Jquery Dom操作
2011-10-05 14:44 1546back>> 1. 元素属性操作 ... -
jQuery权威指南
2011-10-05 08:58 795jQuery权威指南 1. jQuery入门 2. ... -
Jquery入门
2011-09-28 14:41 11671. Jquery基本功能 * 访问和操作D ... -
comet pushlet
2011-08-12 17:49 21401.http://www.ibm.com/developerw ... -
Ajax开发
2011-07-25 21:50 15181. netbeans 中文版改成英文版 在NetBea ... -
CSS+DIV
2011-06-28 16:02 1070精通CSS+DIV网页样式与布局 曾顺 人民邮电出 ... -
jquery
2011-06-09 08:08 968http://www.css888.com/ jQuer ... -
jsp乱码解决大全(转自csdn一高手)
2011-03-04 17:01 2163好文章, ... -
Unicode 控制字符
2011-03-03 11:44 3134<li> : &am ... -
URL中汉字乱码问题
2011-02-26 12:01 1567返回 Oak>> 服务器 ... -
分 页
2011-02-23 18:27 815返回Oak>> 1. 几种不同的分 ...
相关推荐
Jquery选择器,Jquery选择器Jquery选择器Jquery选择器Jquery选择器Jquery选择器
jQuery选择器大全(48个代码片段 21幅图演示)
jQuery选择器全解.
jQuery选择器速查表,包括了jQuery的基本选择器、层次选择器、过滤选择器、表单选择器,方便以后查找。
Jquery选择器; 基本选择器;jQuery选择器;jQuery选择器; 层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery...
jquery 选择器 描述
jQuery选择器过滤器全面的总结,老师推荐!
JQuery 选择器,方便 使用的技术
经典的jQuery选择器应用例子,直观的演示了各种选择器的应用例子。对学习jQuery很有帮助。
jQuery选择器大全(48个代码片段+21幅图演示)
这是一份比较全面的jQuery选择器基础知识,包括源代码和相应的ppt,供大家分享
Jquery选择器分类整理,基本都包含到了,学习笔记。
jquery选择器功能无比强大,用好了可以起到事半功倍的效果,这个资源把选择器单独列出来,便于方便查找
jquery选择器入门详解小案例,内附框架脚本,直接运行即可,可以查看源码!
JQuery选择器详解JQuery选择器详解
jquery初学者必备,有各种jquery的选择器,个人学习时整理
jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。
通过思维导图对知识进行梳理,以便记忆
(24)选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面,该页面中内嵌有几个CSS类:.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台...