Day16 DOM &jQuery

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Day16 DOM &jQuery相关的知识，希望对你有一定的参考价值。

一、本节主要内容

技术分享 
javascript
    正则表达式
    字符串操作的三个方法

DOM(知道就行，一般使用jQuery)
    查找：
        直接查找：
            document.getElementById 根据ID获取一个标签
            document.getElementsByName   根据name属性获取标签集合
            document.getElementsByClassName 根据class属性获取标签集合
            document.getElementsByTagName   根据标签名获取标签集合
        间接查找：
            parentNode  //父节点
            childNodes  //所有子节点
            firstChild  //第一个子节点
            lastChild   //最后一个子节点
            nextSibling //下一个兄弟节点
            previousSibling //上一个兄弟节点

            parentElement   //父节点标签元素
            children    //所有子标签
            firstElementChild   //第一个子标签元素
            lastElementChild    //最后一个子标签元素
            nextElementChild    //下一个兄弟标签元素
            previousElementSibling  //上一个兄弟标签元素
    操作：
        t = document.getElementById(‘i2‘)

jQuery
    $("#i1")
    模块，DOM和JavaScript

    class操作：
        className
        classList.add
        classList.remove(cls)

        样式修改：
            <input type="text" style="color:red;font-size:40px" />
            tag = ...
            tag.style.color = ‘white‘;
            tag.style.fontSize = ‘200px‘;

        属性：
            setAttribute
            getAttribute
            removeAttribute

            tabObj.checked = true
            jQuery:操作数据，prop(checked.true)

        创建标签：
        （1）对象(优先使用)
            var tag = document.createElement(‘a‘)
            tag.innerText("smartisian")
            tag.className = "c1"
            tag.href = "http://t.tt"

            p1 = document.getElementById(‘d1‘);
            p1.insertAdjacentElement(‘afterBegin‘, document.createElement(‘‘));

            tag.innerText = ‘test‘;
            t1.insertBefore(tag,t1.children[0])
        （2）字符串
            var tag = "<a class="c1" href="http://t.tt">T3</a>"

            p1 = document.getElementById(‘d1‘);
            p1.insertAdjacenthtml(‘beforeEnd‘,tag);
            p1.insertAdjacentHTML(‘afterEnd‘,tag);
            p1.insertAdjacentHTML(‘beforeBegin‘,tag);
            p1.insertAdjacentHTML(‘afterBegin‘,tag);
            p1.insertAdjacentText(‘afterBegin‘,tag);

        点赞：
            创建标签，定时器（大小、位置、透明度）
            1、this当前触发事件的标签
            2、createElement
            3、appendChild
            4、setInterval创建定时器
            5、clearInterval删除定时器
            6、removeChild删除子标签

        定时器：
            setTimeOut,clearTimeOut
            setInterval 多次定时器
            clearInterval   清除定时器

        滚动条：
            窗口滚动条
            div的滚动条
            overflow:auto
        事件：
            1、this当前事件
            2、全局事件，window.onclick()、window.onKeyDown = function(){}
            3、event，包含了事件相关内容
            4、默认事件
                自定义优先：a,form
                onclick="return SubmitForm();
                默认优先：checkbox


    查找：
        选择器
            id选择器：#id
            标签选择器
            类选择器
            组合选择器：#i1,#i2,#i3
            层级选择器：#i1 .c1(在i1的子子孙孙里找class=‘c1‘)   parent > child(孩子里找)
            $(‘input:eq(1),#i1 .item‘)
        筛选器
        $(‘#i1‘).find(‘.item‘)
        $(‘#i1‘).eq(1)
    操作：
        CSS
        属性
            $(‘#i1‘).html() #获取html内容
            $(‘#i1‘).css(‘fontSize‘,‘18px‘)
                tag.scrollTop = 0;(原来操作)

            $(‘#i1‘).scrollTop

        文本操作
    事件：
        --优化
            1、如何使用jQuery绑定事件
            2、当文档加载完毕后，自动执行
            $(function(){

            });
            3、延迟绑定
            4、return false
    扩展：
        $.login
        Form表单验证
    Ajax：
        偷偷的发请求

    --jQuery循环
View Code

二、DOM

1、innerText

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">
        <a>1</a>
        <a>2</a>
        <a>3</a>
    </div>
    <input type="text" id="i2" />
    <!--innerText-->
    <a id="i3" href="http://www.google.com">Goo<span>gle</span></a>
</body>
</html>
View Code

2、innerText & innerHTML

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="i1" />
    <!--innerText只获取文本内容-->
    <!--innerHTML既获取文本内容又可以拿到span标签中的内容-->
    <a id="i2" href="http://www.bing.com.cn">必应</a>
</body>
</html>
View Code

3、搜索框

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框</title>
</head>
<body>
    <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur()" />
    <input id="i2" type="text" value="请输入关键字" onfocus="Focus();" />
    <script type="text/javascript">
        function Focus() {
            //console.log(‘Focus‘);
            //获取标签，清空
            var tag = document.getElementById(‘i1‘);
            //判断框中是否为：请输入关键字
            if(tag.value == "请输入关键字"){
                tag.value = "";
            }
        }
        function Blur() {
            //console.log(‘Blur‘);
            //移走时加上“请输入关键字”
            var tag = document.getElementById(‘i1‘);
            var val = tag.value;
            //
            if(val.trim().length == 0){
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>
View Code

三、JavaScript

1、对话框

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">
        <!--标签什么都不操作时，设置javascript:void(0)-->
        <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‘);
        }
        window.onkeydown = function (event) {
            if(event.keyCode == 27){
                HideModal();
            }
        }
    </script>
</body>
</html>
View Code

2、实现全选、取消、反选（第一种方法，会有问题）

技术分享 
<!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="CancelAll()" />
    <input type="button" value="反选" onclick="ReverseAll()" />
    <table border="1px">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /> </td>
                <td>1</td>
                <td>11</td>
            </tr>
            <tr>
                <td><input type="checkbox" /> </td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /> </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‘);
            }
        }
        function CancelAll() {
            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‘);
            }
        }
        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>
View Code

3、点赞

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞</title>
    <style>
        .item{
            padding: 50px;
            position: relative;
        }
        item span{
            position: absolute;
            top: 49px;
            left: 71px;
            opacity: 1;
            font-size: 18px;
        }
    </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,当前触发事件的标签
            //console.log(ths.parentElement);
            var top = 49;
            var left = 71;
            var op = 1;
            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.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>
View Code

4、定时删除

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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 = "";
            },3000);
        }
    </script>
