jquery选择器
1.先引入一段html是JavaScript操作 让表格隔行变色
<!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></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> window.onload = function(){ //页面所有元素加载完毕 var item = document.getElementById("tb"); //获取id为tb的元素(table) var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素 var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素 for(var i=0;i < trs.length;i++){//循环tr元素 if(i%2==0){ //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1) trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色. } } } </script> </head> <body> <table id="tb"> <tbody> <tr><td>第一行</td><td>第一行</td></tr> <tr><td>第二行</td><td>第二行</td></tr> <tr><td>第三行</td><td>第三行</td></tr> <tr><td>第四行</td><td>第四行</td></tr> <tr><td>第五行</td><td>第五行</td></tr> <tr><td>第六行</td><td>第六行</td></tr> </tbody> </table> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> div,span,p { width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div.mini { width:55px; height:55px; background-color:#aaa; font-size:12px; } div.hide { display:none } </style> </head> <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> //jquery获得标签的对象 $(document).ready(function(){ //span标签 和id的two的标签的背景颜色发生改变 //基本选择器 //1.#id element .class * 最常用的是前三个 $("span,#two").css("background","#bbffaa"); //2.层级选择器 // $("body div") 表示body内所有div的颜色 //$("body div").css("background","red"); //$("body > div") 表示body内的所有子元素 //$("body > div").css("background","blue"); //改变class为one的下一个同辈元素 这个一般用$(".one").next("div")来取代 //$(.one).nextAll("div")表示样式为one以后的所有的d标签 //$(.one).siblings("div")选取所有同辈元素 无论前后位置 $(".one + div").css("background","yellow"); //3.过滤选择器 改变第一个元素的背景 //$("div : first").css("background","#bbffaa") //$("div:last") 表示最后一个div //$("div:not(.one)") 表示class不为one的div //$("div:even")表示索引为偶数的div "even"表示偶数 "odd"表示偶数 //$("div: eq(3)")表示索引为3的div "gt"表示大于 "lt表示小写 //$(":focus")选择聚焦的标签 $(":focus").css("background","yellow"); });
//之后还有内容选择器 属性选择器 等 都大大方便了我们标签的操作 //以上面的选择器可以看出当我改变间隔行的颜色是很容易的 而不像JavaScript操作时还要进行遍历 这也就是jquery的好处之一 </script> <body> <!-- 测试元素 --> <br /><br /> <!-- 测试的元素 --> <div class="one" id="one" > id为one,class为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test" > id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="two"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="two"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="test">class为mini,title为tesst</div> </div> <div style="display:none;" class="none"> style的display为"none"的div </div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"/> </div> <span id="mover">正在执行动画的span元素.</span> <button>选择当前获取焦点的所有元素</button> </body> </html>
aqlserver的分页