Javascript 第四课 : DOM结构中id,class,标签和css选择器的用法以及一个在线聊天的实战案例 2018年9月14日 23:36 - JavaScript、jQuery、Vue.js、Bootstrap

Home > List of blog posts > Javascript 第四课 : DOM结构中id,class,标签和css选择器的用法以及一个在线聊天的实战案例 2018年9月14日 23:36

Blogger Information

Blog 39

fans 0

comment 0

visits 30844

Special Recommendation

More>

Related recommendations

实例ID选择法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM中页面元素的选择方法</title>
    <style>
        table,tr,th,td{
            border: 1px solid #000;
            border-collapse: collapse;
        }
        table {
            width: 400px;
            height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
<h2>id选择法</h2>
<form>
    <table id="table">
        <tr id="title">
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>工资</th>
        </tr>
        <tr>
            <td id="001">001</td>
            <td>马小乖</td>
            <td>18</td>
            <td>3800</td>
        </tr>
        <tr>
            <td id="002">002</td>
            <td>江流儿</td>
            <td>23</td>
            <td>5800</td>
        </tr>
        <tr>
            <td id="003">003</td>
            <td>燕南天</td>
            <td>40</td>
            <td>19800</td>
        </tr>
    </table>

    <script>
        let idt = document.getElementById('table');
        let idti = document.getElementById('title');

        idt.style.backgroundColor = 'skyblue';
        idti.style.backgroundColor = 'yellow';

        function getIds() {
            let Ids = {};
            for(let i = 0;i <arguments.length;i++){
                let id = arguments[i];
                let ids = document.getElementById(id);
                if (ids === null) {
                    throw new Error('No Element with id' + id);
                }
                Ids[id] = ids;
            }
            return Ids;
        }

        let Ids = getIds('001','002','003');
        for (let key in Ids) {
            Ids[key].style.backgroundColor = 'coral';
        }
    </script>
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例CLASS选择法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM中页面元素的选择方法</title>
    <style>
        table,tr,th,td{
            border: 1px solid #000;
            border-collapse: collapse;
        }
        table {
            width: 400px;
            height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
<h2>class选择法</h2>
<form>
    <table id="table">
        <tr id="title">
            <th>ID</th>
            <th class="xm">姓名</th>
            <th>年龄</th>
            <th>工资</th>
        </tr>
        <tr>
            <td id="001">001</td>
            <td class="mxg">马小乖</td>
            <td>18</td>
            <td>3800</td>
        </tr>
        <tr>
            <td id="002">002</td>
            <td class="jle">江流儿</td>
            <td>23</td>
            <td>5800</td>
        </tr>
        <tr class="tr">
            <td id="003">003</td>
            <td class="ynt">燕南天</td>
            <td>40</td>
            <td>19800</td>
        </tr>
    </table>
<script>
    let xm = document.getElementsByClassName('xm')[0];
    // console.log(xm);
    xm.style.backgroundColor = 'green';

    document.getElementsByClassName('mxg').item(0)
            .style.backgroundColor = 'red';

    let jle = document.getElementsByClassName('jle').item(0);
    jle.style.backgroundColor = 'coral';

    let tr = document.getElementsByClassName('tr').item(0);
    console.log(tr);
    tr.style.backgroundColor = 'blue';
    tr.style.fontSize = '1.5rem';

    document.getElementsByClassName('ynt').item(0)
            .style.backgroundColor = 'red';
 </script>
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例Tag选择法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM中页面元素的选择方法</title>
    <style>
        table,tr,th,td{
            border: 1px solid #000;
            border-collapse: collapse;
        }
        table {
            width: 400px;
            height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
<h2>Tag选择法</h2>
<form>
    <table id="table">
        <tr id="title">
            <th>ID</th>
            <th class="xm">姓名</th>
            <th>年龄</th>
            <th>工资</th>
        </tr>
        <tr>
            <td id="001">001</td>
            <td class="mxg">马小乖</td>
            <td>18</td>
            <td>3800</td>
        </tr>
        <tr>
            <td id="002">002</td>
            <td class="jle">江流儿</td>
            <td>23</td>
            <td>5800</td>
        </tr>
        <tr class="tr">
            <td id="003">003</td>
            <td class="ynt">燕南天</td>
            <td>40</td>
            <td>19800</td>
        </tr>
    </table>
    <script>
        let h2 = document.getElementsByTagName('h2')[0];
        h2.style.color = 'red';

        let table = document.getElementsByTagName('table').item(0);
        table.style.backgroundColor = 'lightblue';

        let ths = document.getElementsByTagName('th');
        console.log(ths);
        for (let i = 0; i<ths.length; i++){
            ths[i].style.backgroundColor = 'lightpink';
        }
        let tdend = table.getElementsByTagName('tr').item(3);
        tdend.style.backgroundColor = 'yellow';
    </script>
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例CSS选择法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM中页面元素的选择方法</title>
    <style>
        table,tr,th,td{
            border: 1px solid #000;
            border-collapse: collapse;
        }
        table {
            width: 400px;
            height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
<h2>CSS选择法</h2>
<form>
    <table id="table">
        <tr id="title">
            <th>ID</th>
            <th class="xm">姓名</th>
            <th>年龄</th>
            <th>工资</th>
        </tr>
        <tr>
            <td id="001">001</td>
            <td class="mxg">马小乖</td>
            <td>18</td>
            <td>3800</td>
        </tr>
        <tr>
            <td id="002">002</td>
            <td class="jle">江流儿</td>
            <td>23</td>
            <td>5800</td>
        </tr>
        <tr class="tr">
            <td id="end">003</td>
            <td class="ynt">燕南天</td>
            <td class="ynt">40</td>
            <td class="ynt">19800</td>
        </tr>
    </table>
    <script>
        let trs = document.querySelectorAll('tr');
        console.log(trs);
        trs.item(0).style.backgroundColor = 'lightblue';
        trs.item(1).style.backgroundColor = 'grey';
        trs.item(2).style.backgroundColor = 'red';

        let trend = document.querySelector('.tr');
        console.log(trend);
        let td1 = trend.querySelector('#end');
            td1.style.backgroundColor = 'yellow';
        let td2 = trend.querySelectorAll('.ynt');
        for (let i = 0;i < td2.length;i++){
            td2[i].style.backgroundColor = 'pink';
        }
    </script>
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2 , 实战: 在线聊天机器人

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线某服</title>
    <style>
        div:nth-child(1){
            width: 400px;
            height: 500px;
            /*background-color: lightsalmon;*/
            color: #333333;
            box-shadow: 1px 1px 1px #808080;
            border: 1px solid grey;
        }
        div:nth-child(2){
            width: 400px;
            height: 100px;
            /*background-color: lightyellow;*/
            /*box-shadow: 2px 2px 2px #808080;*/
            border: 1px solid grey;
            border-top: 0;
        }
        textarea {
            margin-left: 1px;
            width: 395px;
            height: 68px;
            overflow: auto;
            border: none;
            resize: none;
        }
        .text:focus {
            /*border: 0;*/
            outline: none;
        }
        .button {
            /*border: none;*/
            margin-left: 285px;
        }
        button {
            margin-right: 10px;
        }
        button:hover{
            cursor: pointer;
            background-color: lightcoral;
        }
        ul{
            margin-top: 10px;
            list-style: none;
            line-height: 1.5rem;
            overflow: hidden;
            padding: 15px;
        }
        h3 {
            margin: 0;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <div>
        <h3>在线某服</h3>
        <ul>
            <li></li>
        </ul>
    </div>
    <div>
    <textarea class="text" cols="50" rows="5"></textarea>
        <script >
            document.getElementsByTagName('textarea')[0].focus();
        </script>
    <button type="button" class="button">关闭</button>
    <button type="button" class="button1">发送</button>
    </div>
</div>
<script >
    let button = document.getElementsByClassName('button1')[0];
    let text = document.getElementsByClassName('text')[0];
    let list = document.getElementsByTagName('ul')[0];
    let sum = 0;

    button.onclick = function () {
        if (text.value.length ===0){
            alert('你写啥我能看见？你特么在逗我？！');
            return false;
        }
        let userComment = text.value;
        text.value = '';

        let li = document.createElement('li');
        li.innerHTML = userComment;
        let userPic = '<img src="inc/gyy.jpg" width="30" style="border-radius: 50%">';
        li.innerHTML = userPic + '' +userComment;
        list.appendChild(li);
        sum += 1;

        setTimeout(function () {
            let info = [
                '你有啥事儿呀，跟姐说，姐帮你~',
                '除了退货、退钱，都可以商量！',
                '快点说，别墨迹，老娘还要刷抖音',
                '忙着呢，等姐空了再回复你吧。。。',
                '好的，约呀，你在哪里？'
            ];
            let temp = info[Math.floor(Math.random()*4)];
            let reply = document.createElement('li');
            let kefuPic = '<img src="inc/sl.jpg" width="30" style="border-radius: 50%">';
            reply.innerHTML = kefuPic + '' + '<span style="color: red">' + temp + '</span>';
            list.appendChild(reply);
            sum +=1;
        },2000);
        if (sum > 11){
            list.innerHTML = '';
            sum = 0;
        }
    }
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

说明：实现了1、自动获取文本焦点；实现了2、reply自动回复；实现了3、简约风格；

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

PDO第二课：mysqli剩余的操作实例，pdo演示、创建和流程控制；本课程老师总结的虽简单，不多练习还是不行的 2018年8月30日 22:26

2018-09-06 15:40:13