js综合案例与jQuery

js综合案例
jQuery

js综合案例

案例一：模态框

交替显示按钮与模态框的方法：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }

        html, body {
    
    
            height: 100%;
        }

        #bg {
    
    
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }

        #content {
    
    
            position: relative;
            top: 150px;
            width: 400px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: red;
            background-color: white;
            margin: 0 auto;

        }

        #cancel {
    
    
            position: absolute;
            top: 0;
            right: 0;
            color: white;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: red;
        }
    </style>
</head>
<body>
<input type="button" value="弹出模态框" id="btn">
<script>
    var oBtn = document.getElementById('btn');
    var oDiv = document.createElement('div');
    var oP = document.createElement('p');
    var oSpan = document.createElement('span');

    oDiv.id = 'bg';
    oP.id = 'content';
    oSpan.id = 'cancel';

    oP.innerHTML = '弹出模态框';
    oSpan.innerHTML = 'X';

    oDiv.appendChild(oP);
    oP.appendChild(oSpan);


    oBtn.onclick = function () {
    
    
        this.parentNode.replaceChild(oDiv, this);
    };

    oSpan.onclick =function () {
    
    
        oDiv.parentNode.replaceChild(oBtn,oDiv);
    }

</script>
</body>
</html>

利用display:none/block与绝对定位控制模态框显示：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }
        html,body {
    
    
            height: 100%;
        }

        #bg {
    
    
            position: absolute;  // 利用绝对定位让模态框背景霸占全屏
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.3);
            display: none;
        }
        #content {
    
    
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -150px;
            background-color: white;
            width: 300px;
            height: 200px;

        }
        #content p:nth-child(3) {
    
    
            position: absolute;
            top: 100px;
        }


    </style>
</head>
<body>
<input type="button" value="弹出" id="btn">
<div id="bg">
    <div id="content">
        <p>
            <label for="inp-username">用户名: </label><input type="text" name="username" id="inp-username">
        </p>
        <p>
            <label for="inp-password">密码: </label><input type="text" name="username" id="inp-password">
        </p>
        <p>
            <input type="button" value="提交" >
            <input type="button" value="取消" id="cancel">
        </p>
    </div>
</div>

<script>
        var oBtn = document.getElementById('btn');
        var oBg = document.getElementById('bg');
        var oInpUsername=document.getElementById('inp-username');
        var oInpPwd=document.getElementById('inp-password');

        var oInp=document.getElementById('cancel');
        oBtn.onclick=function () {
    
    
            oBg.style.display='block';
        }

        oInp.onclick=function () {
    
    
            oInpUsername.value='';  // 在×掉模态框同时删除input内已输入的账号密码
            oInpPwd.value='';
            oBg.style.display='none'
        }


</script>

</body>
</html>

案例二：点击有惊喜

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }

        .box {
    
    
            width: 200px;
            height: 200px;
            background: red;
            text-align: center;
            color: white;
            line-height: 200px;
            font-size: 23px;
            font-weight: bold;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div class="box">点击有惊喜！！！</div>
<script>
    var oBox = document.getElementsByClassName('box')[0];

    //初始化点击的次数。通过次数的增加来改变DOM的样式
    var a = 0;
    oBox.onclick = function () {
    
        // 每次点击触发
        a++;
        console.log(a % 4);
        if (a % 4 === 1) {
    
    
            this.style.background = 'green';
            this.innerText = '继续点击哦！！！';
        } else if (a % 4 == 2) {
    
    
            this.style.background = 'blue';
            this.innerText = '骗你的,傻逼';
        } else if (a % 4 == 3) {
    
    
            this.style.background = 'transparent';
            this.innerText = '';
        } else {
    
    
            this.style.background = 'red';
            this.innerText = '点击有惊喜！！！';
        }
    }
</script>
</body>
</html>

案例三：简易评论板

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }

        #comment {
    
      // 整个评论区
            background-color: #b0b0b0;
            width: 500px;
        }

        #comment ul li {
    
      // 评论楼层
            list-style: none;
            background-color: wheat;
            border: 1px dashed #000;
            margin: 0px 10px 10px;
            word-break: break-all;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
<div id="comment">
    <p>评论内容：</p>
