javascript元素获取_简单在线对话_2018年9月14日 - js+jqurey

Home > List of blog posts > javascript元素获取_简单在线对话_2018年9月14日

Blogger Information

Blog 36

fans 1

comment 0

visits 32371

Special Recommendation

More>

Related recommendations

一、id,class,标签和css选择器获取元素的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id,class,标签和css选择器获取元素的方法</title>
</head>
<body>
<div id="item1">
    <ul class="class1">
        <li>列表项01</li>
        <li>列表项02</li>
        <li>列表项03</li>
        <li class="pink">列表项04</li>
        <li>列表项05</li>
    </ul>
</div>
<div id="item2">
    <ul class="class2">
        <li>列表项01</li>
        <li class="pink">列表项02</li>
        <li>列表项03</li>
        <li class="pink">列表项04</li>
        <li>列表项05</li>
    </ul>
</div>
<div id="item3">
    <ul class="class3">
        <li class="pink">列表项01</li>
        <li>列表项02</li>
        <li class="three">列表项03</li>
        <li>列表项04</li>
        <li class="five linwu">列表项05</li>
    </ul>
</div>
<script>
    //1.通过id来选择元素
    let item1 = document.getElementById('item1');
    // 设置选中元素背景
    item1.style.backgroundColor = 'red';

    //通过函数来获取所有id
    function getItem() { //参数是id字符串
        let getitems = {}; //保存获取到的DOM对象元素
        for(let i=0;i < arguments.length;i++) {//arguments 参数
            let id = arguments[i];
            let item = document.getElementById(id);//根据id字符串查找
            if(item === null){
                throw new Error ("没有这个元素"+id);//抛出异常
            }

            getitems[id] = item; //将获取到的元素保存到结果集中
        }
        return getitems;
    }

    //根据id获取页面指定元素，返回一个关联数组对象，键名就是id
    let items = getItem('item1','item2','item3');
    console.log(items);
    for(let key in items){
        items[key].style.backgroundColor='green';
    }

// 2.根据class来获取元素
let class1 = document.getElementsByClassName('class1')[0];
    console.log(class1);
    class1.style.backgroundColor='red';

    document.getElementsByClassName('class3').item(0)
        .getElementsByClassName('three')[0]
    .style.backgroundColor = 'cyan';

    let five = document.getElementsByClassName('five linwu')[0];
    console.log(five);
    five.style.backgroundColor = 'pink';


    //根据标签来选择
    let ul = document.getElementsByTagName('ul')[1];
    ul.style.backgroundColor = 'blue';
    let ul1 = document.getElementsByTagName('li').item(3);
    ul1.style.backgroundColor = 'wheat';

    //通过标签获取所有li元素
    let li_lists = document.getElementsByTagName('li');
    // console.log(document.getElementsByTagName('li').length);
    console.log(li_lists);
    for(let t=0;t<li_lists.length;t++){
        li_lists[t].style.backgroundColor = 'lightgreen';
    }

    //item()该方法也可用在元素对象中
    let ul3 = document.getElementsByTagName('ul').item((0));
    let item3 = ul3.getElementsByTagName('li').item(2);
    item3.style.backgroundColor = 'skyblue';


// 4.根据css选择器获取元素
    let lists1 = document.querySelectorAll('li');//根据标签选择器: li 获取
    console.log(lists1);
    lists1[0].style.backgroundColor = 'coral';
    lists1.item(1).style.backgroundColor = 'lightcoral';

    let ul5 = document.querySelector('ul'); //返回满足条件第一个
    // console.log(ul5);

    let ul6 = document.querySelectorAll('ul').item(2);
    ul6.style.backgroundColor = 'black';
    let li6 = ul6.querySelectorAll('li')[4];
    li6.style.backgroundColor = 'red';

    // 根据class .来选择
    let li7 = document.querySelectorAll('.pink');
    console.log(li7);
    for(let e=0;e<li7.length;e++){
        li7[e].style.backgroundColor='pink';
    }


</script>



</body>
</html>

运行实例 »

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

二、模拟智能在线对话系统实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM实战:模拟智能在线***系统 </title>
    <style>
        div:nth-child(1){
            width:600px;
            min-height:550px;
            background: #efefef;
            margin: 30px auto;
            color: #444;
            box-shadow: 5px 5px 5px #e0e0e0;
        }
        h2{
            text-align: center;
            margin-bottom: -10px;
            color:#888 ;
            font-size:16px;
            padding-top: 20px;
        }
        div:nth-child(2){
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 20px auto 10px;
            background: #fefefe;
            border-radius: 5px;
            overflow: hidden;
        }
        ul{
            list-style: none;
            line-height: 2em;
            overflow: hidden;
            padding: 15px;
        }
        div:nth-child(3){
            margin: 20px auto;
            width: 500px;
            text-align: center;
        }
        div:nth-child(3) button{
            width: 100px;
            height:35px;
            float: right;
        }
        button:hover{
            background:orange;
        }
        textarea{
            width: 500px;
            resize: none;
            border-radius: 5px;

        }
        img{
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div>
    <h2>在线***</h2>
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <div>
        <p><textarea name="text" cols="50" rows="5"></textarea> </p>
        <p><button type="button">发送</button></p>
    </div>

</div>

<script>
    //获取元素
    let btn = document.getElementsByTagName('button')[0];
    let text = document.getElementsByName('text')[0];
    let list = document.getElementsByTagName('ul')[0];
    let num = 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.style = 'line-height: 40px;\n' +
            '    height: 40px;\n' +
            '    border-radius: 20px;\n' +
            '    width: 90%;\n' +
            '    margin-left: 50px;';

        //用户头像
        let userPic = '<img style="float: left; margin-left:-20px;" src="img/n.jpg" width="30" style="border-radius: 50%">';
        li.innerHTML = userPic+ '  '+'<span style="margin-left:30px;">'+userComment+'</span>';
        list.appendChild(li);  //将用户信息添加到聊天窗口中
        num +=1;

        //设置定时器, 自动回复
        setTimeout(function () {
            //自动回复信息
            let info = [
                '有什么事',
                '找我干嘛',
                '说明问题',
                '要买什么',
                '天天开心'
            ];

            let tmp = info[Math.floor(Math.random()*4)];
            let replay = document.createElement('li');
            replay.style = 'color: red;\n' +
                '    line-height: 40px;\n' +
                '    height: 40px;\n' +
                '    border-radius: 20px;\n' +
                '    width: 90%;\n' +
                '    margin-left: 50px;';
            let kfpic = '<img style="float: left;margin-left:-20px" src="img/g.jpg" width="30" style="border-radius: 50%" src="img/g.jpg" width="30" style="border-radius: 50%">';
            replay.innerHTML = kfpic + '  '+'<span style="color: red;padding-left:20px;">'+tmp+'</span>';
            list.appendChild(replay);
            num+=1;
            },2000);
//清屏
        if(num > 10){
            list.innerHTML = '';
            num = 0;
        }
    }
    //回车Enter 键绑定按钮
    document.onkeydown = function (event) {
        let e = event || window.event;
        if (e && e.keyCode == 13) { //回车键的键值为13
            btn.click(); //调用登录按钮的登录事件
        }
    };


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

运行实例 »

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

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

::before和::after伪元素的用法

2018-08-18 16:17:03