day16前端(Dom+Jquery)

JavaScirpt
    正则，字符串三个方法
　　(留后再讲)
DOM
    查找：
        直接查找
        间接查找
        --getElementById
        --getElementsByTagName

<!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"/>

    <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>
s1
<!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">

        <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){
            //console.log(event);
            if(event.keyCode == 27){
                HideModal();
            }
        }
    </script>
</body>
</html>
弹窗小练习


    操作：
        值
            innerText
            innerHtml
            value
        class：
            className
            classList.add
            classList.remove
        样式：
            <input type='text' style="color:red;font-size:40px;"/>
            tag = .....
            tag.style.color = 'red';
            tag.style.fontSize = '40px';
        属性：
            <input id='i1' name='n1' alex='sb' type='text' style="color:red;font-size:40px;"/>
            setAttribute
            getAttribute
            removeAttribute
            
            ===>
                tabObj.checked = true
            ===>jQuery: 操作数据，prop(checked,true)
       

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input id='i1' name='n1' alex='123' type='text' style="color:red;font-size:40px;"/>

    <input type="checkbox" id="i2" />
</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>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </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');
            }
        }
        
        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');
            }
        }
        
        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>
全选取消与反选


        标签：
            创建标签：
                字符串
                对象
            将标签添加到HTML中
                字符串形式的标签：
                    p1.insertAdjacentHTML('beforeEnd',tag);
                对象形式的标签：
                    p1.insertAdjacentElement('afterBegin',document.createElement('p'))
                    xxx.insertBefore(tag,xxx[1])
        点赞：
            创建标签，定时器（大小，位置，透明度）
            1、this，当前触发事件的标签
            2、createElement
            3、appendChild
            4、setInterval创建定时器
               clearInterval删除定时器
            5、removeChild删除子标签
      
        定时器
            setTimeOut,clearTimeout
            setInterval,clearInter
        
        事件：
            1、this，当前触发事件的标签
            2、全局事件绑定   window.onKeyDown = function(){}
            3、event，包含事件相关内容
            4、默认事件
                    自定义优先：a,form
                      默认优先：checkbox

<!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 = 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>
点赞小练习
<!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>
单次定时器
<!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>
</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>
提交判断


jQuery
    模块，Dom和JavaScript，
        1.12..  --> ...
        2.x     --> IE9
    
    查找：
        选择器
            id选择器
            标签选择器
            类选择器
            组合
            层级 #i1 .c1
            
            $('input:eq(1),#i1 .item')
            
        筛选器
            $('#i1').find('.item')
            $('#i1').eq(1)
        
    操作：
        CSS
        属性
            $('#i1').html() # 获取html内容
            $('#i1').html("<span>123</span>") # 设置html内容
            
            text()
            
            val()
            
        文本操作
    事件：
        - 优化
        1、如何使用jQuery绑定
        2、当文档加载完毕后，自动执行
            $(function(){
                ...
            });
        3、延迟绑定
        4、return false;

    扩展：
        JavaScirpt
            正则，字符串三个方法
        $.login
        Form表单验证（）
    Ajax：
        偷偷发请求
        
    -- jQuery循环
        
    

<!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>
隐藏菜单栏小练习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <p>
            <a onclick="Add(this);"> + </a>
            <input type="text" />
        </p>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function Add(ths){
            var p = $(ths).parent().clone();

            p.find('a').text(' - ');
            p.find('a').attr('onclick', 'Remove(this);');

            $(ths).parent().parent().append(p);
        }
        function Remove(ths){
            $(ths).parent().remove();
        }
    </script>
</body>
</html>
增加减少
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" onclick="Add();" />
    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*
            $('li').click(function () {
                alert($(this).text());
            });
            */
            $("ul").delegate("li","click",function(){
                alert($(this).text());
            });
        });

        function Add(){
            var tag = document.createElement('li');
            tag.innerText = '666';
            $('ul').append(tag);
        }




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


    
    
    
    
    
    
    
    
    
    
    
    
    

   

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/aaron-shen/p/5798170.html