第二篇 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>
You are never too old to set another goal or to dream a new dream!!!