</div>
<div>
    <p>留言内容：</p>
    <textarea name="" id="content" cols="30" rows="10"></textarea>
    <p>
        <input type="button" value="提交" id="btn">
        <input type="button" value="统计" id="calculate">
    </p>
</div>
<script>
    var comment = document.getElementById('comment');  // 整个评论区
    var content = document.getElementById('content');  // 评论输入区
    var btn = document.getElementById('btn');  // 评论提交按钮
    var calculate=document.getElementById('calculate');  // 统计评论数量按钮

    var ul = document.createElement('ul');  // 创建评论楼
    comment.appendChild(ul);  // 为评论区加入楼

    var count=0;
    btn.onclick = function () {
    
      // 点击提交评论按钮时触发
        var val = content.value;  // 用户输入的内容
        if (val.length != 0) {
    
      // 当评论内容不为空时
            var date = new Date();  // 创建日期对象
            var subTime = date.toLocaleString();  // 当前时间格式化字符串

            var li = document.createElement('li');  // 创建一个li标签代表一层楼，里面用来放楼层内容
            var p1 = document.createElement('h3');  // 楼层信息p1
            var p2 = document.createElement('p');  // 评论内容

            var spans = document.getElementsByClassName('del');  // 存在删除按钮标签的数组
            count=spans.length+1;  // 存在删除按钮标签的数量

            p1.innerHTML = '#'+'<span class="num">'+count+'</span>'+'楼'+'    '+subTime + '<span class="del">    删除</span>';  // 楼层信息p1中创建信息，最后一个是创建删除按钮
            p2.innerHTML = val; // 评论内容写入用户输入的内容 
            li.appendChild(p1);  // 为本层的老大li添加p1与p2
            li.appendChild(p2);

            ul.appendChild(li);  // 为整个评论区添加li
            content.value = '';  // 清空评论区输入的内容
        }
        function aa() {
    
    
            var spans = document.getElementsByClassName('del');  // 存在删除按钮标签的数组
            for (var i = 0; i < spans.length; i++) {
    
      // 从零计数，当计数小于删除按钮总数时运行代码，并计数加一
                spans[i].onclick=function (currentIndex) {
    
    
                    function bb() {
    
    
                        ul.removeChild(this.parentNode.parentNode);
                        count--;
                        var ss=document.getElementsByClassName('num');
                        for (var j=currentIndex;j<ss.length;j++){
    
    
                            ss[j].innerHTML=parseInt(ss[j].innerHTML)-1;
                        }
                        aa();
                    }
                    return bb;
                }(i);
            }
        }
        aa()
    };
    calculate.onclick = function () {
    
    
        alert('一共发布了'+count+'条评论');
    }
</script>
</body>
</html>

案例四：选项卡

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }
        .tab {
    
    
            width: 480px;
            height: 200px;
            border: 1px solid red;
            margin: 0 auto;
        }

        ul li {
    
    
            list-style: none;
            width: 160px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #b0b0b0;
            float: left;
        }

        li.active {
    
    
            background-color: #55BBBB;
        }
        p {
    
    
            display: none;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: white;
        }
        p.active {
    
    
            display: block;
        }
    </style>
</head>
<body>
<div class="tab">
    <ul>
        <li class="active">首页</li>
        <li>新闻</li>
        <li>图片</li>
    </ul>
    <p class="active">首页内容</p>
    <p>新闻内容</p>
    <p>图片内容</p>
</div>
<script>
    var aLi=document.getElementsByTagName('li');
    var aP=document.getElementsByTagName('p');
    for (var i=0;i<aLi.length;i++){
    
    
        aLi[i].index=i;
        aLi[i].onclick=function () {
    
    
            for (var j=0;j<aLi.length;j++){
    
    
                aLi[j].className='';
                aP[j].className='';
            }
            this.className='active';
            aP[this.index].className='active';
        }
    }
</script>
</body>
</html>

案例五：仿淘宝搜索框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }

        #search {
    
    
            position: relative;
        }

        input {
    
    
            outline: none;
            display: block;
            border: 2px solid #f2a83c;
            border-radius: 10px;
            width: 490px;
            height: 50px;
            margin-top: 20px;
        }

        label {
    
    
            position: absolute;
            top: 20px;
            left: 10px;
            font-size: 8px;
            color: gray;
        }
    </style>
