Jquery总结
2013-09-24 10:22
183 查看
1．Jquery之Hello World
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript"> //完整的写法 $(document).ready(function () { alert("加载完毕"); }); //等价于简写的方法： $(function () { alert("第二次加载完毕"); }); $(function () { alert("Hello World.") }); $(function () { $("#btn").click(function () { alert($("#txt").val()); }); $("div").click(function () { $(this).hide("3000"); }); }); </script> </head> <body> <input type="text" id="txt" /> <input type="button" id="btn" value="Click Me" /> <div> <p> Knowledge Once a wise man was crossing a certain mighty river. He wished to amuse himself and began to talk to the boatman. " Do you know mathmatics? " he asked. " No, Sir, " replied the boatman. " Then you have lose one quarter of your life, " said the wise man. " Do you know history? " " No, Sir, " answered the boat man. " Then you have lost half of your life, " said the wise man. " Do you know philosophy? " " I don't know that either, " asid the boatman. " Then you have lost three quarter of your life. " Just then a sudden gust of wind overturned the boat. " Do you know how to swim? " asked the boatman. " No. " replied the wise man. " Well then, " replied the boatman, " you have lost your whole life. " </p> </div> </body> </html> |
2．Jquery对象
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function () { alert($("#div1").html()); $("#div1").css("background", "Yellow");//有参数就是设值 }); $(function () { alert($("#div1").css("border-width")); //无参数就是取值 }); $(function () { $("#txt").val(new Date().toLocaleString()) }); $(function () { alert($("#txt").val()); }); //同理，html和text也一样 </script> </head> <body> <div id="div1" style="border-width:1px; border-style:solid;"> Hello,<font color="red" size="18">My Dear Friends!</font> </div> <input type="text" id="txt" /> </body> </html> |
3．Jquery之each(callback)
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("input[name=names]").click(function () { var arr = new Array(); $("input[name=names]:checked").each(function (key, value) { arr[key] = $(value).val(); // $("#msgNames").text("共选中" + arr.length + "项:" + arr.join(",")); }); }); }); </script> </head> <body> <input type="checkbox" name="names" value="Tom" />Tom <input type="checkbox" name="names" value="Jim" />Jim <input type="checkbox" name="names" value="Frankie" />Frankie <p id="msgNames"></p> </body> </html> |
4．Jquery之array和dictionary
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> /* var arr = [3, 5, 8]; var arr2 = $.map(arr, function (item) { return item * 2 });//map返回值是一个数组 alert(arr2); var dict = { "Frank": 20, "Lily": 30, "Tom": 40 }; $.each(dict, function (key, value) { alert(key + "的年龄是：" + value) }); //用for循-环写麻烦会很多 */ var arr = [2, 3, 4]; $.each(arr, function (key, value) { alert(key + "=" + value) }); //key是序号，value是值:0=2; 1=3; 2=4 $.each(arr, function (item) { alert(item) }); //一个参数返回的是key:0 1 2 $.each(arr, function () { alert(this) }); //0个参数返回的是value:2 3 4 var dict = { "Frankie": 20, "Lily": 30, "Tom": 40 }; $.each(dict, function () { alert(this) }); //0个参数的dict返回的也是value //对于普通数组推荐使用无参的方式，直接返回value //对于dict风格的，推荐使用key，value对，使用哪个参数用哪个，方便忆。 </script> </head> <body> </body> </html> |
5．Jquery之选择器
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> //1 ID选择器$("#div1")→getElementById() $(function () { $("#btn").dblclick(function () { alert("你双击我了！") }); }); //2 Tag选择器 $("input")→getElementsByTagName() $(function () { $("p").click(function () { alert("我是P，我快乐！"); }); }); //3 CSS选择器 $(".error") $(function () { $(".warning").click(function () { alert("这是警告信息！"); }); }); //4 多条件选择器 $("div,p,span.menuitem")→同时选择div标签，p标签和同时拥有menuitem样式的span标签 //5 JQuery隐式迭代 $(function () { var elements = $("#btn"); if (elements.length <= 0) { alert("未找到指定元素"); return; } elements.mouseover(function () { alert("鼠标移上来了。"); }); }); </script> <style type="text/css"> .warning { color:Red; background-color:Yellow; } </style> </head> <body> <input type="button" id="btn" value="双击我给你好看" /> <p>Welcome</p> <p class="warning">请出示有效证件！</p> <p class="warning">请勿触碰?！</p> <input type="button" value="点我呀" class="warning" /> </body> </html> |
6．Jquery之相对选择器
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#div1").click(function () { //$("#div1 ul") $("ul", $(this)).css("background", "Red"); //第二个参数传递一个JQuery对象，则相对于这个对象为基准，进行相对的选择 }); }); $(function () { $("#t1 tr").mousemove(function () { $("td", $(this)).css("background","Yellow"); }); }); </script> </head> <body> <div> <div id="div1"> <ul> <li>aaaaaaaaaaa</li> <li>bbbbbbbbbbb</li> <li>ccccccccccc</li> </ul> </div> <div id="div2"> <ul> <li>aaaaaaaaaaa</li> <li>bbbbbbbbbbb</li> <li>ccccccccccc</li> </ul> </div> <table id="t1"> <tr><td>tt</td><td>tt</td></tr> <tr><td>aa</td><td>bb</td></tr> <tr><td>aa</td><td>bb</td></tr> </table> </div> </body> </html> |
7．Jquery节点操作
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#replace").click(function () { $("br").replaceWith("<hr />"); }); }); $(function () { $("#wrap").click(function () { $("p").wrap("<font color='red' size='22'></font>"); }); }); </script> </head> <body> 111111111111111111<br /> 222222222222222222<br /> 333333333333333333<br /> <p>aaaaaaaaaaaaaaaaaa</p> <p>bbbbbbbbbbbbbbbbbb</p> <p>cccccccccccccccccc</p> <input type="button" value="ReplaceWith" id="replace" /> <input type="button" value="Wrap" id="wrap" /> </body> </html> |
8．Jquery节点遍历
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("div").mouseover(function () { //alert($(this).next().text()); // $.each($(this).nextAll("div"), function () { // $(this).css("background","Yellow"); //}); //一个更加简单的方法,自动进行隐式迭代每个元素 //$(this).nextAll("div").css("background", "Yellow"); //点击行高亮显示效果 //$("div").mouseover(function () { //$(this).css("background", "Yellow"); //$(this).siblings().css("background", "White"); //以上两句还可以简写为：链式编程 //}); $(this).css("background", "Yellow").siblings().css("background", "White"); }); }); </script> </head> <body> <div>aaa</div> <div>bbb</div> <div>ccc</div> <div>ddd</div> <div>eee</div> <div>aaa</div> <div>bbb</div> <div>ccc</div> <div>ddd</div> <div>eee</div> <div>aaa</div> <div>bbb</div> <div>ccc</div> <div>ddd</div> <div>eee</div> <div>aaa</div> <div>bbb</div> <div>ccc</div> <div>ddd</div> <div>eee</div> </body> </html> |
9．Jquery动态创建和删除节点
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var link = $("<a href='#'>Baidu</a>"); $("div:first").append(link); }); $(function () { var data = { "Baidu": "http://www.baidu.com", "Sina": "http://www.sina.com", "QQ": "http://www.qq.com" }; $.each(data, function (key, value) { var tr = $("<tr><td>" + key + "</td><td><a href=" + value + ">" + key + "</a></td></tr>"); $("#tableSites").append(tr); }); }); $(function () { $("#removeUL").click(function () { $("ul li.testitem").remove(); }); }); </script> <style type="text/css"> .testitem { background-color:Yellow; border-style:solid; border-width:1px; } </style> </head> <body> <div> </div> <table id="tableSites"></table> <ul> <li>aaaaaaaaa</li> <li class="testitem">bbbbbbbbb</li> <li>ccccccccc</li> <li class="testitem">ddddddddd</li> <li>eeeeeeeee</li> </ul> <input type="button" value="删除ul中的一部分" id="removeUL" /> </body> </html> |
10．Jquery最基本的动画效果toggle()
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { $("#div1").toggle(1000); //还可以设置参数slow.normal.fast }); }); //动态创建元素注意！ $(function () { var link = $("<a href='http://www.baidu.com' id='link1'>百度</a>"); //$("#link1").text("度娘"); //这样不管用，必须把动态创建的元素添加到界面上以后，才能通过选择器取得他，操作他。 $("body").append(link); $("#link1").text("度娘"); }); </script> </head> <body> <div id="div1" style="border:5px dashed Red;"> 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好 </div> <input type="button" value="Click" id="btn" /> </body> </html> |
11．Jquery模拟QQTab效果
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#qq li:odd").addClass("body"); $("#qq li:even").addClass("header").click(function () { $(this).next("li.body").toggle("fast").siblings("li.body").hide("fast"); }); //一进入页面模拟点击 $("#qq li:first").click(); }); $(function () { //一进入页面模拟点击 $("#qq li:first").click(); }); </script> <style type="text/css"> ul{list-style-type:none;} .header{background-color:#F5E078; cursor:pointer;} .body{border:2px solid Blue;} </style> </head> <body> <ul id="qq"> <li>我的好友</li> <li>张三<br />李四<br />王麻子<br /></li> <li>我的同学</li> <li>拉登<br />奥巴马<br />令狐冲<br /></li> <li>陌生人</li> <li>罗玉凤<br />陈冠希<br />刘翔<br /></li> </ul> </body> </html> |
12．Jquery之图片跟着鼠标飞
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(document).mousemove(function (e) { $("#fly").css("left",e.pageX).css("top",e.pageY); }); }); </script> </head> <body> <div id="div1"> <img id="fly" style="position:absolute;" src="http://www.baidu.com/img/baidu_sylogo1.gif" width="300px" height="200px" alt="图片跟着鼠标飞" /> </div> </body> </html> |
13．Jquery点击小图显示详细
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> //模拟Ajax传递过来的数据 var data = { "http://t1.qpic.cn/mblogpic/1ff7210271faea4a2f54/160": ["http://t1.qpic.cn/mblogpic/1ff7210271faea4a2f54/460", "Win7 Tips", "test"], "http://t1.qpic.cn/mblogpic/6fe08dccb883505f6066/160": ["http://t1.qpic.cn/mblogpic/6fe08dccb883505f6066/460", "Andy", "lau"], "http://t1.qpic.cn/mblogpic/b7d77e290ae69d24f398/160": ["http://t1.qpic.cn/mblogpic/b7d77e290ae69d24f398/460", "CSS", "CSSSprites"] }; //界面加载时创建所有的图片 $(function () { $.each(data, function (key, value) { var smllImg = $("<img src='" + key + "'/>"); //创建小图 smllImg.attr("bigmappath", value[0]); smllImg.attr("name", value[1]); smllImg.attr("prop", value[2]); //添加事件 smllImg.mousemove(function (e) { $("#detailsImg").attr("src", $(this).attr("bigmappath")); $("#detailsName").text("Name：êo" + $(this).attr("name")); $("#detailsHeight").text("Prop：êo" + $(this).attr("prop")); //修改位置 $("#details").css("left", e.pageX).css("top", e.pageY).css("display", ""); }); $("body").append(smllImg); }); //关闭按钮 $("#close").click(function () { $("#details").css("display", "none"); }); }); </script> </head> <body> <div id="details" style="position:absolute; display:none; border-bottom:1px dashed Blue;"> <img alt="" src="" id="detailsImg" /> <p id="detailsName"></p> <p id="detailsHeight"></p> <p><input type="button" value="关闭" id="close" /></p> </div> </body> </html> |
14．Jquery事件冒泡
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#p1").click(function () { alert("p1被电了！"); }); $("#td1").click(function () { alert("td1被电了！"); }); $("#tr1").click(function () { alert("tr1被电了！"); }); $("#tb1").click(function () { alert("tb1被电了！"); }); }); </script> </head> <body> <table onclick="alert('Click Table')"> <tr onclick="alert('Click TR')"> <td onclick="alert('Click TD')"> <p onclick="alert('Click P')">I am a P,Click me</p> </td> </tr> </table> <table id="t1"> <tr id="tr1"> <td id="td1"> <p id="p1">Click Me.</p> </td> </tr> </table> </body> </html> |
15．Jquery一次性事件
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#bind").bind("click", function () { alert("请猛击); }); //一次性事件,发生一次即移除该事件 $("#one").one("click", function () { alert("你只能点我一次！"); }); }); </script> </head> <body> <input type="button" id="bind" value="Bind" /> <input type="button" id="one" value="One" /> </body> </html> |
16．Jquery之Hover()函数
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { /* $("p").mouseenter(function () { $(this).text("客官来了?"); }).mouseleave(function () { $(this).text("大爷慢走！"); }); */ //合成函数，相当于把两个匿名函数传进来就行了。 $("p").hover(function () { $(this).text("客官来了？"); }, function () { $(this).text("大爷慢走！"); }); }); </script> </head> <body> <h1><p>你好。</p></h1> </body> </html> |
17．Jquery另类选择器
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#getValue").click(function () { alert($(":radio[name=gender]:checked").val()); }); }); $(function () { $("#setValue").click(function () { $(":radio[name=gender]").val(["保密"]); $(":checkbox").val(["篮球", "桌球"]); $(":checkbox[value=羽毛球]").attr("checked", true); }); }); </script> </head> <body> <input type="radio" value="男" name="gender" />男<br /> <input type="radio" value="女" name="gender" />女<br /> <input type="radio" value="保密" name="gender" />保密<br /> <input type="checkbox" value="篮球¨°" />篮球<br /> <input type="checkbox" value="足球¨°" />足球<br /> <input type="checkbox" value="排球¨°" />排球<br /> <input type="checkbox" value="桌球" />桌球<br /> <input type="checkbox" value="羽毛球" />羽毛球<br /> <input type="button" value="设值" id="setValue" /> <input type="button" value="取值" id="getValue" /> </body> </html> |
18．Jquery行高亮显示
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("table tr").mouseenter(function () { $(this).addClass("highlight").siblings().removeClass("highlight") ; }); }); </script> <style type="text/css"> .highlight{ background-color:Yellow;} </style> </head> <body> <table> <tr><td>aaaaaaaaaaaaaaaaaaaaaaaaa</td><td>bbbbbbbbbbbbbbbbbbbbbbbbb</td></tr> <tr><td>ccccccccccccccccccccccccc</td><td>ddddddddddddddddddddddddd</td></tr> <tr><td>eeeeeeeeeeeeeeeeeeeeeeeee</td><td>fffffffffffffffffffffffff</td></tr> <tr><td>ggggggggggggggggggggggggg</td><td>hhhhhhhhhhhhhhhhhhhhhhhhh</td></tr> <tr><td>iiiiiiiiiiiiiiiiiiiiiiiii</td><td>jjjjjjjjjjjjjjjjjjjjjjjjj</td></tr> <tr><td>kkkkkkkkkkkkkkkkkkkkkkkkk</td><td>lllllllllllllllllllllllll</td></tr> </table> </body> </html> |
19．Jquery之歌曲选择
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#selectAll").click(function () { $("#playlist :checkbox").attr("checked", true); }); $("#selectNone").click(function () { $("#playlist :checkbox").attr("checked", false); }); $("#reverse").click(function () { $("#playlist :checkbox").each(function () { //设置成与它相反的值 $(this).attr("checked", !$(this).attr("checked")); }); }); }); </script> </head> <body> <div id="playlist"> <input type="checkbox" />女人如花-周华健<br /> <input type="checkbox" />再见-张震岳<br /> <input type="checkbox" />菊花台-周杰伦<br /> <input type="checkbox" />爱情三十六计-蔡依林<br /> <input type="checkbox" />笔记-周笔畅<br /> </div> <input type="button" id="selectAll" value="全选" /> <input type="button" id="selectNone" value="全不选" /> <input type="button" id="reverse" value="反选" /> </body> </html> |
20．Jquery 滤镜切换（仅适用IE）
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { $(document.body).toggleClass("blackwhite"); }); }); </script> <style type="text/css"> .blackwhite{ filter:Gray;} </style> </head> <body> <img alt="" src="http://t1.qpic.cn/mblogpic/6fe08dccb883505f6066/460" /> <br /> <input type="button" id="btn" value="滤镜切换" /> </body> </html> |
21．Jquery之 body中元素高亮显示
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("body *").click(function () { $(this).addClass("highlight").siblings().removeClass("highlight"); }); }); </script> <style type="text/css"> .highlight{ background-color:Yellow;} </style> </head> <body> <input type="text" /> <p>pppppppppppppppppppp</p> <div>dfdfdfdfddddddddddfdfd</div> <div>77777777777777777777777</div> <span>sssf000000000000000000000000</span> <span>tttttttttttttttttttttttttttt</span> </body> </html> |
22．Jquery 微软风格搜索框
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#kw").val("请输入密码").addClass("waiting").blur(function () { if ($(this).val() == "") { $("#kw").val("请输入密码").addClass("waiting"); } }).focus(function () { if ($(this).val() == "请输入密码") { $("#kw").val("").removeClass("waiting"); } }); }); </script> <style type="text/css"> .waiting{ color:Gray;} </style> </head> <body> <input type="text" id="kw" /><input type="button" value="登陆" /> </body> </html> |
23．Jquery控制样式
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btnAdd").click(function () { $("#div1").addClass("big").addClass("back"); ; }); $("#btnRemove").click(function () { $("#div1").removeClass("back"); }); $("#btnToggle").click(function () { $("#div1").toggleClass("back"); }); $("#swithch").click(function () { $(document.body).toggleClass("night"); }); $("#filter").click(function () { $(document.body).toggleClass("filter"); }); }); </script> <style type="text/css"> .filter{filter:Gray;} .big{ font-size:xx-large; color:Purple; } .back{ background-color:Red;} .night{ background-color:Black;} </style> </head> <body> <div id="div1"><h1>你好啊！</h1></div> <input type="button" id="btnAdd" value="add" /> <input type="button" id="btnRemove" value="remove" /> <input type="button" id="btnToggle" value="切换" /> <br /> <input type="button" id="swithch" value="开关灯" /> <img alt="" src="http://t1.qpic.cn/mblogpic/6fe08dccb883505f6066/460" /> <input type="button" value="灰色滤镜" id="filter" /> </body> </html> |
24．Jquery版本计算器
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#add").click(function () { var value1 = $("#txt1").val(); var value2 = $("#txt2").val(); var value3 = parseInt(value1, 10) + parseInt(value2, 10); $("#txt3").val(value3); }); }); </script> </head> <body> <input type="text" id="txt1" />+<input type="text" id="txt2" /><input type="button" id="add" value=" = " /> <input type="text" id="txt3" /> </body> </html> |
25．Jquery版评分控件
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#rating td").html("<img src='../images/starEmpty.jpg' />").mouseenter(function () { $("#rating td").html("<img src='../images/starFull.jpg' />"); $(this).nextAll().html("<img src='../images/starEmpty.jpg' />"); }); }); </script> </head> <body> <table id="rating"> <tr><td></td><td></td><td></td><td></td><td></td></tr> </table> </body> </html> |
26．Jquery版球队选择
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#ul1 li").mouseover(function () { $(this).css("cursor", "pointer").css("background", "Red"); $(this).css("cursor", "pointer").siblings().css("background", "White"); //$(this).css("background", "Red").siblings().css("background", "White"); //一句话代替上面2句，链式编程 }).click(function () { $(this).css("background","White").appendTo("#ul2"); }); }); </script> </head> <body> <ul id="ul1" style="float:left; width:30%; border:2px dashed Blue;"> <li>国足</li> <li>朝鲜</li> <li>日本</li> <li>巴西</li> <li>美国</li> </ul> <ul id="ul2" style="float:left; width:30%; border:2px dashed Blue;"></ul> </body> </html> |
27．Jquery版权限选择
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#moveToRight").click(function () { var items = $("#select1 option:selected").remove(); $("#select2").append(items); }); }); </script> </head> <body> <select id="select1" style="float:left; width:100px; height:120px;" multiple="multiple"> <option>添加</option> <option>删除</option> <option>修改</option> <option>查询</option> <option>打印</option> </select> <div style="float:left; width:5%;"> <input type="button" value=">" id="moveToRight" style="float:left; width:100%;" /> <input type="button" value="<" style="float:left; width:100%;" onclick="moveSelected(document.getElementById('select2'), document.getElementById('select1'))" /> <input type="button" value=">>" style="float:left; width:100%;" onclick="moveAll(document.getElementById('select1'), document.getElementById('select2'))" /> <input type="button" value="<<" style="float:left; width:100%;" onclick="moveAll(document.getElementById('select2'), document.getElementById('select1'))" /> </div> <select id="select2" style="float:left; width:120px; height:120px;" multiple="multiple"></select> </body> </html> |
28．Jquery属性过滤器
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("input[value=显示选中项]").click(function () { alert($("input:checked").val()); }); }); /* $(function () { $("#btn").click(function () { alert($("input:checked").val()); }); });*/ </script> </head> <body> <input type="checkbox" value="北京" />北京<br /> <input type="checkbox" value="南京" />南京<br /> <input type="checkbox" value="东京" />东京<br /> <input type="checkbox" value="西安" />西安<br /> <input type="checkbox" value="开封" />开封<br /> <input type="button" id="btn" value="显示选中项" /> </body> </html> |
29．Jquery版文本非空验证
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(":text").blur(function () { //当焦点离开时触发 if ($(this).val().length <= 0) { $(this).css("background", "Red"); } else { $(this).css("background", "White"); } }); }); </script> </head> <body> <input type="text" /><input type="text" /><input type="text" /><input type="text" /> <input type="text" /><input type="text" /><input type="text" /><input type="text" /> </body> </html> |
30．Jquery版无刷新评论
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btnPost").click(function () { var title = $("#title").val(); var body = $("#txtBody").val(); //var tr = $("tr><td>" + title + "</td><td>" + body + "</td></tr>"); var tr = $("<tr><td>" + title + "</td><td>" + body + "</td></tr>"); $("#tbComment").append(tr); //清空title和body中的数据 $("#title").val(""); $("#txtBody").val(""); }); }); </script> </head> <body> <p>我的第一个帖子，哈哈！</p> <table id="tbComment"> <tr><td>匿名</td><td>沙发！</td></tr> </table> <input type="text" id="title" /><br /> <textarea rows="*" cols="*" id="txtBody"></textarea><br /> <input type="button" id="btnPost" value="发表评论" /><br /> </body> </html> |
31．Jquery版选择过滤器
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#table1 tr:first").css("fontSize", "50"); //第一行 $("#table1 tr:last").css("color", "Red"); //最后一行 $("#table1 tr:gt(0):lt(3)").css("fontSize", "50"); //前三名 $("#table1 tr:gt(0):even").css("background","Yellow");//奇数行背景色，gt(0)去掉表头 }); </script> </head> <body> <table id="table1"> <tr><td>姓名</td><td>成绩</td></tr> <tr><td>Frankie</td><td>100</td></tr> <tr><td>Tom</td><td>90</td></tr> <tr><td>Lily</td><td>80</td></tr> <tr><td>Lucy</td><td>70</td></tr> <tr><td>Green</td><td>60</td></tr> <tr><td>平均分</td><td>85</td></tr> </table> </body> </html> |
32．Jquery版注册页面
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> var leftSeconds = 10; var intervalID; $(function () { $("#btnReg").attr("disabled", true); //用attr设置或者取值JQuery没有封装的属性 intervalID = setInterval("countDown()", 1000); }); function countDown() { if (leftSeconds <= 0) { $("#btnReg").val("同意"); $("#btnReg").attr("disabled", false); clearInterval(intervalID); return; } leftSeconds--; $("#btnReg").val("还剩" + leftSeconds + "秒"); } </script> </head> <body> <textarea rows="20" cols="50">111111aaaaaaaaaaavvvvvvvvvddddddddddwwwwwwwwwwwerrrrrrrreeeeeeee</textarea> <input type="button" value="注册" id="btnReg" /> </body> </html> |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 