Blogger Information
Blog 35
fans 0
comment 0
visits 22242
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js基础知识(选择器的使用和在线机器人)--2018年9月26日17:58:21
Hi的博客
Original
583 people have browsed it

在js中选择元素的方法有很多种.以下我来演示关于如何使用js中的id,css,标签等选择器来选中想要获取的数据

以下是我的代码

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器和在线聊天机器人</title>
</head>
<style>
    ul{
        padding:0;
        margin: 0;
        list-style-type: none;


    }
    .ul li{
        width: 30px;
        float: left;
        margin-left: 5px;
        border: 1px solid black;
        border-radius: 50%;
        text-align: center;
    }
    .box {
        width: 450px;
        height: 650px;
        background-color: lightskyblue;
        margin: 30px auto;
        color: #333;
        box-shadow: 2px 2px 2px #808080
    }

    h2 {
        text-align: center;
        margin-bottom: -10px;
    }
    .xbox {
        width: 400px;
        height: 500px;
        border: 4px double green;
        background-color: #efefef;
        margin: 20px auto 10px;
    }

   div ul {
        list-style: none;
        line-height: 2em;
        overflow: hidden;
        padding: 15px;
    }

    table {
        width: 90%;
        height:80px;
        margin: auto;
    }

    textarea{
        border: none;
        resize: none;
        background-color: lightyellow;

    }
    .button {
        width: 60px;
        height: 40px;
        background-color: seagreen;
        color: white;
        border: none;

    }
    .button:hover {
        cursor: pointer;
        background-color: orange;
    }
</style>
<body>
<ul class="ul">
    <li id="a1">01</li>
    <li>02</li>
    <li id="a2">03</li>
    <li class="b1 b2">04</li>
    <li id="a3">05</li>
    <li class="b2">06</li>
    <li>07</li>
    <li class="b3">08</li>
    <li class="b4">09</li>
    <li id="a4">10</li>
</ul>
<br>
<hr>
<div class="box">
    <h2>在线***</h2>
    <div class="xbox">
        <ul class="UL">
            <li></li>
        </ul>
    </div>
    <table>
        <tr>
            <td align="right"><textarea cols="50" rows="4" name="text"></textarea></td>
            <td align="left"><button type=button class="button">发送</button></td>
        </tr>
    </table>
</div>
<script>
    //通过函数来遍历获取到的id
    function aid() {
        let id ={} //创建一个空元素来保存获取到的id
        for (let i=0; i <arguments.length; i++){
            let a= arguments[i]; //获取输入的id
            let b = document.getElementById(a);
            if (b === null) {
                throw new Error("没有查到数据"+a); //抛出异常
            }
            id[a]=b;
        }
        return id;
    }
    let id = aid('a1','a2','a3');
    for (let c in id){
        id[c].style.background = 'red';
    }
    //使用class 选择器
    let b1 = document.getElementsByClassName('b1 b2')[0];//支持一个li中的多个class名称
    b1.style.background = 'blue';
    document.getElementsByClassName('ul')[0] // 直接在元素上调用,一般用户父级元素
        .getElementsByClassName('b3')[0]
        .style.background = 'blue';

    //使用标签名选择器
     let ul= document.getElementsByTagName('ul')[0];
    console.log('ul');
    let li2 = ul.getElementsByTagName('li').item(1);
    li2.style.background = 'green'
    // let li1 = ul.getElementsByTagName('li');
    // for (let i=0;i<li1.length;i++) {
    //     li1[i].style.background = 'red';
    // }

    //使用css选择器
    // let li3= document.querySelectorAll('li');//使用css中的标签选择器
    // for (let i=0; i<li3.length;i++){
    //     li3[i].style.background = 'yellow';
    // }
    let ul1 = document.querySelector('.ul') //使用css中的class选择器
    console.log(ul1);
    let li5 = ul1.querySelectorAll('.b4');
    console.log(li5);
    li5[0].style.backgroundColor = 'red';
</script>
<script>
    //获取到页面中的按钮,文本域,对话内容区
    let btn = document.getElementsByTagName('button')[0];
    let text = document.getElementsByName('text')[0];
    let list = document.getElementsByClassName('UL')[0];
    let sum = 0;

    //添加按钮点击事件,获取用户数据并推送到对话窗口中
    btn.onclick = function () {
        //获取用户提交的内容
        if (text.value.length === 0) {
            alert('请输入内容');
            return false;
        }
        let userComment = text.value;

        //立即清空用户信息区
        text.value = '';

        //创建一个新节点li
        let li = document.createElement('li');
        li.innerHTML = userComment;  //将用户输入的内容添加到新节点中
        let userPic = '<img src="images/1.jpg" width="30" style="border-radius:50%">'; // 设置用户头像
        li.innerHTML = userPic + ' ' + userComment; // 将用户头像与用户的聊天内容合并
        list.appendChild(li);	//发送聊天内容,实际上就是将新节点插入到对话列表中
        sum += 1;	// 聊天记录自增1

        //设置定时器,默认2秒后会自动回复
        setTimeout(function(){
            let info = [
                '您输入的内容无法识别请重新输入',
                '您的问题暂时没有查到相关答案',
                '如不满意请转人工***',
                '就没有人工***可以转哈哈',
                '想投诉没门,我还没有设置投诉页面呢'
            ];
            let temp = info[Math.floor(Math.random()*4)];//在数组中随机抽取一句话
            let reply = document.createElement('li');
            let kefuPic = '<img src="images/2.jpg" width="30" style="border-radius:50%; margin-left:100px">';
            reply.innerHTML = kefuPic + ' ' + '<span style="color:red">'+temp+'</span>';


            list.appendChild(reply);
            sum += 1;

        },2000);

        // 当聊天记录达到10条时清空窗口
        if (sum > 10) {
            list.innerHTML = '';
            sum = 0;
        }
    }


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

运行实例 »

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


Correction status:Uncorrected

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