JavaScript教程之web前端篇：JavaScript基础篇（易懂小(2)

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之web前端篇：JavaScript基础篇（易懂小(2)

<body>
    <ul id = 'box'></ul>
    <script type = 'text/javascript'>
        //通过ID获取单个节点对象
        var ul = document.getElementById('box');
        var li1 = document.createElement('li');
        var li2 = document.createElement('li');

        //innerText 只能设置文本格式内容
        li2.innerText = '你好';
        //innerHTML 可以设置HTML格式，如标签
        li1.innerHTML =`<a href='#'>123</a>`;



        //给li1子标签(a)添加属性
        li1.children[0].style.color = 'blue';
        li1.children[0].style.fontSize = '28px';

        //给li2标签添加属性（也就是li）color
        // console.log(li2);//li
        li2.style.color = 'red';


        //将创建好的标签加入ul里。
        ul.appendChild(li1);
        ul.appendChild(li2);


        //将li2更改text值，并在li1前面，插入ul标签li2,
        li2.innerHTML = '第一个';
        ul.insertBefore(li2,li1);
        //将li2标签移除
        ul.removeChild(li2);
    </script>
</body>

2.8 DOM中heigh,clientHeight,offsetHeight属性

直观的理解一波

clientHeight: 样式的height + 上下padding(内边距区域)
offsetheight:样式的height+上下padding+上下border-width。
height :样式高度的height，但在浏览器显示undefined，通过style.height能设置高度，但无法获取。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 300px;
            padding: 10px;
            border: 1px solid red;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        var box = document.getElementById("box");
        console.log(box.height);//undefined 
        console.log(box.offsetHeight);//322
        console.log(box.clientHeight);//320
    </script>
</body>
</html>

3.事件

事件是您在编程时系统内发生的动作或者发生的事情，系统通过它来告诉您在您愿意的情况下您可以以某种方式对它做出回应。例如：如果您在网页上单击一个按钮，您可能想通过显示一个信息框来响应这个动作。

主要事件有：

事件	说明
onclick	鼠标单击事件
onmouseover	鼠标经过事件
onmouseout	鼠标移开事件
onchange	文本框内容改变事件
onselect	文本框内容被选中事件
onfocus	光标聚焦事件
onblur	光标失焦事件
onload	网页加载事件

关于事件相关学习参照：https://www.cnblogs.com/majj/p/9102401.html

4.应用

1.遍历数据操作页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li p.name{
            color:red;
        }
        li span.price{
            color:blue;
        }
    </style>
</head>
<body>
        <ul id="box"></ul>
        <script>
        //通过ID获取单个节点对象
        var box = document.getElementById('box');
        var data = [
                {id:1,name:'小米8',subName:'你真好',price:98},
                {id:2,name:'小米6',subName:'你真好2',price:948},
                {id:3,name:'小米4',subName:'你真好3',price:100},
                {id:4,name:'小米2',subName:'你真好4',price:928},
                {id:5,name:'小米10',subName:'你真好5',price:918}
                ];
        //遍历data，以便操作数组每个元素
        for (var i=0;i<data.length;i++){
            //创建标签li  创建节点
            var li = document.createElement('li');
            //插入数据
            li.innerHTML = `<p class="name">${data[i].name}</p>
            <p class="subName">${data[i].subName}</p>
            <span class="price">${data[i].price}元</span>
            `;
            //提交数据
            box.appendChild(li);
        }
    </script>
</body>
</html>

2.切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id = 'box'>
        <img src="images/1.jpg" alt="" id = "imgBox">
    </div>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
    <script>
        //获取id = 'box'
        var imgBox = document.getElementById('imgBox');
        //获取id = 'next'
        var next = document.getElementById('next');
        //获取id = 'prev'
        var prev = document.getElementById('prev');
        var num = 1;
        //事件点击next,此时执行nextImg函数
        next.onclick = function () {
            nextImg();

        };
        //nextImg函数增加num值获得下一张图片，最后一张做判断，返回第一张
        function nextImg() {
            num ++;
            if (num===5){
                num = 1;
            }
            imgBox.src = `images/${num}.jpg`;

        }
        //事件点击prev 此时执行prevImg()函数
        prev.onclick = function(){
          prevImg();
        };
        //prevImg函数减少num值获得上一张图片，当num=0返回最后一张图片
        function prevImg() {
            num --;
            if (num===0){
                num = 4;
            }
            imgBox.src = `images/${num}.jpg`;
        }
    </script>
</body>
</html>

栏目列表