</head>
<body>
<div id="search">
    <input type="text" id="text">
    <label for="text" id="msg">老男孩上海校区</label>
</div>

<script>
    var txt = document.getElementById('text');
    var msg = document.getElementById('msg');

    //检测用户表单输入的时候
    txt.oninput = function () {
    
    
        //控制元素显示隐藏
        if (this.value == '') {
    
    
            msg.style.display = 'block';
        } else {
    
    
            msg.style.display = 'none';
        }
    }
</script>
</body>
</html>

案例六：获取当前时间

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>


<script>
    setInterval(function () {
    
    

        var date = new Date();

        var y = date.getFullYear();
        var m = date.getMonth();
        var d = date.getDate();
        var h = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();

        //今天是2018年2月23日 8:23:09


        document.body.innerHTML = "今天是" + y + '年' + num(m + 1) + "月" + num(d) + "日" + num(h) + ":" + num(min) + ":" + num(s)

    }, 1000)

    function num(n) {
    
    
        if (n < 10) {
    
    
            return "0" + n;

        }
        return n
    }
</script>
</body>
</html>

案例七：匀速运动

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
    
            padding: 0;
            margin: 0;
        }

        .box {
    
    
            width: 200px;
            height: 200px;
            background-color: #FF0000;
            position: absolute;
            top: 50px;
            left: 0px;
        }
    </style>
</head>
<body>
<div id="wrap">

    <button id="btn1">前进</button>
    <button id="btn2">后退</button>
    <div class="box" id="box1">

    </div>

</div>

<script>
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');

    var box1 = document.getElementById('box1')

    var count = 0;
    var time1 = null;
    var time2 = null;

    btn1.onclick = function () {
    
    
        clearInterval(time2);

        time1 = setInterval(function () {
    
    
            count += 10;
            if (count > 1000) {
    
    
                box1.style.left = '1000px';
                box1.style.borderRadius = '50%';

                clearInterval(time1);
            } else {
    
    
                box1.style.left = count + 'px';
                box1.style.borderRadius = count / 2000 * 100 + '%';
            }
        }, 10)
    };
    btn2.onclick = function () {
    
    
        clearInterval(time1);
        time2 = setInterval(function () {
    
    
            count -= 10;
            if (count <= 0) {
    
    
                box1.style.left = '0px';
                box1.style.borderRadius = '';

                clearInterval(time2);
            } else {
    
    
                box1.style.left = count + 'px';
                box1.style.borderRadius = count / 2000 * 100 + '%';
                ;
            }
        }, 10)
    }
</script>
</body>
</html>

案例八：5s后关闭广告

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
    
            padding: 0;
            margin: 0;
        }

        img {
    
    
            position: fixed;
            width: 300px;
        }

        ul {
    
    
            list-style: none;
        }

        #left {
    
    
            left: 0;
        }

        #right {
    
    
            right: 0;
        }

        ul li {
    
    
            font-size: 25px;
        }
    </style>
</head>
<body>
<img src="images/1.jpg" id="left">
<img src="images/1.jpg" id="right">
<ul>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>

</ul>

<script>
    window.onload = function () {
    
    
        var left = document.getElementById('left');
        var right = document.getElementById('right');

        setTimeout(function () {
    
    
            left.style.display = 'none';
            right.style.display = 'none';
        }, 5000)
    }

</script>
</body>
</html>

