界面代码 <!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> <mce:script type="text/javascript" src="jquery1.4.2.js" mce_src="jquery1.4.2.js"></mce:script> <link type="text/css" href="practice.css" mce_href="practice.css" rel="stylesheet" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <form id="form1" > <p> <table id="table1" border="4" > <tr id="tr1"> <td> text1<input id="text1" type="text" /> text2<input id="text2" type="text" /> text3 <input id="text3" type="text" /> </td> </tr> <tr id="tr2"> <td> text4<input id="text4" type="text" /> text5<input id="text5" type="text" /> text6<input id="text6" type="text" /> </td> </tr> <tr id="tr3"> <td> checkbox1<input id="checkbox1" type="checkbox" checked="checked" /> checkbox2<input id="checkbox2" type="checkbox" /> checkbox3<input id="checkbox3" type="checkbox" /> <button id="test21">21、Checkbox全选,</button> </td> </tr> <tr id="tr4"> <td> <select id="select1" > <option value="0">长沙</option> <option value="1">背景</option> <option value="2">武汉</option> </select> <button id="test19">19、获取选中下拉框的值,</button> </td> </tr> </table> </form> <input id="hidden1" type="hidden" class="on"/> <title>div部分</title> <div id="div1"> <font class="ziti" >(start div id ="div1")</font> <button id="test1">1、把table1的背景改为蓝色</button> <button id="test2">2、获取table1的的html标签</button> <button id="test3">3、获取text1的type john</button> <button id="test4">4、为table1添加样式,并添加背景色</button> <div id ="div2"> </div> <p id="p1" title="关于spring" style="width:800px"> <span id="span1" > <label id="label1">（1）Spring是什么</label> text7 <input id="text7" type="text" /> Spring是轻量级的J2EE应用程序开源框架。它由RodJohnson创建。它是为了解决企业应用开发的复杂性而创建的。 Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情。 </span> <span id="span2" <label id="label2">（2）Spring的历史</label> Spring的基础架构起源于2000年早期，它是RodJohnson在一些成功的商业项目中构建的基础设施。 <span id="span3" ></span> </span> <div id="div3">john</div> </p> </div> <button class="on" id="test5">5、查找P元素的所有子元素</button> <button id="test6" class="off">6、获取P元素中的所有SPAN</button> <button id="test7" class="off">7、查找P元素的前后父元素,</button> <button id="test8" name="aaajohn">8、查找label的下一个input,</button> <button id="test9" name="john">9、查找一个div下的子元素p,</button> <button id="test10" name="ssjohnss">10、表单同辈的 input 元素 t,</button> <button id="test11"name="john">11、获取属性Class为on的元素,</button> <button id="test12">12获取p属性class为on 和 属性class为off的元素,</button> <button id="test13">13、获取table 的第二行,</button> <button id="test14">14、获取table的偶数行、奇数行,</button> <button id="test15">15、查找所有包含 "John" 的 div 元素 ,</button> <button id="test16">16、查找所有含有子元素td 元素 ,</button> <button id="test17">17、查找name以John开头、结尾、包含、不等于、等于的元素,</button> <button id="test18">18、获取table中的第一个、最后一个tr元素,</button> <button id="test20">20、获取属性id以ips开头多选项的值,</button> <button id="test22">22、表格的隔行变色,</button> <button id="test23">23、表格鼠标移入行变色,</button> <button id="test26">26、隐藏、显示一个divt,</button> <button id="test27">27、去字符串的前后空格t,</button> <button id="test28">28、创建一个span追加到div中,</button> <div id="div5" style="background:#00FF00 " mce_style="background:#00FF00 " > " div id=div5" 原有数据 </div> <button id="test29">29、向div5内部前置,</button> <button id="test30">30、向div5内部后置,</button> <button id="test31">31、向div5外部前置,</button> <button id="test32">32、向div5外部后置,</button> <button id="test33">33、添加删除元素,</button> <button id="test34">34、给页面内所有标题加上背景色 ,</button> <button id="test35">35、包含 p 元素的 div 元素添加一个 on样式,</button> <button id="test36">36、绑定一次性事件,</button> <button id="test37">37、淡入淡出效果,</button> </body> <mce:script type="text/javascript" src="my.js" mce_src="my.js"></mce:script> </html> 脚本 // JavaScript Document $("#test1").click(function (){ $("#table1").css("background","blue") }) $("#test2").click(function (){ alert($("#table1").html()); }) $("#test3").click(function (){ alert("type :"+$("#text1").attr("type")); }) $("#test4").click(function (){ $("#table1").addClass("nowtable").css("background","#FFCC66"); }) $("#test5").click(function (){ $("#p1 *").each(function (){ alert($(this).attr("id")); }); }) $("#test6").click(function (){ $("#p1 span").each(function (){ alert($(this).attr("id")); }); }) $("#test7").click(function (){ alert("前一个 ："+$("#p1").prev().attr("id")); alert("后一个 ："+$("#p1").next().attr("id")); alert("父标签 ："+$("#p1").parent().attr("id")); }) $("#test8").click(function (){ alert("label的下一个input id ："+$("label").next("input").attr("id")); }) //9.查找一个div下的子元素p $("#test9").click(function (){ alert("label的下一个input id ："+$("div").children("p").attr("id")); }) //10.表单同辈的 input 元素 $("#test10").click(function (){ $("form").siblings("input").each(function (){ alert($(this).attr("id")); }); }) // 11.获取属性Class为on的元素 $("#test11").click(function (){ $(".on").each(function (){ alert($(this).attr("id")); }) }) // 12.获取属性Class为on和class为OFF的的元素 $("#test12").click(function (){ $(".on,.off").each(function (){ alert("id为："+$(this).attr("id") +" class属性:"+$(this).attr("class")); }) }) //13.获取table 的第二行 $("#test13").click(function (){ alert($("tr:eq(1)").attr("id")); }) //14.获取table的偶数行、奇数行 $("#test14").click(function (){ $("tr:even").each(function (){ alert($(this).attr("id")); }); $("tr:even"); }) //15.查找所有包含 "John" 的 div 元素 $("#test15").click(function(){ $("div :contains('john')").each(function (){ alert("div id:"+$(this).attr("id")+" 内容:"+$(this).html()); }) }) //16.查找所有含有子元素td 元素 $("#test16").click(function(){ $("td:parent").each(function (){ alert("子元素id:"+$(this).attr("id")+" 内容:"+$(this).html()); }) }) //17.分别查找name以John开头、结尾、包含、不等于、等于的元素 $("#test17").click(function (){ $("*[name*='john']").each(function (){ alert("包含john："+$(this).attr('name')) }) $("*[name$='john']").each(function (){ alert("john结尾："+$(this).attr('name')) }) $("*[name^='john']").each(function (){ alert("john 开始："+$(this).attr('name')) }) $("*[name!='john']").each(function (){ }) $("*[name=='john']").each(function (){ alert("==john："+$(this).attr('name')) }) }) //18.获取table的第一行和最后一行 $("#test18").click(function (){ alert($("table tr:first-child").attr("id")); }) $("#test18").click(function (){ alert($("table tr:last-child").attr("id")); }) //19.获取选中下拉框的值 $("#test19").click(function (){ alert($("#select1").val()) }) //20.获取属性id以ips开头多选项的值（以,号分割） $("#test20").click(function(){ $("input[id^='check']:checkbox").each(function (){ alert($(this).attr('checked')); }) }) //21.Checkbox全选 $("#test21").click(function(){ $("input[id^='check']:checkbox").each(function (){ $(this).attr('checked','true'); }) }) //22表格的各行变色 $("#test22").click(function (){ $("tr:even").each(function (){ $(this).css('background','FF00FF'); }) $("tr:odd").each(function (){ $(this).css('background','yellow'); }) }) //23表格鼠标移入行变色 $("tr").hover( function(){ $(this).css('background','blue'); }, function (){ $(this).css('background','white'); } ) //24表格点击行变色 $("tr").toggle( function(){ $(this).css('background','red'); }, function (){ $(this).css('background','green'); }, function (){ $(this).css('background','white'); } ) //25.拼接Form表单中所有的input数据（id=001&name=zhang&…..） //26.隐藏、显示一个div $("#test26").toggle( function (){ $("#div1").hide(); }, function (){ $("#div1").show(); } ) //27去掉字符串的前后空格 function testtrim(args){ return $.trim(args); } // 28.创建一个span追加到div中 $("#test28").click(function (){ $("#div1").append("<span id='appspan'>追加的span<span>"); // $("#appspan").css({'background-color':'red','width':'200px'}); }) //30向某个匹配的元素 前置一些内容 $("#test29").click(function (){ $("#div5").prepend("<div>内部前置 </div>"); }) $("#test30").click(function (){ $("#div5").append("<div>内部后置 </div>"); }) //向某个匹配的元素前置些内容、向某个匹配的元素后置些内容 $("#test31").click(function (){ $("#div5").before("<div>外部前置 </div>") }) $("#test32").click(function (){ $("#div5").after("<div>外部后置 </div>") }) $("#test33").click(function (){ var abc = $("#div5").add("button"); alert(abc.length); }); //34 $("#test34").click(function(){ $("title").css("background-color","blue") }) //35.给所有包含 p 元素的 div 元素添加一个 on样式 $("#test35").click(function(){ $("p").parent("div").addClass("on"); }) //36.为某元素绑定一个一次那个性事件 $("#test36").bind("click",function(){ alert("只弹出一次"); }); //37.通过不透明度的变化来实现所有匹配元素的淡入、淡出效果 $("#test37").click(function (){ $("div").fadeTo("slow", 0.25, function(){ }); })
扫一扫
1373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
