前端知识——DOM、jQuery

DOM

　　查找：

　　　　直接查找

　　　　间接查找

　　　　--getElementById

　　　　--getElementsByTagName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <input id="w1" type="test" value="请输入关键字" onfocus="HH();" onblur="NN();"/>

        <script>
            function HH() {
                var tag=document.getElementById("w1");
                if(tag.value=="请输入关键字"){
                    tag.value="";
                }
            }
            function NN() {
                var tag=document.getElementById("w1");
                var val=tag.value;
                if (val.trim().length == 0){
                    tag.value = "请输入关键字";
                }
            }
        </script>
</body>
</html>

　　操作：

　　　　值

　　　　　　innerText

　　　　　　innerHtml

　　　　　　value

　　　　class：

　　　　　　className

　　　　　　classList.add

　　　　　　classList.remove

<!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;
             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="RR();"/>
        </div>

        <div id="shade" class="shade hide"></div>
        <div id="modal" class="modal hide">
            <a href="javascript:void (0)" onclick="HH();">取消</a>
        </div>
        <script>
            function RR() {
                var t1=document.getElementById("shade");
                var t2=document.getElementById("modal");
                t1.classList.remove("hide");
                t2.classList.remove("hide");
            }
            function HH() {
                var t1=document.getElementById("shade");
                var t2=document.getElementById("modal");
                t1.classList.add("hide");
                t2.classList.add("hide");
            }
        </script>
</body>
</html>

　　　　样式：

　　　　　　　tag = .....

　　　　　　　tag.style.color = 'red';

　　　　　　　tag.style.fontSize = '40px';

　　　　属性：

　　　　　　　setAttribute

　　　　　　　getAttribute

　　　　　　　removeAttribute

　　　　　　　　　　===>

　　　　　　　　　　　　tabObj.checked = true

　　　　　　　　　　===>jQuery:操作数据，prop(checked,true)

<!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"/></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 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;
                }else{
                    ck.checked = true;
                }
            }
        }
    </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删除子标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            padding: 50px;
            position: relative;
        }
    </style>
</head>
<body>
        <div class="item" style="background-color: #00AA88">
            <a onclick="Cli(this)">
                赞1
            </a>
        </div>
        <div class="item" style="background-color: #00b3ee">
            <a onclick="Cli(this)">
                赞2
            </a>
        </div>
        <div class="item" style="background-color: #00CCFF">
            <a onclick="Cli(this)">
                赞3
            </a>
        </div>
        <div class="item" style="background-color: #721c15">
            <a onclick="Cli(this)">
                赞4
            </a>
        </div>
        <script>
            function Cli(ths) {
                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;
                    op -=0.2;
                    fontSize +=5
                    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>

　　　　　　定时器

　　　　　　　　　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</title>
    <style>

        .back{
            position: fixed;
            bottom: 20px;
            right: 20px;
            color: red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body onscroll="BTS();">
        <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 BTS() {
                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>
    <form action="http://www.baidu.com">
        <input typs="test" id="username"/>
        <input type="submit" value="提交" onclick="return BB();"/>
    </form>
    <script>
        function BB() {
            var user=document.getElementById('username');
            if(user.value.length > 0){
                return true;
            }else {
                alert("123");
                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;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <style>
        .hide{
            display: none;
        }
        .menu{
             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) {
                $(ths).next().removeClass('hide');
                $(ths).parent().siblings().find('.body').addClass('hide');
            }
    </script>
</body>
</html>

相关阅读:
Hosts知多少?
Google 谷歌网页搜索, 学术搜索
 机器学习是什么?
SCI/EI期刊投稿 Reply Letter 常用格式总结
 解决Javascript中$(window).resize()多次执行
 Jquery使容器自适应浏览器窗口
 java中GET方式提交和POST方式提交
 java调试打断点和不打断点执行结果不一致问题解决
 EasyUI combobox的panelHeight自动高度
 跨服务器查询信息的sql
原文地址：https://www.cnblogs.com/wlzhc/p/5812598.html