案例九：小米滚动

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
    
            padding: 0;
            margin: 0;
        }

        .wrap {
    
    
            width: 512px;
            height: 400px;
            border: 3px solid #808080;
            position: relative;
            overflow: hidden;
            margin: 100px auto;
        }

        .wrap span {
    
    
            width: 100%;
            height: 200px;
            position: absolute;
            background-color: transparent;
            border: 1px solid #000;
        }

        .up {
    
    
            top: 0;
        }

        .down {
    
    
            bottom: 0;
        }

        img {
    
    
            position: absolute;
            top: 0;
            left: 0;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="box" class="wrap">
    <img src="images/mi.png" id="xiaomi">

    <span class="up" id="picUp">11111</span>

    <span class="down" id="picDown">22222</span>

</div>

<script>
    var up = document.getElementById('picUp');
    var down = document.getElementById('picDown');

    var img = document.getElementById('xiaomi');

    var count = 0;
    var time = null;
    //鼠标移入的时候吧
    up.onmouseover = function () {
    
    

        //不管怎样 上来先清定时器
        clearInterval(time);
        time = setInterval(function () {
    
    
            count -= 3;

            count >= -1070 ? img.style.top = count + 'px' : clearInterval(time);


        }, 30)
    };
    down.onmouseover = function () {
    
    
        clearInterval(time);

        time = setInterval(function () {
    
    
            count += 1;

            count < 0 ? img.style.top = count + 'px' : clearInterval(time);


        }, 30)
    }

</script>
</body>
</html>

案例十：无缝轮播

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
    
            padding: 0;
            margin: 0;
        }

        ul {
    
    
            list-style: none;
        }

        .box {
    
    
            width: 600px;
            height: 700px;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
            border: 1px solid #000;

        }

        ul li {
    
    
            float: left;
        }

        .box ul {
    
    
            width: 500%;
            position: absolute;
            top: 0;
            left: 0;


        }
        img {
    
    
            width: 600px;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225816920-580320384.jpg"/></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225809591-1990809146.jpg"/></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225724530-539090864.jpg"/></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225751362-1832630751.jpg"/></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225816920-580320384.jpg"/></li>

    </ul>


</div>

<script>
    var box = document.getElementsByClassName('box')[0];

    var ul = box.children[0];
   

    var num = 0;
    var timer = null;

    timer = setInterval(autoPlay, 3);

    //函数的声明
    function autoPlay() {
    
    
        num--;


        num <= -2400? num = 0: num;
        ul.style.left = num + 'px'

    }

    //鼠标移动上去
    box.onmouseover = function () {
    
    
        clearInterval(timer)
    };
    box.onmouseout = function () {
    
    
        timer = setInterval(autoPlay, 3);
    }
</script>
</body>
</html>

案例十一：用户名和密码校验

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
    
    
            background-color: red;
        }

    </style>
</head>
<body>
<form>
    <p>
        <input type="text" name="username">
        <span></span>
    </p>

    <p>
        <input type="password" name="password">
        <span></span>

    </p>

    <p>
        <input type="button" value="提交" id="btn">
    </p>
</form>

<script>
    var isOk1=false
    var reg1=new RegExp('(?!^[0-9]+$)(?!^[a-zA-Z]+$)^[0-9A-Za-z]{4}$')
    var inp1 = document.getElementsByName("username")[0]

    inp1.onblur=function () {
    
    
        var res=reg1.test(this.value)
        this.style.border="1px solid red"

        if (!res) {
    
    
            this.nextElementSibling.innerText="用户名必须由4位字母和数字组成"
            setTimeout(function () {
    
    
                inp1.nextElementSibling.innerText=""
                inp1.value=""
            },3000)
        }else {
    
    
            this.style.border="1px solid green"
            isOk1=true
        }
    }

    var isOk2=false
    var reg2=new RegExp('(?!^[0-9]+$)(?!^[a-zA-Z]+$)^[0-9A-Za-z]{6}$')
    var inp2 = document.getElementsByName("password")[0]

    inp2.onblur=function () {
    
    
        var res=reg2.test(this.value)
        this.style.border="1px solid red"

        if (!res) {
    
    
            this.nextElementSibling.innerText="密码必须由6位字母和数字组成"
            setTimeout(function () {
    
    
                inp2.nextElementSibling.innerText=""
                inp2.value=""
            },3000)
        }else {
    
    
            this.style.border="1px solid green"
            isOk2=true
        }
    }

    var btn=document.getElementById("btn")
    btn.onclick=function () {
    
    
        if(isOk1 && isOk2) {
    
    
            alert("提交成功")
        }else {
    
    
            alert("请重新填写")
        }
    }
</script>
</body>
</html>

jQuery

一简介

什么是jQuery

jQuery 是一个高效、精简并且功能丰富的JavaScript工具库
jQuery极大的简化了JavaScript编程

