Jquery

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;width: 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>

 

posted @ 2016-07-06 14:52  shhnwangjian  阅读(185)  评论(0)    收藏  举报