一、 评分控件
效果图:
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('td').css('cursor', 'pointer').mouseover(function () { //方法一:(思路:将自己及前面的设置为★,自己后面的设置为☆) $(this).text('★').prevAll().text('★').end().nextAll().text('☆'); //方法二:(思路:先将所有的设置为★,再将自己后面的设置为☆) // $('td').text('★'); // $(this).nextAll().text('☆'); }); }); </script> </head> <body> <table border="0" > <tr> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> </tr> </table> </body> </html>
效果图:
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#u li').mouseover(function () { $(this).css('background', 'red').siblings().css('background', 'white'); }); }); </script> </head> <body> <ul id="u"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>
效果图:
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("table tr").click(function () { //相对于选中的行,将所有的td的背景颜色设置为红色 $("td", $(this)).css("background", "red"); //直接将选中行的tr的背景色设置为红色 $(this).css("background", "red"); }); }); </script> </head> <body> <table> <tr><td>aa</td><td>aa</td><td>aa</td></tr> <tr><td>aa</td><td>aa</td><td>aa</td></tr> <tr><td>aa</td><td>aa</td><td>aa</td></tr> </table> </body> </html>
效果图:
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .dark{ background-color:Black;} </style> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#btn1').click(function () { if ($(this).val() == '关灯') { $(this).val('开灯'); $('body').addClass('dark'); } else { $(this).val('关灯'); $('body').removeClass('dark'); } }); }); </script> </head> <body> <input type="button" name="name" value="关灯" id="btn1"/> </body> </html>
效果图:
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(':checkbox').click(function () { var array = Array(); //定义数组 //这里的key是数组中序号,value是DOM对象!!! $(':checkbox:checked').each(function (key, value) { //将满足条件的checkbox的值放入数组中 array[key] = $(value).val(); }); $('#div1').text(''); $('#div1').text('您选中的项是:' + array + ' 总共选中了 ' + array.length + '项'); }); }); </script> </head> <body> <input type="checkbox" name="hobby" value="足球" />足球 <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 <input type="checkbox" name="hobby" value="乒乓球" />乒乓球 <input type="checkbox" name="hobby" value="排球" />排球<br /> <div id="div1"></div> </body> </html>
效果图:
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> var sites = { "cnbeta": "http://www.cnbeta.com", "qiushibaike": "http://www.qiushibaike.com", "cnblogs": "http://www.cnblogs.com" }; //对于json,在JQuery中就用$.each对其进行遍历 $(function () { $('#create').click(function () { $.each(sites, function (key, value) { var tr = $('<tr></tr>'); var td = $('<td></td>'); td.html('<a href=' + value + '>' + key + '</a>'); tr.append(td); td = $('<td></td>'); td.text(value); tr.append(td); $('#tab1').append(tr); }); }); }) </script> </head> <body> <table border="1" id="tab1"></table> <input type="button" id="create" value="产生" /> </body> </html>
效果图:
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#create').click(function () { var num = parseInt($('#txt1').val()); $('#div1').text(''); for (var i = 0; i < num; i++) { if (i % 3 == 0) { $('#div1').append('<br/>'); } var $txt = $('<input type="text" value="Thank You" style="text-align:center"/>'); $('#div1').append($txt); } }); }); </script> </head> <body> <input type="text" name="name" value="" id="txt1" /> <input type="button" name="name" value="产生" id="create"/> <div id="div1"></div> </body> </html>
效果图:
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#comment').click(function () { var nickName = $('#nickName').val(); var content = $('#content').val(); var tr = $('<tr></tr>'); var td1 = $('<td>' + nickName + '</td>'); var td2 = $('<td>' + content + '</td>'); tr.append(td1); tr.append(td2); $('#table1').append(tr); $('#nickName').val(''); $('#content').val(''); }); }); </script> </head> <body> <table border="1" id="table1" width="400px"></table> 昵称:<input type="text" id="nickName" value="" /><br/> 评论内容:<textarea id="content" cols="30" rows="5"></textarea> <input type="button" id="comment" value="评论" /> </body> </html>
效果图:
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Calc').click(function () { var num1 = $('#num1').val(); var num2 = $('#num2').val(); if (!isNaN(num1) && !isNaN(num2)) { $('#result').val(Number(num1) + Number(num2)); } else { alert('您输入的数字有误!'); } }); }); </script> </head> <body> <input type="text" id="num1" value="" />+ <input type="text" id="num2" value="" /> <input type="button" id="Calc" value="=" /> <input type="text" id="result" value="" /> </body> </html>
效果图:
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#allOrNone').click(function () { //点击“选择状态”,实现全选与全不选 $(':checkbox').prop('checked', $(this).prop('checked')); }); //当改变了上面选择项的选中状态后,“选择状态”的状态也跟着改变 $(':checkbox[id!=allOrNone]').click(function () { optionStateChanged(); }); //选项改变抽象的方法 function optionStateChanged() { var state = true; $(':checkbox[id!=allOrNone]').each(function () { if (!$(this).prop('checked')) { state = false; return false; //break; 不可以使用break; } }); //如果有一个没有被选中,则将“选择状态”的状态也设置为没有选中状态 $('#allOrNone').prop('checked', state); } //反选 $('#chooseReverse').click(function () { //进行选项的反选工作 $(':checkbox[id!=allOrNone]').each(function () { $(this).prop('checked', !$(this).prop('checked')); }); //单独考虑选项改变的操作 optionStateChanged(); }); }); </script> </head> <body> <input type="checkbox" value="1" />足球 <input type="checkbox" value="2" />足球 <input type="checkbox" value="3" />足球 <input type="checkbox" value="4" />足球 <input type="checkbox" value="5" />足球<br /> <input type="checkbox" name="name" value="" id="allOrNone"/>选择状态 <input type="button" name="name" value="反选" id="chooseReverse"/> </body> </html>
效果图:
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var leftTime = 9; var interval=setInterval(function () { if (leftTime > 0) { $('#btn').val('还剩' + leftTime + '秒'); leftTime--; } else { $('#btn').val('同意'); $('#btn').attr('disabled', false); clearInterval(interval); } }, 1000); }); </script> </head> <body> <input type="button" id="btn" value="还剩10秒" disabled="disabled"/> </body> </html>
效果图:
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('table,tr,td,p').click(function (e) { alert($(this).html()); e.stopPropagation(); //stopPropagation阻止了"事件冒泡",只显示Fuck,但不阻止其后面的内容的执行 alert('OK'); }); //阻止转向连接地址或者阻止表单的提交 $('a').click(function (e) { alert('禁止转向'); //return false; //阻止了地址转向,但后面的代码也执行不了了 e.preventDefault(); alert('123'); }); }); </script> </head> <body> <a href="http://www.baidu.com">百度</a> <table> <tr> <td> <p> Good </p> </td> </tr> </table> </body> </html>