为何要用jQuery

jQuery的优势（jQuery的宗旨就是：“Write less, do more.“）

开源免费
一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
便捷的选择器与DOM操作，
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

Query版本

一代
1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
二代
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
三代
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

ps：维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

jQuery相关网站

官网 https://jquery.com/
文档API： http://jquery.cuishifeng.cn/index.html

二 Jquery基本使用

引入

先下载到本地，然后引用，才能使用
下载地址： https://jquery.com/download/

方式一：本地引入

<script src="jquery-3.3.1.min.js"></script>
<script>
    //注意，一定在引入jQuery之后，再使用jQuery提供的各种操作
</script>

方式二：直接使用CDN

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    code...
</script>

BootCDN jQuery各个版本地址： https://www.bootcdn.cn/jquery/

jQuery对象

$是jQuery的别名
```
jQuery('.item').show()
//等同于
$('.item').show()
```
$对象可以用作选择器获取元素，还可以创建DOM对象
文档就绪事件

DOM文档加载的步骤
1. 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。
5. 加载图片等外部文件。
6. 页面加载完毕。
等待文档加载完毕后执行函数，有两种方式
1. 执行时间不同
  window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
  
  $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
2. 编写个数不同
  window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
  
  $(document).ready()可以同时编写多个，并且都可以得到执行
3. 简化写法不同
  window.onload没有简化写法
  
  $(document).ready(function(){})可以简写成$(function(){});

链式操作

链式调用，原理就是调用一个实例化方法返回的是当前的对象

$('.box1').css('color','red').next().css('width','200px').css('height','200px').css('background','green').removeAttr('class')

jQueryDom和jsDom
通过原生js获取的dom对象，我们称之为jsDOM或者原生DOM
通过jQuery选择器获取的dom对象，我们称之为 jQuery DOM
jQuery DOM本质上是由 jsDOM组成的集合，是个类数组对象。可以通过 [索引] 获取其中的jsDOM，$(jsDOM) 可以转为 jQuery DOM如下

var box = document.getElementsByClassName('box'); #获取js DOM对象

Js DOM对象 ==> JQ DOM对象$(js DOM对象) # 例如 $(box)

JQ DOM对象 ==> JS DOM对象

$("选择器")[0] # 或者$("选择器").get(0)

三选择器

id选择器：
$("#id")

标签选择器：
$("tagName")

class选择器：
$(".className")

所有元素选择器：
$("*")

交集选择器：
$("div.c1") // 找到类为c1的div标签

并集选择器：
$("#id, .className, tagName")

层级选择器：
x和y可以为任意选择器

$("x y");   // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y")  // 找到所有紧挨在x后面的y
$("x ~ y")  // x之后所有的兄弟y

基本筛选器：

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(选择器)// 过滤掉所有满足not条件的标签
:has(选择器)// 过滤出所有后代中满足has条件的标签

#例如
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有！！！后代中！！！不含a标签的li标签

JQ版自定义模态框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }
        html,body {
    
    
            height: 100%;
        }

        #bg {
    
    
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.3);
            display: none;
        }
        #content {
    
    
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -150px;
            background-color: white;
            width: 300px;
            height: 200px;

        }
        #content p:nth-child(3) {
    
    
            position: absolute;
            top: 100px;
        }


    </style>
</head>
<body>
<input type="button" value="弹出" id="btn">
<div id="bg">
    <div id="content">
        <p>
            <label for="inp-username">用户名: </label><input type="text" name="username" id="inp-username">
        </p>
        <p>
            <label for="inp-password">密码: </label><input type="text" name="username" id="inp-password">
        </p>
        <p>
            <input type="button" value="提交" >
            <input type="button" value="取消" id="cancel">
        </p>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>

    $("#btn")[0].onclick=function () {
    
    
        $("#bg").css("display","block")
    }

    $("#cancel")[0].onclick=function () {
    
    
        $("#inp-username").val("")
        $("#inp-password").val("")
        $("#bg").css("display","none")
    }
</script>

</body>
</html>

属性选择器：

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

例子：

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单常用筛选：

:text
:password:file
:radio
:checkbox
:submit
:reset
:button

例子：

