jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在兼容性方面十分优秀。
- 选择器和筛选属性
- css
- 文档处理
- 事件
- 扩展
- Ajax
更多参考http://www.php100.com/manual/jquery/
表单中全选、反选、取消 用例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="CheckAll()" value="全选" /> <input type="button" onclick="CheckReverse()" value="反选" /> <input type="button" onclick="CheckCancel()" value="取消" /> <table border="1"> <thead></thead> <tbody id="tb1"> <tr> <td><input type="checkbox" /></td> <td>11</td> </tr> <tr> <td><input type="checkbox" /></td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>33</td> </tr> </tbody> </table> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function CheckAll(){ //$('#tb1').find(':checkbox').attr('checked', 'checked'); $('#tb1').find(':checkbox').prop('checked', true); } function CheckReverse(){ // 找,如果选中,取消,未选中,选中 $('#tb1').find(':checkbox').each(function(){ // $(this) = 每一个复选框 // $(this).prop() 如果选中,true,否则false // attr 如果选中,checked,checked=checked if($(this).prop('checked')){ $(this).prop('checked', false); }else{ $(this).prop('checked', true); } }); } function CheckCancel(){ //$('#tb1').find(':checkbox').removeAttr('checked'); $('#tb1').find(':checkbox').prop('checked', false); } </script> </body> </html>
返回顶部 用例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="GoTop()" value="返回顶部" /> <div id="content" style="height: 300px; 500px; overflow: auto;"> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> <p>df</p> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function GoTop(){ $('#content').scrollTop(0); $(window).scroll(0) } </script> </body> </html>