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>

案例

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style>
        .back{
            position: fixed;
            right: 20px;
            bottom: 20px;
            color: red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body onscroll="BodyScroll();">
    <div style="height: 2000px;background-color: #DDDDDD"></div>
    <div id="back" class="back hide" onclick="BackTop();">返回顶部</div>

    <script>
        function BackTop() {
            document.body.scrollTop = 0;
        }

        function BodyScroll() {
            var s = document.body.scrollTop;
            var t = document.getElementById('back');
            if( s >=100){
                t.classList.remove('hide');
            }else{
                t.classList.add('hide')
            }
        }
    </script>

</body>
</html>

案例

多选框

效果：全选，反选及取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="CheckAll()">
    <input type="button" value="取消" onclick="CancleAll()">
    <input type="button" value="反选" onclick="ReverseAll()">

    <table border="1">
        <thead>
            <tr>
                <td>序号</td>
                <td>用户名</td>
                <td>密码</td>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" id="test1"/></td>
                <td>1</td>
                <td>11</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="test2"/></td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="test3"/></td>
                <td>3</td>
                <td>33</td>
            </tr>
        </tbody>
    </table>

    <script>
        function CheckAll() {
            var tb = document.getElementById('tb');
            var trs = tb.children;
            for(var i=0; i < trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.setAttribute('checked', 'checked');
//                ck.checked = true;
            }
        }

        function CancleAll() {
            var tb = document.getElementById('tb');
            var trs = tb.children;
            for (var i=0; i < trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.removeAttribute('checked');
//                ck.checked = false;
            }
        }
        function ReverseAll() {
            var tb = document.getElementById('tb');
            var trs = tb.children;
            for (var i=0; i < trs.length;i++) {
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                if (ck.checked) {
                    ck.checked = false;
                    ck.removeAttribute('checked');
                } else {
                    ck.checked = true;
                    ck.setAttribute('checked', 'checked');
                }
            }
        }
    </script>
</body>
</html>

案例

菜单

效果：点击对应的父菜单，显示二级子菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 600px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
    </style>

</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">菜单一</div>
            <div class="body">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>

        </div>
        <div class="item">

            <div class="title"  onclick="ShowMenu(this);">菜单二</div>
            <div class="body hide">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title"  onclick="ShowMenu(this);">菜单三</div>
            <div class="body hide">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>

        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ShowMenu(ths) {
            // console.log(ths); // Dom中的标签对象
            // $(ths)  //DOM标签对象转换为jQuery对象
            // $(ths)[0] //jQuery对象转换为DoM对象那个
            $(ths).next().removeClass('hide');
            $(ths).parent().siblings().find('.body').addClass('hide');
        }
    </script>

</body>
</html>

案例

tab

滚动菜单

登录注册验证

判断用户输入

案例1：

效果：

1）用户不输入任何内容，则提示输入内容

2）输入内容后，则不显示提示内容

3）用户输入内容后又删除信息，则再次提示输入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM+JS实现判断用户输入</title>
</head>
<body>
    <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" />
    <!-- onfocus="Focus();" 绑定事件 获取焦点执行Focus()函数 失去焦点执行Blur()函数 -->
    <input id="i2" type="text" value="请输入关键字"/>

    <script type="text/javascript">
        function Focus(){
            //console.log('Focus');
            //获取标签，清空
            var  tag = document.getElementById('i1');
            if(tag.value == "请输入关键字"){
                tag.value = "";
            }

        }
        function Blur(){
            //console.log('blur');
            //判断标签内容长度，如果为0,则将值置为"请输入关键字" trim()过滤空格
            var  tag = document.getElementById('i1');
            var val = tag.value;
            if(val.trim().length == 0){
                tag.value = "请输入关键字";
            }
        }
    </script>


</body>
</html>

案例

案例2

效果：判断用户是否输入内容，如果没有输入则提示不能为空，扩展：判断用户注册各项信息的准确性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证用户输入</title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="text" id="username"/>
        <input type="submit" value="提交" onclick="return SubmitForm();"/>
    </form>

    <script>
        function SubmitForm() {
            var user = document.getElementById('username');
            if(user.value.length>0){
                //可以提交
                return true;
            }else {
                // 不能提交
                alert("用户名输入不能为空");
                return false
            }
        }
    </script>

</body>
</html>

案例2

评论赞动态效果实现

效果：点击对应评论的赞会在该条赞附近显示+1 并显示由小变大由实体变隐藏的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态点赞</title>
    <style>
        .item{
            padding: 50px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="item">
        <a onclick="Favor(this);">赞1</a>
    </div>

    <div class="item">
        <a onclick="Favor(this);">赞2</a>
    </div>

    <div class="item">
        <a onclick="Favor(this);">赞3</a>
    </div>

    <div class="item">
        <a onclick="Favor(this);">赞4</a>
    </div>

    <script>
        function Favor(ths) {
            // ths->this->当前触发事件的标签
            var top = 49;
            var left = 71;
            var op = 2;
            var fontSize = 18;

            var tag = document.createElement("span");
            tag.innerText = "+1";
            tag.style.position = "absolute";
            tag.style.top = top + "px";
            tag.style.left = left + "px";
            tag.style.opacity = op;
            tag.style.fontSize = fontSize + "px";
            ths.parentElement.appendChild(tag);

            var interval = setInterval(function () {
                top -= 10;
                left += 10;
                fontSize +=5;
                op -= 0.1;

                tag.style.position = "absolute";
                tag.style.top = top + "px";
                tag.style.left = left + "px";
                tag.style.opacity = op;
                tag.style.fontSize = fontSize + "px";
                if(op<=0.2){
                    clearInterval(interval);
                    ths.parentElement.removeChild(tag);
                }
            },50);
        }
    </script>

</body>
</html>

案例

定时器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单次定时器</title>
</head>
<body>
    <div id = "status" style="color: red;"></div>
    <input type="submit" onclick="DeleteStatus();" value="删除"/>
    <script>
        function DeleteStatus() {
            var s = document.getElementById('status');
            s.innerText="删除成功";
            setTimeout(function () {
                s.innerText = "";
            },5000);
        }
    </script>
</body>
</html>

案例

更多案例：http://www.cnblogs.com/wupeiqi/articles/4457274.html

posted @ 2016-07-20 13:39 每天进步一点点！！！阅读(246) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

每天进步一点点！！！

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

jQuery简介

jQuery实例

公告