$(":checkbox")  // 找到所有的checkbox

表单对象属性:

:enabled
:disabled
:checked
:selected

例子：

找到可用的input标签

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

找到被选中的option：

 <select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

四筛选器

下一个兄弟元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个兄弟元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素：

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")
//等价于
$("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的
//等价于 
$("div.c1")

补充：

.first()// 获取匹配的第一个元素
.last()// 获取匹配的最后一个元素
.not()// 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

左侧菜单示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }

        html {
    
    
            height: 100%;
        }

        body {
    
    
            height: 100%;
        }

        .left {
    
    
            width: 20%;
            height: 100%;
            background-color: #30353c;
        }

        .title {
    
    
            /*width: 100%;*/
            text-align: center;
            height: 50px;
            line-height: 50px;
            color: white;
            border-bottom: 1px solid #000;

        }

        .item {
    
    
            text-align: center;
            height: 30px;
            line-height: 30px;
            color: white;
            border-bottom: 1px solid #31353b;
            background-color: #191c20;

        }

        .hide {
    
    
            display: none;
        }

    </style>
</head>
<body>

<div class="left">
    <div class="menu">
        <div class="title">菜单一</div>
        <div class="items hide">
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>
        <div class="title">菜单二</div>
        <div class="items hide">
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>
        <div class="title">菜单三</div>
        <div class="items hide">
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>

    </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $('.title').click(function () {
    
     // jQuery绑定事件
        // 隐藏所有class里有.items的标签
        $('.items').addClass('hide'); //批量操作
        $(this).next().removeClass('hide');
    })
</script>
</body>
</html>

五标签操作之样式操作

样式类
addClass(); // 添加指定的CSS类名。
removeClass(); // 移除指定的CSS类名。
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。

CSS

css("color","red")   //DOM操作：tag.style.color="red"

示例：
$("p").css("color", "red"); //将所有p标签的字体设置为红色

位置：

offset()       // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()    // 获取匹配元素相对父元素的偏移
scrollTop()   // 获取匹配元素相对滚动条顶部的偏移
scrollLeft()   // 获取匹配元素相对滚动条左侧的偏移
例1$("#bb").offset({
    
    "left":100,"top":100}) 例2$(window).scrollTop(0);  // 跳到首页

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

尺寸：
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

