1.选择器
<!DOCTYPE> <html> <head> <title>基本选择器练习</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> body{ font-family: "微软雅黑" } div,span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { width: 40px; height: 43px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } input{ margin: 5px 5px; } </style> <!--引入jquery的js库--> <script src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function(){ //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" /> $("#b1").click(function (){ //click()为单击事件，在页面执行到此句时为所选元素绑定单击事件 $("div").css("background-color","#FF69B4") //jquery对象.css是修改样式 }); //<input type="button" value=" 改变 id 为 one 的元素的背景色为 #9ACD32" id="b2" /> $("#b2").click(function(){ $("#one").css("background-color","#9ACD32") }) //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3" /> $("#b3").click(function(){ $(".mini").css("background-color","#FF0033") //类选择器 }) //<input type="button" value=" 改变所有元素的背景色为 #FDF5E6" id="b4" /> $("#b4").click(function(){ $("*").css("background-color","#FDF5E6") }) //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493" id="b5" /> $("#b5").click(function(){ $("span,#two").css("background-color","#FF1493") }) //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400" id="b6" /> $("#b6").click(function(){ $("span,#two,#one,.mini").css("background-color","#006400") }) }) </script> </head> <body> <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" /> <input type="button" value=" 改变 id 为 one 的元素的背景色为 #9ACD32" id="b2" /> <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3" /> <input type="button" value=" 改变所有元素的背景色为 #FDF5E6" id="b4" /> <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493" id="b5" /> <input type="button" value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400" id="b6" /> <h1>天气冷了</h1> <h2>天气又冷了</h2> <div id="one">id为one</div> <div id="two" class="mini"> id为two class是 mini <div class="mini"> class是 mini</div> </div> <div class="one"> class是 one <div class="mini"> class是 mini</div> <div class="mini"> class是 mini</div> </div> <div class="one"> class是 one <div class="mini01"> class是 mini01</div> <div class="mini"> class是 mini</div> </div> <br> <div id="mover">动画</div> <br> <span class="spanone"> span </span> <span class="mini"> span class是mini </span> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>层级选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> div,span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { font-size: 14px; height: 53px; width: 47px; background: #CC66FF; border: #000 1px solid; font-family: Roman; } input{ margin: 5px 5px; } </style> <!--引入jquery的js库--> <script src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function(){ //<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" onclick="fn()"/> $("#b1").click(function(){ $("body div").css("background-color","#F08080") }) //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" /> $("#b2").click(function(){ $("body > div").css("background-color","#FF0033") }); //<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/> $("#b3").click(function(){ $("#one + div").css("background-color","#0000FF") }) //<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" /> $("#b4").click(function(){ $("#two ~ div").css("background-color","#9ACD32") }) //<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347"id="b5" /> $("#b5").click(function(){ $("#two").siblings("div").css("background-color","#FF6347") //siblings是选择兄弟元素是无差别选择 //里面加上div则会选取的是 div元素的兄弟 }) }) </script> </head> <body> <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" onclick="fn()"/> <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" /> <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3" /> <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" /> <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347" id="b5" /> <h1>天气冷了</h1> <div id="one">id为one</div> <div id="two"> id为two <div class="mini"> class是 mini</div> </div> <div class="one"> class是 one <div class="mini"> class是 mini</div> <div class="mini"> class是 mini</div> </div> <div class="one"> class是 one <div class="mini01"> class是 mini01</div> <div class="mini"> class是 mini</div> </div> <br> <div id="mover">动画</div> <br> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>基本过滤选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> div,span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { font-size: 14px; height: 53px; width: 47px; background: #CC66FF; border: #000 1px solid; font-family: Roman; } input{ margin: 5px 5px; } </style> <!--引入jquery的js库--> <script src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function(){ //<input type="button" value=" 改变第一个 div 元素的背景色为 #FF6347" id="b1" /> $("#b1").click(function(){ $("div:first").css("background-color","#FF6347"); }); //<input type="button" value=" 改变最后一个 div 元素的背景色为 #9ACD32" id="b2" /> $("#b2").click(function(){ $("div:last").css("background-color","#9ACD32"); }); //<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" /> $("#b3").click(function(){ $("div:not(.one)").css("background-color","#FF0033") }) //<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #006400" id="b4" /> $("#b4").click(function(){ $("div:eq(3)").css("background-color","#006400"); }); //<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #FF69B4" id="b5" /> $("#b5").click(function(){ $("div:lt(3)").css("background-color","#FF69B4") }) //<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #F08080" id="b6" /> $("#b6").click(function(){ $("div:gt(3)").css("background-color","#F08080") }) //<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7" /> $("#b7").click(function(){ $("div:even").css("background-color","#FF6347") }) //<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8" /> $("#b8").click(function(){ $("div:odd").css("background-color","#FF1493") }) }) </script> </head> <body> <input type="button" value=" 改变第一个 div 元素的背景色为 #FF6347" id="b1" /> <input type="button" value=" 改变最后一个 div 元素的背景色为 #9ACD32" id="b2" /> <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" /> <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #006400" id="b4" /> <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #FF69B4" id="b5" /> <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #F08080" id="b6" /> <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7" /> <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8" /> <h1>天气冷了</h1> <div id="one">id为one</div> <div id="two"> id为two <div class="mini"> class是 mini</div> </div> <div class="one" title="aa"> class是 one <div class="mini"> class是 mini</div> <div class="mini"> class是 mini</div> </div> <div class="one"> class是 one <div class="mini01"> class是 mini01</div> <div class="mini"> class是 mini</div> </div> <br> <div id="mover">动画</div> <br> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>内容选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> div,span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { font-size: 14px; height: 53px; width: 47px; background: #CC66FF; border: #000 1px solid; font-family: Roman; } input{ margin: 5px 5px; } </style> <!--引入jquery的js库--> <script src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function(){ //<input type="button" value=" 改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" /> $("#b1").click(function(){ $("div:contains(id)").css("background-color","#FF6347") }) //<input type="button" value=" 改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2" /> $("#b2").click(function(){ $("div:empty").css("background-color","#9ACD32"); }) //<input type="button" value=" 改变包含div子元素的div元素的背景色为 #FF0033" id="b3" /> $("#b3").click(function(){ $("div:has(div)").css("background-color","#FF0033") }) //<input type="button" value=" 改变非空div元素的背景色为 #006400" id="b4" /> $("#b4").click(function(){ $("div:parent").css("background-color","#006400") }) //<input type="button" value=" 改变所有可见 div 元素背景色为 #F08080" id="b5" /> $("#b5").click(function(){ $("div:visible").css("background-color","#F08080") }) //<input type="button" value=" 让所有隐藏元素显示, 并改变背景色为 #FF69B4" id="b6" /> $("#b6").click(function(){ //$("div:hidden").css("display","block").css("background-color","#FF69B4") $("div:hidden").css({"display":"block","background-color":"#FF69B4"}) }) }) </script> </head> <body> <input type="button" value=" 改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" /> <input type="button" value=" 改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2" /> <input type="button" value=" 改变包含div子元素的div元素的背景色为 #FF0033" id="b3" /> <input type="button" value=" 改变非空div元素的背景色为 #006400" id="b4" /> <hr/> <hr/> <input type="button" value=" 改变所有可见 div 元素背景色为 #F08080" id="b5" /> <input type="button" value=" 让所有隐藏元素显示, 并改变背景色为 #FF69B4" id="b6" /> <h1>天气冷了</h1> <div id="one">id为one</div> <div id="two"> id为two <div class="mini"> class是 mini</div> </div> <div class="one" title="aa"> class是 one <div class="mini"></div> <div class="mini"> class是 mini</div> </div> <br> <div id="mover"></div> <br> <div style="display:none">看不见我...,看不见我....</div> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>基本过滤选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> div,span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { font-size: 14px; height: 53px; width: 47px; background: #CC66FF; border: #000 1px solid; font-family: Roman; } input{ margin: 5px 5px; } </style> <!--引入jquery的js库--> <script src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function() { /* ---------属性选择器练习--------- */ //改变包含id属性的 div 元素的背景色为 #FF6347" id="b1" $("#b1").click(function(){ $("div[id]").css("background-color", "#FF6347"); }); //改变包含属性title='aa' 的div 元素的背景色为 #9ACD32" id="b2" $("#b2").click(function(){ $("div[title='aa']").css("background-color", "#9ACD32"); }); //改变type属性不等于button的input 元素的背景色为 #FF0033" id="b3" $("#b3").click(function(){ $("input[type!='button']").css("background-color", "#9ACD32"); }); //================================================= /* ---------子元素选择器练习--------- */ //改变div 第二个子元素的背景色为 #006400" id="b4" $("#b4").click(function() { $("div:nth-child(2)").css("background-color", "#006400"); }) //改变div 第一个子元素的背景色为 #FF69B4" id="b5" $("#b5").click(function() { //$("div:nth-child(1)").css("background-color", "#FF69B4"); $("div:first-child").css("background-color", "#FF69B4"); //$("div:last-child").css("background-color", "#FF69B4"); }) }) </script> </head> <body> <input type="button" value=" 改变包含id属性的 div 元素的背景色为 #FF6347" id="b1" /> <input type="button" value=" 改变包含属性title='aa' 的div 元素的背景色为 #9ACD32" id="b2" /> <input type="button" value=" 改变type属性不等于button的input 元素的背景色为 #FF0033" id="b3" /> <hr/> <hr/> <input type="button" value=" 改变div 第二个子元素的背景色为 #006400" id="b4" /> <input type="button" value=" 改变div 第一个子元素的背景色为 #FF69B4" id="b5" /> <h1>天气冷了</h1> <div id="one">id为one</div> <div id="two"> id为two <div class="mini"> class是 mini</div> </div> <div class="one" title="aa"> class是 one title为aa <div class="mini"> class是 mini</div> <div class="mini"> class是 mini</div> </div> <div class="one" title="bb"> class是 one title为bb <div class="mini01"> class是 mini01</div> <div class="mini"> class是 mini</div> </div> <br> <div id="mover">id为mover 动画</div> <br> <input type="submit"/> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>表单选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> div,span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { font-size: 14px; height: 53px; width: 47px; background: #CC66FF; border: #000 1px solid; font-family: Roman; } input{ margin: 5px 5px; } </style> <!--引入jquery的js库--> <script src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function() { /* ---------表单选择器练习--------- */ //改变所有:input 元素的背景色为 #F08080" id="b1" $("#b1").click(function() { $(":input").css("background-color", "#F08080"); alert($(":input").length); }); //改变:password 元素的背景色为 #9ACD32" id="b2" $("#b2").click(function() { $(":password").css("background-color", "#9ACD32"); }); //弹出 :radio 元素的个数" id="b3" $("#b3").click(function() { //alert($(":radio").length); //也可以用size() alert($("：radio").size()); }); //弹出所有 :checked 元素的value值" id="b4" /*$("#b4").click(function(){ $(":checked").each(function(){ alert($(this).val()) //this是js对象要转成jquery对象 }) })*/ $("#b4").click(function(){ $(":checked").each(function(){ alert($(this).val()) }) }) //弹出所有 :selected 元素的value值" id="b5" $("#b5").click(function() { $(":selected").each(function(){ alert($(this).val()); }); }); }) </script> </head> <body> <input type="button" value=" 改变所有input 元素的背景色为 #F08080" id="b1" /> <input type="button" value=" 改变:password 元素的背景色为 #9ACD32" id="b2" /> <input type="button" value=" 打印 :radio 元素的个数" id="b3" /> <input type="button" value=" 打印所有 :checked 元素的value值" id="b4" /> <input type="button" value=" 打印所有 :selected 元素的value值" id="b5" /> <h1>天气冷了</h1> 用户名：<input type="text" disabled="disabled" name="username" value="被禁用了"/> 密码：<input type="password" name="password" value="123"/> 性别：<input type="radio" name="gender" value="man"/> 男 <input type="radio" name="gender" value="woman" checked="checked" />女 <br> <br> 爱好： <input type="checkbox" name="like" value="lanqiu" checked="checked" /> 篮球 <input type="checkbox" name="like" value="taiqiu"/> 台球 <input type="checkbox" name="like" value="zuqiu"/> 足球 出生地： <select name="city"> <option value="beijing">北京</option> <option value="shanghai" selected="selected">上海</option> <option value="guangzhou">广州</option> </select> 简介： <textarea name="discription" rows="2" cols="10">请求输入个人描述...</textarea> </body> </html>