zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    腾讯推出微信企业服务平台风铃
    WAP网页输入框的默认键盘类型控制
    asp.net+扫描仪+图片上传
    Web截屏插件
    java扫描仪上传文件
    web高拍仪图片上传
    网页中怎么实现客户端通过扫描仪把图像传到服务器上
    如何在Web页面里面使用高拍仪扫描上传图像
    B/S选择文件夹上传
    用java实现文件的断点续传并发下载
  • 原文地址:https://www.cnblogs.com/shhnwangjian/p/5646874.html
Copyright © 2011-2022 走看看