jQuery学习（1）
<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type='text/javascript' src='js/jquery.js'></script> <style type="text/css"> #one{ width:45px; background:#D876F4; margin:20px; } #two,#three,#mover{ background:#9C9AC9; width:150px; margin-top:-85px; position:absolute; float:left; } #two{ margin-left:100px; } #two1,#two2,#three01{ width:100px; height:100px; margin:10px; } #two,#two1,#two2,#three,#three01,#mover{ border:1px solid black; } #three{ margin-left:275px; } #mover{ margin-left:450px; } </style> </head> <body> <h1>XXXXX</h1> <h2>XXXXXXXXXXXXXX</h2> <h3>XXXXXXXXXXXXXXXXXXXXXXXXX</h3> <input type="button" value="改变第一个div元素的背景色为" id="b1"/> <input type="button" value="改变最后一个div元素的背景色为 #0000FF" id="b2"/> <input type="button" value="改变class不为one的所有div元素的背景色为#0000FF" id="b3"/> <input type="button" value="改变索引值为偶数的所有div元素的背景色为#0000FF" id="b4"/> <input type="button" value="改变索引值为奇数的所有div元素的背景色为#0000FF" id="b5"/> <input type="button" value="改变索引值为大于3的所有div元素的背景色为#0000FF" id="b6"/> <input type="button" value="改变索引值为等于3的所有div元素的背景色为#0000FF" id="b7"/> <input type="button" value="改变索引值为小于3的所有div元素的背景色为#0000FF" id="b8"/> <input type="button" value="改变所有的标题元素背景色为#0000FF" id="b9"/> <input type="button" value="改变当前正在执行动画的所有元素的背景色为#0000FF" id="b10"/> <div id="one" class="mini"> div id为one </div> <div id="two"> div id为two <div id="two1"> id twoo1 </div> <div id="two2"> id twoo2 </div> </div> <div id="three" class="one"> div id为three class one <div id="three01"> id three01 </div> </div> <div id="mover"> 执行动画 </div> <span id="s_one" class="mini"> span one </span> <script type="text/javascript" language="javascript"> //如何做出动画效果，jquery提供一些特效 //************************************** mymove(); function mymove(){ $("#mover").slideToggle("fast",mymove); } //********************************** //改变第一个div元素的背景色为#0000FF $("#b1").click(function (){ $("div:first").css("background","#0000FF") }); //********************************** //改变最后一个div元素的背景色为#0000FF $("#b2").click(function (){ $("div:last").css("background","#0000FF") }); //********************************** //改变class不为one的所有div元素的背景色为#0000FF $("#b3").click(function(){ $("div:not(.one)").css("background","#0000FF") }); //********************************** //改变索引值为偶数的所有div元素的背景色为#0000FF $("#b4").click(function(){ $("div:even").css("background","#0000FF") }); //********************************** //改变索引值为偶数的所有div元素的背景色为#0000FF $("#b5").click(function(){ $("div:odd").css("background","#0000FF") }); //************************************** //改变索引值为大于3的所有div元素的背景色为#0000FF $("#b6").click(function(){ $("div:gt(3)").css("background","#0000FF") }); //************************************* //改变索引值为等于3的所有div元素的背景色为#0000FF $("#b7").click(function(){ $("div:eq(3)").css("background","#0000FF") }); //************************************* //改变索引值为小于3的所有div元素的背景色为#0000FF $("#b8").click(function(){ $("div:lt(3)").css("background","#0000FF") }); //************************************* //改变所有的标题元素背景色为#0000FF $("#b9").click(function(){ $(":header").css("background","#0000FF") //$("div").css("background","#0000FF") }); //************************************* //改变当前正在执行动画的所有元素的背景色为#0000FF $("#b10").click(function(){ $(":animated").css("background","#0000FF") }); </script> </body> </html>
让被隐藏的元素显示出来。
//改变含所有可见的div元素的背景元素为#0000FF $("#b1").click(function(){ $("div:visible").css("background","#0000FF"); });
<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type='text/javascript' src='js/jquery.js'></script> <style type="text/css"> #one{ margin:20px; } #two{ } #three{ width:300px; } </style> </head> <body> <h1>XXXXX</h1> <h2>XXXXXXXXXXXXXX</h2> <h3>XXXXXXXXXXXXXXXXXXXXXXXXX</h3> <input type="button" value="含有属性title的div元素" id="b1"/> <input type="button" value="属性title值等于'test'的div元素" id="b2"/> <input type="button" value="属性title值不等于'test'的div元素（没有属性title的也将被选中）" id="b3"/> <input type="button" value="属性title值 以'te'开始 的div元素" id="b4"/> <input type="button" value="屬性title值 以'est'结束 的div元素" id="b5"/> <input type="button" value="屬性title值 以'est'结束 的div元素" id="b6"/> <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有'es'的 div元素" id="b7"/> <input type="button" value="屬性title值 以'est'结束 的div元素" id="b8"/> <div style="display:none"> <input type="button" value="hidden1"/> <input type="button" value="hidden2"/> <input type="button" value="hidden3"/> <input type="button" value="hidden4"/> </div> <div id="one" title="te"> div id为one test </div> <div id="two" title="test"> aaaaaaaaaaaaaaaaaaaaaaaaaa </div> <div id="three" class="one"> XXXXXXXXXXXXXXXXXX </div> <script type="text/javascript"> //含有属性title的div元素 $("#b1").click(function(){ $("div[title]").css("background","#0000FF"); }); //属性title值等于"test"的div元素 $("#b2").click(function(){ $("div[title='test']").css("background","#0000FF"); }); //属性title值不等于"test"的div元素（没有属性title的也将被选中） $("#b3").click(function(){ $("div[title!='test']").css("background","#0000FF"); }); //属性title值 以"te"开始 的div元素。 $("#b4").click(function(){ $("div[title^='te']").css("background","#0000FF"); }); //屬性title值 以"est"结束 的div元素。 $("#b5").click(function(){ $("div[title$='est']").css("background","#0000FF"); }); //屬性title值 以"est"结束 的div元素。 $("#b6").click(function(){ $("div[title$='est']").css("background","#0000FF"); }); //选取有属性id的div元素，然后在结果中选取属性title值含有"es"的 div元素 $("#b7").click(function(){ $("div[id][title*='est']").css("background","#0000FF"); });// 表示有id属性并且有title属性 </script> </body> </html>
子元素过滤选择器
1.:nth-child(index)
2、:first-child
用法：$("url:first-child") 返回值 集合元素
说明：匹配第一个子元素：
3、:last-child
用法：$("ul li:last-child") 返回值 集合元素
发现过一个错误，如果直接在下面代码中写jquery，则无法运行。
<script type="text/javascript" src="js/jquery.js"> //****************** </script>
<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type='text/javascript' src='js/jquery.js'></script> <style type="text/css"> #one{ width:45px; background:#D876F4; margin:20px; } #two,#three,#mover{ background:#9C9AC9; width:150px; margin-top:-85px; position:absolute; float:left; } #two{ margin-left:100px; } #two1,#two2,#three01{ width:100px; height:100px; margin:10px; } #two,#two1,#two2,#three,#three01,#mover{ border:1px solid black; } #three{ margin-left:275px; } #mover{ margin-left:450px; } </style> </head> <body> <h1>XXXXX</h1> <h2>XXXXXXXXXXXXXX</h2> <h3>XXXXXXXXXXXXXXXXXXXXXXXXX</h3> <input type="button" value="改变含有文本'i'的div元素的背景元素" id="b1"/> <input type="button" value="改变不包含子元素的div背景色为#0000FF" id="b2"/> <input type="button" value="改变含有class为mini元素的div元素的背景色为#OOOOFF" id="b3"/> <input type="button" value="改变含有子元素（或者文本元素）的div元素的背景色为#0000FF" id="b4"/> <div id="one" class="mini"> div id为one </div> <div id="two"> div id为two <div id="two1"> id twoo1 </div> <div id="two2"> id twoo2 </div> </div> <div id="three" class="one"> div id为three class one <div id="three01"> id three01 </div> </div> <div class="one"> d </div> <div id="mover"> 执行动画 </div> <span id="s_one" class="mini"> span one </span> <script type="text/javascript"> //******************** //改变含有文本"id"的div元素的背景元素为#0000FF $("#b1").click(function(){ $("div:contains('two')").css("background","#0000FF"); }); //******************** //改变不包含子元素（或文本元素）的div背景色为#0000FF $("#b2").click(function(){ $("div:not(:contains('di'))").css("background","#0000FF"); }); //改变含有class为mini元素的div元素的背景色为#OOOOFF $("#b3").click(function(){ $("div:has(.mini)").css("background","#0000FF"); }); //改变含有子元素（或者文本元素）的div元素的背景色为#0000FF $("#b4").click(function(){ $("div:parent").css("background","#0000FF"); }); </script> </body> </html>
练习题：
<!DOCTYPE html> <html> <head> <title>pratice.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.js"> </script> </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <input type="button" value="给网页中所有的<p>元素添加onclick事件" id="b1"/> <table style="border:1px solid black"> <tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr> <tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr> <tr><td>第三行第一列</td><td>第三行第二列</td><td>第三行第三列</td></tr> <tr><td>第四行第一列</td><td>第四行第二列</td><td>第四行第三列</td></tr> <tr><td>第五行第一列</td><td>第五行第二列</td><td>第五行第三列</td></tr> </table> </body> <script type="text/javascript"> //给网页中所有的<p>元素添加onclick事件 $("p").click(function(){ alert($(this).text()); }); //使一个特定的表格隔行变色 $("table:eq(0) tr:even").css("background","red"); </script> </html>
