jquery选择器练习例子

来源：互联网发布：软件设计方案评价编辑：程序博客网时间：2024/05/21 22:45

<!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 language="javascript" type="text/javascript" src="../include/jquery.js"></script><style>  div{  width:150px;  height:150px;  border:1px dashed #00F;  background-color:#CCC;  margin:5px;  float:left;}    .one-1{  width:80px;  margin:30px;  height:80px;  border:1px dashed #00F;  background-color: #FFC;  }</style><script language="javascript" type="text/javascript">//使用jquery加载事件$(document).ready(function (){//<input id="btn0" type="button" value="清空样式" />$("#btn0").click(function (){//当点击按钮后，设置id=two的div的背景颜色是绿色$("*").removeAttr("style");});//<input id="btn1" type="button" value="选中id=two的div，并且改变背景颜色是green (#two)" />//增加id为btn1按钮的事件$("#btn1").click(function (){//当点击按钮后，设置id=two的div的背景颜色是绿色$("#two").css("background","green");});//<input id="btn2" type="button" value="选中class=one-1的div,并且设置该div的背景颜色为green ('.one-1')" />//增加id为btn1按钮的事件$("#btn2").click(function (){//当点击按钮后，设置id=two的div的背景颜色是绿色$(".one-1").css("background","green");});//<input id="btn3" type="button" value="选中页面中所有的元素，并且设置背景颜色为green ('*')" />//增加id为btn1按钮的事件$("#btn3").click(function (){//当点击按钮后，设置id=two的div的背景颜色是绿色$("*").css("background","green");});//<input id="btn4" type="button" value="选中所有的div $('div')" />//增加id为btn4按钮的事件$("#btn4").click(function (){//当点击按钮后，设置id=two的div的背景颜色是绿色$("div").css("background","green");});//<input id="btn5" type="button" value="选中id=three,class=one-1的，span的元素，并且设置他们的背景颜色为green" /></div>//增加id为btn5按钮的事件$("#btn5").click(function (){//当点击按钮后，设置id=two的div的背景颜色是绿色$("#three,.one-1,span").css("background","green");});});</script></head><body><div id="one">id=one   <div class="one-1">class=one-1</div></div><div id="two">id=two<span>span的内容</span></div><div id="three">id=three</div><div class="d2">class=d2</div><div style="clear:both;"><input id="btn0" type="button" value="清空样式" /><input id="btn1" type="button" value="选中id=two的div，并且改变背景颜色是green  $('#two')" /><input id="btn2" type="button" value="选中class=one-1的div,并且设置该div的背景颜色为green $('.one-1')" /><input id="btn3" type="button" value="选中页面中所有的元素，并且设置背景颜色为green $('*')" /><input id="btn4" type="button" value="选中所有的div $('div')" /><input id="btn5" type="button" value="选中id=three,class=one-1的，span的元素，并且设置他们的背景颜色为green" /></div></body></html>

上例子是练习 id选择器，类选择器 *选择器的用法很难表达，看实例

<!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 language="javascript" type="text/javascript" src="../include/jquery.js"></script><style>  div{  width:150px;  height:150px;  border:1px dashed #00F;  background-color:#CCC;  margin:5px;  float:left;}    .one-1{  width:80px;  margin:30px;  height:80px;  border:1px dashed #00F;  background-color: #FFC;  }</style><script language="javascript" type="text/javascript">//使用jquery加载事件$(document).ready(function (){//<input id="btn0" type="button" value="清空样式" />$("#btn0").click(function (){//当点击按钮后，设置id=two的div的背景颜色是绿色$("*").removeAttr("style");});//<input id="btn1" type="button" value="$('div:first') 选取所有<div>元素中第1个<div>元素" />//增加id为btn1按钮的事件$("#btn1").click(function (){//当点击按钮后，设置id=two的div的背景颜色是绿色//选取div下的span和class=p的元素下的span$("div:first").css("background","green");});//<input id="btn2" type="button" value="$('div:last') 选取所有<div>元素中最后一个<div>元素" />//增加id为btn2按钮的事件$("#btn2").click(function (){//当点击按钮后，设置id=two的div的背景颜色是绿色//选取div下的span和class=p的元素下的span$("div:last").css("background","green");});//<input id="btn3" type="button" value="$('div:not(.d2)') 选取所有<div>元素中class不等于d2  的<div>元素 " />//增加id为btn3按钮的事件$("#btn3").click(function (){//当点击按钮后，设置id=two的div的背景颜色是绿色//选取div下的span和class=p的元素下的span$("div:not(.one-1)").css("background","green");});//<input id="btn4" type="button" value="$('div:even') 选取所有<div>元素中 偶数个div元素 " />//增加id为btn3按钮的事件$("#btn4").click(function (){//当点击按钮后，设置id=two的div的背景颜色是绿色//注意这里从0个开始算，0,2,4,6,8$("div:even").css("background","green");});//<input id="btn5" type="button" value="$('div:odd') 选取所有<div>元素中 奇数个div元素，下标1开始，1,3,5 " />//增加id为btn5按钮的事件$("#btn5").click(function (){//注意这里从0个开始算，1,3,5,$("div:odd").css("background","green");});});</script></head><body><div id="one">id=one   <div class="one-1">class=one-1</div></div><div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div><div id="three">id=three<br><span>id=three,span的内容</span></div><div class="d2">class=d2</div><p class='p'>这里放了一个pi<br><span>pi里还有span</span></p><div style="clear:both;"><input id="btn0" type="button" value="清空样式" /><input id="btn1" type="button" value="$('div:first') 选取所有<div>元素中第1个<div>元素" /><input id="btn2" type="button" value="$('div:last') 选取所有<div>元素中最后一个<div>元素" /><input id="btn3" type="button" value="$('div:not(.d2)') 选取所有<div>元素中class不等于d2  的<div>元素 " /><input id="btn4" type="button" value="$('div:even') 选取所有<div>元素中 偶数个div元素，下标0开始，0,2,4 " /><input id="btn5" type="button" value="$('div:odd') 选取所有<div>元素中 奇数个div元素，下标1开始，1,3,5 " /></div></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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简单选择器学习</title><script language="javascript" type="text/javascript" src="../include/jquery.js"></script><script language="javascript" type="text/javascript">//使用jquery加载事件$(document).ready(function (){//<input type="button" id="btn0" value="选中索引值等于1的tr元素  $('tr:eq(1)')" />$("#btn0").click(function (){//设置索引值=1的tr$("tr:eq(1)").css("background","#ffff99");});//<input type="button" id="btn1" value="选中索引值大于3的tr元素  $('tr:gt(3)')" />$("#btn1").click(function (){//设置索引值>3的tr$("tr:gt(3)").css("background","#ffff99");});//<input type="button" id="btn2" value="选中索引值小于3的tr元素  $('tr:lt(3)')" />$("#btn2").click(function (){//设置索引值<3的tr$("tr:lt(3)").css("background","#ffff99");});//<input type="button" id="btn3" value="选中网页中所有的标题元素  $(':header')" />$("#btn3").click(function (){//设置所有的标题标签元素$(":header").css("background","#ffff99");});//<input type="button" id="btn4" value="选中正在执行动画的div $('div:animated')" />$("#btn4").click(function (){//设置所有的标题标签元素$("div:animated").css("background","red");});/*function move(){$("#move").slideToggle(5000,move)}move();*/   });</script></head><body><h1>简单选择器h1</h1><h2>简单选择器h2</h2><div id="move" style="background-color:blue; width:300px; height:300px; border:1px solid #FF0;">动画</div><table width="600" border="1">  <tr>    <td>姓名</td>    <td>性别</td>    <td>年龄</td>    <td>手机</td>    <td>QQ</td>  </tr>  <tr>    <td>张三丰</td>    <td>女</td>    <td>102</td>    <td>13312344321</td>    <td>12344321</td>  </tr>  <tr>    <td>张三丰</td>    <td>女</td>    <td>102</td>    <td>13312344321</td>    <td>12344321</td>  </tr>  <tr>    <td>张三丰</td>    <td>女</td>    <td>102</td>    <td>13312344321</td>    <td>12344321</td>  </tr>  <tr>    <td>张三丰</td>    <td>女</td>    <td>102</td>    <td>13312344321</td>    <td>12344321</td>  </tr>  <tr>    <td>张三丰</td>    <td>女</td>    <td>102</td>    <td>13312344321</td>    <td>12344321</td>  </tr>  <tr>    <td>张三丰</td>    <td>女</td>    <td>102</td>    <td>13312344321</td>    <td>12344321</td>  </tr>  <tr>    <td>张三丰</td>    <td>女</td>    <td>102</td>    <td>13312344321</td>    <td>12344321</td>  </tr>  <tr>    <td>张三丰</td>    <td>女</td>    <td>102</td>    <td>13312344321</td>    <td>12344321</td>  </tr>  <tr>    <td>张三丰</td>    <td>女</td>    <td>102</td>    <td>13312344321</td>    <td>12344321</td>  </tr>  <tr>    <td>张三丰</td>    <td>女</td>    <td>102</td>    <td>13312344321</td>    <td>12344321</td>  </tr></table><input type="button" id="btn0" value="选中索引值等于1的tr元素  $('tr:eq(1)')" /><br><input type="button" id="btn1" value="选中索引值大于3的tr元素  $('tr:gt(3)')" /><br><input type="button" id="btn2" value="选中索引值小于3的tr元素  $('tr:lt(3)')" /><br><input type="button" id="btn3" value="选中网页中所有的标题元素  $(':header')" /><br><input type="button" id="btn4" value="选中正在执行动画的div $('div:animated')" /><br></body></html>