jQuery学习总结【第一篇】： jQuery基础

jQuery简介

　jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。dom也很有用，对于了解jQuery有很大帮助。

选择器和筛选
属性
css
文档处理
事件
扩展
ajax

更多见：http://www.php100.com/manual/jquery/

jQuery实例

加载框

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none !important;
        }
        .shade{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            /*background-color: black;*/
            /*opacity: 0.6;*/
            background-color: rgba(0,0,0,.6);
            z-index: 1000;
        }
        .modal{
            height: 200px;
            width: 400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 1001;
        }
    </style>
</head>
<body>
    <div style="height: 2000px; background-color: #DDDDDD;">
        <input type="button" value="点我" onclick="ShowModal();"/>
    </div>
    <div id="shade" class="shade hide"></div>
    <div id="modal" class="modal hide">
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>
    <script>
        function ShowModal() {
            var t1 = document.getElementById("shade");
            var t2 = document.getElementById("modal");
            t1.classList.remove("hide");
            t2.classList.remove("hide");
        }
        function HideModal() {
            var t1 = document.getElementById("shade");
            var t2 = document.getElementById("modal");
            t1.classList.add("hide");
            t2.classList.add("hide");
        }
    </script>
</body>
</html>

案例