</body>
</html>
View Code

5、返回顶部

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .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() {
            //console.log(1);
            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>
View Code

6、提交（第一种方式）

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="f1">
        <input type="text" />
        <input type="submit" value="提交" />
        <a onclick="Submit()">提交</a>
    </form>
    <script>
        function Submit() {
            var form = document.getElementById(‘f1‘);
            form.submit();
        }
    </script>
</body>
</html>
View Code

7、跳转

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        /*
        var ret = confirm(‘是否删除？‘);
        console.log(ret);
        */
        location.href = "http://www.baidu.com";
    </script>
</body>
</html>
View Code

8、事件

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
    <a href="http://www.baidu.com" onclick="ClickB();">百度</a>

    <form>
        <input type="text" />
        <input type="submit" onclick="ClickB();" />
    </form>

    <input type="checkbox" onclick="ClickB();" />

    <script>
        function ClickB() {
            alert(123);
        }
    </script>
</body>
</html>
View Code

9、提交（第二种方式）

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>
View Code

四、jQuery

1、第一个例子

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div id="i1">
        <div class="item">123</div>
        <div class="item">
            <div class="c1">
                <a>百度</a>
            </div>
        </div>
    </div>
    <div id="i2"></div>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        //jQuery.xxx
        //$.xxx
        $(‘#i1‘).addClass(‘hide‘);
    </script>
</body>
</html>
View Code

2、左侧菜单（第一种方式）

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .menu{
            width: 200px;
            height: 800px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
        .hide{
            display: none;
        }
    </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>
                <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="js/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>
View Code

3、实现全选、取消、反选（第二种方法，推荐）

技术分享 
<!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="CancelAll()" />
    <input type="button" value="反选" onclick="ReverseAll()" />
    <table border="1px">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /> </td>
                <td>1</td>
                <td>11</td>
            </tr>
            <tr>
                <td><input type="checkbox" /> </td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /> </td>
                <td>3</td>
                <td>33</td>
            </tr>
        </tbody>
    </table>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        function CheckAll() {
            $(‘#tb input[type="checkbox"]‘).prop(‘checked‘,true);
        }
        function CancelAll() {
            $(‘#tb input[type="checkbox"]‘).prop(‘checked‘,false);
        }
        function ReverseAll() {
            $(‘#tb input[type="checkbox"]‘).each(function (i) {
                //this当前标签
                //$(this)当前标签的jQuery对象
                if($(this).prop(‘checked‘)){
                    $(this).prop(‘checked‘,false);
                }else{
                    $(this).prop(‘checked‘,true);
                }
            });
            
        }
    </script>
</body>
</html>
View Code

4、增加、减少输入框

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
       <p>
            <a onclick="Add(this);"> + </a>
            <input type="text">
       </p>
   </div>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        function Add(ths) {
            var p = $(ths).parent().clone();
            p.find(‘a‘).text(‘ - ‘);
            $(ths).parent().parent().append(p);
            p.find(‘a‘).attr(‘onclick‘, ‘Remove(this);‘);
        }
        function Remove(ths) {
            $(ths).parent().remove();
        }
    </script>
</body>
</html>
View Code

5、左侧菜单（第二种方式）

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .menu{
            width: 200px;
            height: 800px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
        .hide{
            display: none;
        }
    </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>
                <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="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //当文档数加载完毕后，自动执行
            $(‘.item .title‘).click(function () {
            $(this).next().removeClass(‘hide‘);
            $(this).parent().siblings().find(‘.body‘).addClass(‘hide‘);
            });
        });

        /*绑定事件的另一种方式
        $(‘.item .title‘).bind(‘click‘,function () {
            $(this).next().removeClass(‘hide‘);
            $(this).parent().siblings().find(‘.body‘).addClass(‘hide‘);
        });
        */
    </script>
</body>
</html>
View Code

6、延迟绑定

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="Add();" />
    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
        <li>000</li>
    </ul>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
//            $(‘li‘).click(function () {
//                alert($(this).text());
//            });
            //延迟绑定，ul绑定数据的父标签
            $(‘ul‘).delegate(‘li‘,‘click‘,function () {
                alert($(this).text());
            });
        });

        function Add() {
            var tag = document.createElement(‘li‘);
            tag.innerText = ‘666‘;
            $(‘ul‘).append(tag);
        }
    </script>
</body>
</html>
View Code

 

以上是关于Day16 DOM &jQuery的主要内容，如果未能解决你的问题，请参考以下文章

Day 17前端工具升级之Javascript & jQuery

Day388.Selector&Pipe&fileLock文件锁&Path&Files&AsynchronousFileChannel异步通道 -NIO(代码片

js day43 Jquery入门(回顾js,Jquery选择器,dom操作)

jQuery简单介绍及基本用法(选择器&DOM操作)

day16 js+dom

20180503 jq学习记录(jquery操作样式表,时间片,jq对象函数间传递)