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.οnlοad=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.οnlοad=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>