第三课 js美化网页

作者: Arroganter | 来源:发表于2018-12-20 10:59 被阅读5次

再议js对象

对象的分类：

1.内建对象
- 内建对象指由ES标准定义的对象，任何对ES标准的实现都可以使用这些对象
- 比如：Math String Date
2.宿主对象
- 宿主对象指由JS运行环境为我们提供的对象，目前对于我们来说就是指浏览器为我们提供的对象
- window document HTMLDivElement......
3.自定义对象
- 由我们自己定义的对象

document.getElementById

通过id获得html元素对象，参数是html文档中的id名字

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>

    <script>

        window.onload = function (){

            var div = document.getElementById('div');
            var p = document.getElementById('p');
            var h1 = document.getElementById('h1');

            alert(div);
            alert(p);
            alert(h1);

        };
    </script>

</head>

<body>
<p id="p">hhhhhh</p>
<div id="div">zzzzzzzzzzz</div>
<h1 id="h1">vvvvvvvvvvv</h1>
</body>
</html>

image.png

HTML 的属性操作：读、写

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
/*
    HTML 的属性操作：读、写
        属性名：
        属性值：

        读操作：获取、找到
        元素.属性名

        写操作：“添加”、替换、修改
        元素.属性名 = 新的值

*/
window.onload = function (){
    var oBtn = document.getElementById('btn1');
    var oText = document.getElementById('text1');
    var oSelect = document.getElementById('select1');

    oBtn.onclick = function (){
        // alert(oBtn.value);        // '按钮'
        // alert( oText.value );
        // alert( oSelect.value );

        // 字符串连接
        // oText.value    oSelect.value
        // '刘伟' +  '北京'     =>    '刘伟北京'
        // '刘伟' + '在' + '北京'     =>    '刘伟在北京'

        alert(oText.value + ' 在 ' + oSelect.value);

        //oBtn.value = 'button';
        //oText.value = 123;
        //oText.value = oSelect.value;
    };
};
</script>

</head>

<body>

<input id="text1" type="text" />
<select id="select1">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="杭州">杭州</option>
</select>
<input id="btn1" type="button" value="按钮" />

</body>
</html>

innerHTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
/*
    HTML 的属性操作：读、写
        属性名：
        属性值：

        读操作：获取、找到
        元素.属性名

        写操作："添加？"、替换、修改
        元素.属性名 = 新的值

        oP.innerHTML                    => 读取p里面所有的html代码
        oP.innerHTML = 123;        => 替换p里面所有的html代码

*/
window.onload = function (){
    var oBtn = document.getElementById('btn1');
    var oText = document.getElementById('text1');
    var oP = document.getElementById('p1');

    oBtn.onclick = function (){
        // alert( oP.innerHTML );
        oP.innerHTML = oText.value;
    };
};
</script>

</head>

<body>

<input id="text1" type="text" />
<input id="btn1" type="button" value="按钮" />
<p id="p1">这是一些文字</p>

</body>
</html>

style属性

html文档中的每一个元素都是一个对象,文档的每个元素都有一个属性style。通过style属性可以设置元素的任意css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function (){
            var oBtn1 = document.getElementById('btn1');
            var oBtn2 = document.getElementById('btn2');
            var oBtn3 = document.getElementById('btn3');
            var oBtn4 = document.getElementById('btn4');
            var oP = document.getElementById('p1');
            var num = 14;

            oBtn1.onclick = function (){
                num -= 2;
                oP.style.fontSize = num + 'px';

            };
            oBtn2.onclick = function (){
                num += 2;
                oP.style.fontSize = num + 'px';

            };

            oBtn3.onclick = function (){
                oP.style.width = '400px';
                oP.style.border = '10px solid black';
                oP.style.backgroundColor = 'red';
                oP.style.padding = '20px';
                oP.style.color = 'yellow';
            };
            oBtn4.onclick = function (){
                oP.style.width = '500px';
                oP.style.border = '5px solid black';
                oP.style.backgroundColor = 'yellow';
                oP.style.padding = '10px';
                oP.style.color = 'red';
            };
        };
    </script>

</head>
<body>

