• 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; 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>
    
  • 相关阅读:
    为什么整个互联网行业都缺前端工程师?
    css3做的圆特效
    又一个前端的小渣渣诞生了
    返回顶部代码!
    网页动画的十二原则
    JQuery缓冲加载图片插件lazyload.js的使用方法
    关于写手机页面demo的准备工作
    HTML5加载动画
    HTML5加载动画
    正则表达式语法
  • 原文地址:https://www.cnblogs.com/shhnwangjian/p/5646874.html
Copyright © 2020-2023  润新知