位置操作案例匀速移动到顶部

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
    
    
            width: 500px;
        }

        #button1 {
    
    
            width: 100px;
            height: 50px;
            background-color: #b9950c;
        }

        .box1 {
    
    
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }

        .button2 {
    
    
            width: 50px;
            height: 50px;
            background-color: #3a6696;
            position: fixed;
            right: 15px;
            bottom: 15px;
        }

        .hide {
    
    
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="妹子走你" id="button1">
<div class="box2">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534951696884&di=baceea45663c21fcfe229b8cc123f272&imgtype=0&src=http%3A%2F%2Fimg2.ph.126.net%2F3zJx2Cird3dSk8YY3B8qSg%3D%3D%2F1111263208071747512.jpg"
         alt="">
</div>
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
<div class="box1">5</div>
<div class="box1">6</div>
<div class="box1">7</div>
<div class="box1">8</div>
<div class="box1">9</div>
<div class="box1">10</div>
<div class="box1">11</div>
<div class="box1">12</div>
<div class="box1">13</div>
<div class="box1">14</div>
<div class="box1">15</div>
<div class="box1">16</div>
<div class="box1">17</div>
<div class="box1">18</div>
<div class="box1">19</div>
<div class="box1">20</div>
<div class="box1">21</div>
<div class="box1">22</div>
<div class="box1">23</div>
<div class="box1">24</div>
<div class="box1">25</div>
<div class="box1">26</div>
<div class="box1">27</div>
<div class="box1">28</div>
<div class="box1">29</div>
<div class="box1">30</div>
<div class="box1">31</div>
<div class="box1">32</div>
<div class="box1">33</div>
<div class="box1">34</div>
<div class="box1">35</div>
<div class="box1">36</div>
<div class="box1">37</div>
<div class="box1">38</div>
<div class="box1">39</div>
<div class="box1">40</div>
<div class="box1">41</div>
<div class="box1">42</div>
<div class="box1">43</div>
<div class="box1">44</div>
<div class="box1">45</div>
<div class="box1">46</div>
<div class="box1">47</div>
<div class="box1">48</div>
<div class="box1">49</div>
<div class="box1">50</div>
<div class="box1">51</div>
<div class="box1">52</div>
<div class="box1">53</div>
<div class="box1">54</div>
<div class="box1">55</div>
<div class="box1">56</div>
<div class="box1">57</div>
<div class="box1">58</div>
<div class="box1">59</div>
<div class="box1">60</div>
<div class="box1">61</div>
<div class="box1">62</div>
<div class="box1">63</div>
<div class="box1">64</div>
<div class="box1">65</div>
<div class="box1">66</div>
<div class="box1">67</div>
<div class="box1">68</div>
<div class="box1">69</div>
<div class="box1">70</div>
<div class="box1">71</div>
<div class="box1">72</div>
<div class="box1">73</div>
<div class="box1">74</div>
<div class="box1">75</div>
<div class="box1">76</div>
<div class="box1">77</div>
<div class="box1">78</div>
<div class="box1">79</div>
<div class="box1">80</div>
<div class="box1">81</div>
<div class="box1">82</div>
<div class="box1">83</div>
<div class="box1">84</div>
<div class="box1">85</div>
<div class="box1">86</div>
<div class="box1">87</div>
<div class="box1">88</div>
<div class="box1">89</div>
<div class="box1">90</div>
<div class="box1">91</div>
<div class="box1">92</div>
<div class="box1">93</div>
<div class="box1">94</div>
<div class="box1">95</div>
<div class="box1">96</div>
<div class="box1">97</div>
<div class="box1">98</div>
<div class="box1">99</div>
<div class="box1">100</div>
<button id="button2" class="button2 hide">回到顶部</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    $('#button1').click(function () {
    
    
        $('.box2').offset({
    
    left: 300, top: 100});
    });

    $(window).scroll(function () {
    
    
        if ($(window).scrollTop() > 100) {
    
    
            $('#button2').removeClass('hide');
        } else {
    
    
            $('#button2').addClass('hide');

        }
    });
    $('#button2').click(function () {
    
    
        var x=$(window).scrollTop()
        var t=setInterval(function () {
    
    
            x-=10
            $(window).scrollTop(x);

            // 一定要把这一段代码加到这里，加到外面的话，就运行一次就结束了，不会持续判断x的值
            if (x <=0){
    
    
            console.log("ok")
            $(window).scrollTop(0);
            clearInterval(t)
        }
        },10)

    });
</script>
</body>
</html>

未完待续

JavaScript学习 day53之综合案例与jQuery

js综合案例与jQuery

js综合案例

案例一：模态框

交替显示按钮与模态框的方法：

利用display:none/block与绝对定位控制模态框显示：

案例二：点击有惊喜

案例三：简易评论板

案例四：选项卡

案例五：仿淘宝搜索框

案例六：获取当前时间

案例七：匀速运动

案例八：5s后关闭广告

案例九：小米滚动

案例十：无缝轮播

案例十一：用户名和密码校验

jQuery

一简介

二 Jquery基本使用

三选择器

JQ版自定义模态框

四筛选器

左侧菜单示例

五标签操作之样式操作

位置操作案例匀速移动到顶部

猜你喜欢

JavaScript学习 day53之综合案例与jQuery

js综合案例与jQuery

js综合案例

案例一：模态框

交替显示按钮与模态框的方法：

利用display:none/block与绝对定位控制模态框显示：

案例二：点击有惊喜

案例三：简易评论板

案例四：选项卡

案例五：仿淘宝搜索框

案例六：获取当前时间

案例七：匀速运动

案例八：5s后关闭广告

案例九：小米滚动

案例十：无缝轮播

案例十一：用户名和密码校验

jQuery

一 简介

二 Jquery基本使用

三 选择器

JQ版自定义模态框

四 筛选器

左侧菜单示例

五 标签操作之样式操作

位置操作案例 匀速移动到顶部

猜你喜欢

一简介

三选择器

四筛选器

五标签操作之样式操作

位置操作案例匀速移动到顶部