<input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<input id="btn3" type="button" value="红" />
<input id="btn4" type="button" value="黄" />
<p id="p1" >
    html文档中的每一个元素都是一个对象,文档的每个元素都有一个属性style。通过style属性可以设置元素的任意css样式
</p>

</body>
</html>

修改元素类名 className

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oBtn3 = document.getElementById('btn3');
    var oBtn4 = document.getElementById('btn4');
    var oP = document.getElementById('p1');
    var num = 14;

    oBtn1.onclick = function (){
        num -= 2;
        oP.style.fontSize = num + 'px';
        // JS 不允许出现"-"
        // padding-top        paddingTop
        // margin-left        marginLeft
    };
    oBtn2.onclick = function (){
        // num = num + 2;
        num += 2;

        oP.style.fontSize = num + 'px';
        // JS 不允许出现"-"
    };

    oBtn3.onclick = function (){
        // oP.class = 'red';
        // class => className
        oP.className = 'red';
    };
    oBtn4.onclick = function (){
        // oP.class = 'red';
        // class => className
        oP.className = 'yellow';
    };
};
</script>
<style>
.red { width:400px; border:10px solid #333; background:red; padding:20px; color:yellow; }
.yellow { width:500px; border:5px solid #333; background:yellow; padding:10px; color:red; }
</style>
</head>

<body>

<input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<input id="btn3" type="button" value="红" />
<input id="btn4" type="button" value="黄" />
<p id="p1" style="font-size:16px;">10月28日晚，中央纪委监察部官网发布消息，贵州省委常委、遵义市委书记廖少华因涉嫌严重违纪违法接受组织调查。3天后中组部宣布对其免职。廖成为十八大后中纪委一连串"打虎"行动中第十一位落马的副省部级以上高官。</p>

</body>
</html>

切换图片(数组应用)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
    var oImg = document.getElementById('img1');
    var arr = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
    var num = 0;

    oImg.onclick = function (){
        // num = num + 2;
        // num += 2;
        num ++;
        if(num == arr.length){
            num = 0;
        }
        // alert( arr[num] );
        oImg.src = arr[num];
    };

};

</script>
</head>

<body>

<img id="img1" src="img/1.jpg" width="400" height="400" />

</body>
</html>

获取元素的第二种方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
        var oUl = document.getElementById('list');

 var aLi = oUl.getElementsByTagName('li');
                            // aLi => [ li, li, li ]     元素的集合
                            aLi.length                                3
                            aLi[0]

*/
window.onload = function (){
    //    var oUl = document.getElementById('list');
    var oUl = document.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');

    // document.getElementsByTagName('li');

    // alert( aLi.length );
};
</script>
</head>

<body>

<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>

<ol>
    <li></li>
    <li></li>
</ol>

</body>
</html>

cssText

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<style>
div { width:100px; height:100px; border:1px solid #333; }
</style>

</head>

<body>

<div id="div1">123</div>

<input id="btn1" type="button" value="按钮" />

<script>
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn1');

oDiv.onclick = function (){
    // oDiv.style.width = '200px';
    oDiv.style.cssText = ' width:200px; height:200px; ';
};
oBtn.onclick = function (){
    // oDiv.style.width = '100px';
    oDiv.style.cssText = '';
};

</script>

</body>
</html>

自动生成一组新闻

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
window.onload = function (){
    var oBtn = document.getElementById('btn1');
    var oUl = document.getElementById('list');
    var arr = [
        '山西省委附近多次爆炸 官方称尚不确定是恐怖袭击',
        '甘肃张掖明令禁止转基因 书记:无力辨别只能禁止',
        '多地制定雾霾预案限行限排被批治标不治本',
        '韩媒抱怨中国雾霾侵袭韩国 称其为"黑色灾难" ',
        '伊朗革命卫队高官在叙利亚当"志愿者"被杀(图)'
    ];

    oBtn.onclick = function (){

        // oUl.innerHTML = '';

            for( var i=0; i<arr.length; i++ ){
                oUl.innerHTML += '<li>' + arr[i] + '</li>';
            }
    };
};
</script>

</head>

<body>

<input id="btn1" type="button" value="自动生成5条新闻" />
<ul id="list" style="border:1px solid red;"></ul>

</body>
</html>

this指针

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>

// this    : 这个
// this： 指的是调用 当前 方法（函数）的那个对象

function fn1(){
    // this
}
// fn1();            this => window
// oDiv.onclick = fn1;            this => oDiv
/*
oDiv.onclick = function (){
    fn1();                    fn1() 里的this => window
};

<div onclick="fn1();"></div>     fn1(); 里的 this 指的是 window
*/

// alert( this );        // object window

// window 是 JS “老大”
// window.alert( this );

function fn1(){
    alert( this );                // window
}
// fn1();
// window.fn1();
</script>

</head>

<body>

<input id="btn1" type="button" value="按钮" />

<input id="btn2" type="button" onclick=" fn1(); " value="按钮2" />

<script>
var oBtn = document.getElementById('btn1');
// oBtn.onclick = fn1;
oBtn.onclick = function (){
    // this
    fn1();
};
</script>

</body>
</html>

this应用

写一段js，给li里填上今天，明天，后天，点击某个li，弹出该li里面的文本

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li { height:30px; border-bottom:1px solid #333; }
</style>
<script>
window.onload = function (){
    var oUl = document.getElementById('list');
    var aLi = oUl.getElementsByTagName('li');
    var arr = [ '今天', '明天', '后天' ];
    var len = arr.length;

    for( var i=0; i<len; i++ ){

        aLi[i].innerHTML = arr[i];

        aLi[i].onclick = function (){
             alert(this.innerHTML);
        };
    }
};
</script>
</head>

<body>

<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>

</body>
</html>

自定义属性

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
    HTML 标签属性、
    自定义属性
*/
window.onload = function (){
    var aBtn = document.getElementsByTagName('input');

    // aBtn[0].abc = 123;            // 自定义属性

    // alert( aBtn[0].abc );
    // aBtn[0].abc = 456;

    // JS 可以为任何HTML元素添加任意个 自定义属性

    for( var i=0; i<aBtn.length; i++ ){
        aBtn[i].abc = 123;
        aBtn[i].xyz = true;
    }

};
</script>
</head>

<body>

<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />

</body>
</html>

索引值

//我当前点击的按钮是这一组按钮中的第几个按钮

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
    var aBtn = document.getElementsByTagName('input');

    for( var i=0; i<aBtn.length; i++ ){

        aBtn[i].index = i;            // 自定义属性（索引值）

        aBtn[i].onclick = function (){

            alert( this.index );

        };
    }
};
</script>
</head>

<body>

<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />

</body>
</html>

索引值应用—选项卡

第一步：制作三个点击按钮：（其中一个按钮为选中状态）

　<button class="active">1</button>
<button>2</button>
<button>3</button>

第二步：为按钮加简单样式：

　　　　<style>
　　　　　　button {background: white ;}
　　　　　　.active{background: yellow;}
　　　　</style>

第三步：加事件，即点击之后按钮变为yellow；

　　　　<script type="text/javascript">
　　　　　　window.onload=function () {
　　　　　　　　var aBtn=document.getElementsByTagName("button");
　　　　　　　　var i=0;
　　　　　　　　for(i=0;i<aBtn.length;i++){
　　　　　　　　　　aBtn[i].onclick=function () {
　　　　　　　　　　　　for(i=0;i<aBtn.length;i++){
　　　　　　　　　　　　aBtn[i].className='';
　　　　　　　　　　　　}
　　　　　　　　　　　　this.className="active"
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　</script>

因此选项卡的头部就完成了，接下来做选项卡的下面部分；
　　第四步：在下面加内容，以及为其内容加样式，并设置第一部分内容显示，其他内容隐藏；

　　　　<div style="display:block">111</div>
　　　　<div>222</div>
　　　　<div>333</div>

第五步：同样的为内容加点击事件：

<script type="text/javascript">
　　　　　　window.onload=function () {
　　　　　　　　var aBtn=document.getElementsByTagName("button");
　　　　　　　　var aDiv=document.getElementsByTagName("div");
　　　　　　　　var i=0;
　　　　　　　　for(i=0;i<aBtn.length;i++){
　　　　　　　　　　aBtn[i].index=i;
　　　　　　　　　　aBtn[i].onclick=function () {
　　　　　　　　　　　　for(i=0;i<aBtn.length;i++){
　　　　　　　　　　　　aBtn[i].className='';
　　　　　　　　　　　　aDiv[i].style.display='none';
　　　　　　　　　　　　}
　　　　　　　　　　　　this.className="active";
　　　　　　　　　　　　aDiv[this.index].style.display="block";
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　</script>

这样选项卡就完成了。

效果原理为：
　　　　1、点击按钮时，改变class的style.display
　　　　2、选项卡的头部标签：
　　　　　　所有按钮的className都为空
　　　　　　让当前按钮的className为active
　　　　　　（注意this的使用）
　　　　3、选项卡内容
　　　　　　所有div的display都为none
　　　　　　让当前div的display为block
　　　　　　（注意当前编号的使用即aBtn[i].index=i;）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #ccc;
            border: 1px solid red;
            display: none;
        }

        button {
            background: white;
        }

        .active {
            background: yellow;
        }
    </style>
</head>
<body>
<button class="active">1</button>
<button>2</button>
<button>3</button>
<div style="display: block">111111111</div>
<div>222222222</div>
<div>333333333</div>
<script>
    //即点击之后按钮变为yellow
    window.onload = function () {
        var btns = document.getElementsByTagName('button');
        var divs = document.getElementsByTagName('div');
        for(var i = 0; i < btns.length; i++)
        {
            btns[i].index = i;
            btns[i].onclick = function () {
                //将所有按钮的背景色清空
                //隐藏所有的div
                for(var j = 0; j < btns.length; j++)
                {
                    btns[j].className = '';
                    divs[j].style.display = 'none';
                }
                //将当前按钮的背景色变黄
                this.className = 'active';
                //显示和当前按钮对应的div
                //当前被点击的按钮是这组里的第?个按钮，
                divs[this.index].style.display = 'block';
            }
        }
    }
</script>
</body>
</html>

综合实战

实现QQ好友列表

<ul id="friend">
    <li>
        <h2>我的好友</h2>
        <ul>
            <li>王一一</li>
            <li>李文化</li>
            <li>高发展</li>
        </ul>
    </li>
    <li>
        <h2>我的同事</h2>
        <ul>
            <li>黄腾达</li>
            <li>刘和谐</li>
            <li>邢如意</li>
            <li>沈从文</li>
            <li>张曼玉</li>
        </ul>
    </li>
    <li>
        <h2>我的同学</h2>
        <ul>
            <li>郭文明</li>
            <li>尹调整</li>
            <li>郑安全</li>
        </ul>
    </li>
</ul>

      *{ margin:0; padding:0; list-style:none; font-family:"微软雅黑";}
        #friend{ width:300px; margin:50px auto 0; border-left:1px solid #ccc; border-right:1px solid #dadada;}
        #friend h2{ width:270px; height:35px; line-height:35px; padding-left:30px; background: #74a400; color:#fff; font-size:16px; font-weight:100; cursor:pointer;}

        #friend li{ margin-bottom:1px;}
        #friend li ul li{ width:270px; padding-left:30px; height:30px; line-height:30px; border-bottom:1px solid #ccc; cursor:pointer;}

        #friend li ul .active{ background:#FFC;}
        #friend li ul{ display:none;}
        #friend li ul.hover{ display:block;}

window.onload = function (){
            var oUl = document.getElementById('friend');

            var aH = oUl.getElementsByTagName('h2');
            var aUl = oUl.getElementsByTagName('ul');

            for ( var i=0; i < aH.length; i++ ) {

                aH[i].index = i;

                aH[i].onclick = function () {

                    if ( aUl[this.index].className == '' ) {
                        aUl[this.index].className = 'hover';
                    } else {
                        aUl[this.index].className = '';
                    }

                };
            }
            for ( var j=0; j<aUl.length; j++ ) {
                var aLi = aUl[j].getElementsByTagName('li');
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].onmouseover = function () {
                        this.className = 'active';
                    };
                    aLi[i].onmouseout = function () {
                        this.className = '';
                    };
                }
            }
        }

谢谢