07_JS星座运势、数组方法、DOM结点关系和操作

下拉菜单的事件 `onchange`

sele.onchange = function(){}

当改变的时候触发事件

例：星座运势

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>星座运势</title>
    <style type="text/css">
        p,h2{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 278px;
            height: 181px;
            border: 1px solid #D2E1F1;
            margin: 0 auto;
        }
        a{
            text-decoration: none;
            color: #0873c0;
        }
        .clearfix:after{
            content: '';
            display: block;
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear: both;
        }
        .clearfix{
            zoom:1;
        }
        .lucktab{
            height: 38px;
            line-height: 38px;

        }
        .lucktab h2{
            font-size: 14px;
            text-indent: 8px;
        }
        .luck{
            width: 240px;
            height: 50px;
            padding: 0 19px;
        }
        .luleft{
            float: left;
        }
        .luleft a{
            display: block;
            width: 50px;
            height: 50px;
            background: url("images/astroIcon.png") no-repeat;
        }
        .luright{
            width: 180px;
            height: 50px;
            float: right;
        }
        .luright .yunshi{
            width: 180px;
            height: 18px;
            margin-top: 6px;
        }
        .luright .yunshi p{
            width: 65px;
            height: 18px;
            line-height: 18px;
            float: left;
            font-size: 12px;
            font-family: "simsun";
        }
        .luright .yunshi .yuanshibg{
            float: left;
            width: 80px;
            height: 13px;
            background: url("images/yunshi.png") no-repeat;
            margin-top: 2px;
        }
        .luright .yunshi .yunshicur{
            width: 48px;
            height: 13px;
            background: url("images/yunshi.png") no-repeat left bottom;
        }
        .ft{
            width: 240px;
            height: 90px;
            overflow: hidden;
            padding: 0 19px;
        }
        .ft p{
            margin-top: 8px;
            height: 82px;
            line-height: 26px;
            font-family: "simsun";
            font-size: 14px;
            color: #323f5a;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var yunshis = [6,8,9,2,1,10,3,7,5,4,7,8];
            var details = [
                    "今天的你要注意跟伴侣相处的态度不要太强势，否则会影响你们的感情，财运不错，可以抓住机会小赚...",
                    "今天的你工作会比较辛苦，注意劳逸结合，遇到难题会有前辈帮助你，人际交往中你可能比较强势自我...",
                    "今天的你在人际交往中可能会吃亏，小心被他人利用，在工作中注意不要太过自我小心会冒犯到上司，...",
                    "今天的你工作中可能比较忙碌，上司给你安排了大量的工作，这对你来说是个考验，今天你会感到伴侣...",
                    "今天的你魅力十足，周围有一群人围绕着你让你分外开心，注意不要太忘乎所以，外出时注意安全，可...",
                    "今天你的心绪不佳，注意小心跟恋人发生争执，可以转移注意力，外出散心或者学习一项新的技能都是...",
                    "今天的你在工作中与同事的关系可能会感觉比较压抑，要防止因小事与周围的人发生摩擦，家中的长辈...",
                    "今天的你运势不错，好好工作会得到应有的回报，在与伴侣的相处中比较强势、我行我素，这样你的伴...",
                    "今天的运势一般，上司会比较强势，对你要求严格，要给自己加油打气，提高自信努力把事情做好，在...",
                    "今天的你情绪不佳，要注意不要因小事与家人发生矛盾，在事业上可能要耗费很多精力来完成手头的工...",
                    "今天的你要注意跟朋友之间可能会有矛盾，可能有外出工作的机会，一天的奔波会使你非常疲劳，可以...",
                    "今天的你可能会想要跟朋友呆在一起，但要注意防止因钱财伤了与朋友之间的感情，多反思一下自己的..."
            ];
            function $(id){return document.getElementById(id);}
            $("xingzuosel").onchange = function () {
                $("lucklogo").style.backgroundPosition = "0 "+(-50*this.value)+"px";
                $("current_yunshi").style.width = (yunshis[this.value]*8)+"px";

                $("xingzuodetail").innerHTML = details[this.value];
            }


        }
    </script>
</head>
<body>
    <div class="box">
        <div class="lucktab">
            <h2><a href="#">星座运势</a></h2>
        </div>
        <div class="luck clearfix">
            <div class="luleft">
                <a href="#" id="lucklogo"></a>
            </div>
            <div class="luright" id="zingzuosel">
                <select id="xingzuosel">
                    <option value="0" selected="selected">白羊座(03.21-04.19)</option>
                    <option value="1">金牛座(04.20-05.20)</option>
                    <option value="2">双子座(05.21-06.21)</option>
                    <option value="3">巨蟹座(06.22-07.22)</option>
                    <option value="4">狮子座(07.23-08.22)</option>
                    <option value="5">处女座(08.23-09.22)</option>
                    <option value="6">天秤座(09.23-10.23)</option>
                    <option value="7">天蝎座(10.24-11.22)</option>
                    <option value="8">射手座(11.23-12.21)</option>
                    <option value="9">摩羯座(12.22-01.19)</option>
                    <option value="10">水瓶座(01.20-02.18)</option>
                    <option value="11">双鱼座(02.19-03.20)</option>
                </select>
                <div class="yunshi">
                    <p>今日运势：</p>
                    <div class="yuanshibg">
                        <div class="yunshicur" id="current_yunshi"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ft">
            <p>
                <span id="xingzuodetail">今天的你在人际交往中可能会吃亏，小心被他人利用，在工作中注意不要太过自我小心会冒犯到上司，...</span>
                <a href="#">[详情]</a>
            </p>
        </div>

    </div>
</body>
</html>

数组常用方法

我们经常要对数组进行操作，可能追加，也可能删除等等，如何操作呢？

添加数组

var arr = [1,3,5];
我们想要把7 这个数字放到这个数组的后面，得到 [1,3,5,7];

push() 后面推进去
返回值：数组的新长度

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
var arr =[1,3,5] → arr.push(7) → 结果变成 : [1,3,5,7];

unshift() 从数组的前面放入
返回值：数组的新长度

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度
var arr = [1,3,5] → arr.unshift(0) → 结果变成 [0,1,3,5]
注意：

var dom = [1,3,5];
console.log(dom.push(7));  // 返回的是 数组的长度  4

删除数组内容

pop() 删除最后一个元素
返回值：这个被删除的元素

pop() 移除最后一个元素，返回值是最后一个值
var arr = [1,3,5] → arr.pop() → 结果 [1,3]

shift() 删除第一个元素
返回值：这个被删除的元素

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
var arr = [1,3,5] → arr.shift() → 结果 [3,5]

连接两个数组

concat() 用于连接两个或多个数组
返回值：连接后的新数组

该方法用于连接两个或多个数组。它不会改变现有的数组，而仅仅会返回被连接数组的一个副本

        var a1 = [3,8,5];
        var a2 = ["aa","bb"];
        console.log(a1.concat(a2));//[3,8,5,"aa","bb"]
        console.log(a1);//[3,8,5]
        console.log(a2);//["aa","bb"];

join() 把数组转换为字符串

join() 将数组各个元素是通过指定的分隔符进行连接成为一个字符串
语法：arrayObject.join(separator)
返回值：转换后的字符串

作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。
数组名.join(符号)
数组转换为字符串
参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var arr = [1,2,3];
console.log(arr.join(“-”))    结果就是：  1-2-3    字符串

把字符串转换为数组 split()

split() 方法用于把一个字符串分割成字符串数组
语法：stringObject.split(separator,howmany)
返回值：分割的数组

参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。howmany 可选。该参数可指定返回的数组的最大长度
join <=> split

        var str = "12.aa.123.bb";
        var aa = str.split(".");
        console.log(aa);//["12", "aa", "123", "bb"]

DOM

javascript组成

DOM

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM 树：

DOM相关概念

DOM就是把HTML视为一个层次结构(树形结构)的文档
文档(Document)：就是指HTML或者XML文件
节点(Node)：HTML文档中的所有内容都可以称之为节点
元素(Element)：HTML文档中的标签可以称为元素
文档元素(根元素)：文档中的第一个元素，HTML文档元素就是<html>
文本节点
属性节点

访问结点

我们学过几个访问节点：
getElementById() id 访问节点
getElementsByTagName() 标签访问节点
getElementsByClassName() 类名有兼容性问题
getElementsByClassName()主流浏览器支持，但是IE 6、7、8 不认识
怎么办？我们自己封装自己的类。

封装getElementsByClassName方法

原理：（核心），我们要取出所有的盒子，利用遍历的方法，通过每一个盒子的className 来判断。如果相等就留下。

自己封装getElementsByClassName方法解决浏览器兼容性的问题

    <script type="text/javascript">
        window.onload = function () {
            function MyGetElementsByClassName(className) {
                var arr = [];//用于存放结果的数组
                if (document.getElementsByClassName) {//浏览器支持
                    arr = document.getElementsByClassName(className);
                } else {
                    var doms = document.getElementsByTagName("*");
                    console.dir(doms.length);
                    for (var i = 0; i < doms.length; i++) {
                        if (doms[i].className == className) {
                            arr.push(doms[i]);
                        }
                    }
                }
                return arr;
            }
            console.dir(MyGetElementsByClassName("demo"));
        }
    </script>

当一个标签的class有多个样式时，上面代码不适用，修改如下：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            function MyGetElementsByClassName(className) {
                var arr = [];//用于存放结果的数组
                if (document.getElementsByClassName) {//浏览器支持
                    arr = document.getElementsByClassName(className);
                } else {
                    var doms = document.getElementsByTagName("*");
                    console.dir(doms.length);
                    for (var i = 0; i < doms.length; i++) {
                        var classArr = doms[i].className.split(" ");//以空格切割
                        for(var j=0;j<classArr.length;j++){
                            if(classArr[j] == className){
                                arr.push(doms[i]);
                            }
                        }
                    }
                }
                return arr;
            }
            console.dir(MyGetElementsByClassName("demo"));
        }
    </script>
</head>
<body>
<div></div>
<div class="demo"></div>
<div></div>
<div class="demo test"></div>
<div></div>
<div class="demo"></div>
</body>
</html>

实际项目中，我们经常会有这样的需求，查找id=xxx标签内的class包含xxx的标签，

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            function getElementByIdInClass(className,id){
                if(document.getElementsByClassName){
                    if(id){//有id
                        var idEle = document.getElementById(id);
                        return idEle.getElementsByClassName(className);
                    }else{
                        return document.getElementsByClassName(className);
                    }
                }else{
                    var doms ;
                    if(id){
                        var idEle = document.getElementById(id);
                        doms = idEle.getElementsByTagName("*");
                    }else{
                        doms = document.getElementsByTagName("*");
                    }

                    var arr = [];
                    for(var i=0;i<doms.length;i++){
                        var classArr = doms[i].className.split(" ");
                        for(var j=0 ;j<classArr.length ; j++){
                            if(classArr[j] == className){
                                arr.push(doms[i]);
                            }
                        }
                    }
                    return arr;
                }
            }

            console.log(getElementByIdInClass("demo","box"));
        }
    </script>
</head>
<body>
    <div></div>
    <div class="demo"></div>
    <div id="box">
        <div class="demo test"></div>
    </div>
    <div></div>
    <div class="demo"></div>
</body>
</html>

判断真假

我们用条件语句来判断5大数据类型中的真假：

|数据| 结论|
|::|::|
|数字类型| 所有数字都是真，0是假|
|字符串| 所有字符串都是真，’ ’串是假|
|对象| 所有对象都是真，null是假|
|未定义| undefined是假，没有真|

访问关系

父节点

父节点
parentNode
爷爷结点
dom.parentNode.parentNode;

兄弟结点

下一个兄弟结点
nextSibling：只有IE6、7、8支持
下一个兄弟结点
nextElementSibling：其他浏览器(除IE6、7、8以外的)支持
上一个兄弟结点
previousSibling：同理，只有IE6、7、8支持
上一个兄弟结点
previousElementSibling：其他浏览器(除IE6、7、8以外的)都支持

为了解决兼容性，我们一般这么写

 var div = dom.nextElementSibling || dom.nextSibling;//解决浏览器兼容性

必须先写正常浏览器(nextElementSibling ) 后写 IE678(nextSibling)

子节点

第一个子结点
firstChild：只有IE6、7、8支持
第一个子结点
firstElementChild：其他浏览器(除IE6、7、8以外的)支持
最后一个子结点
lastChild：同理，只有IE6、7、8支持
最后一个子结点
lastElementChild：其他浏览器(除IE6、7、8以外的)都支持

同样，为了解决兼容性，我们一般这么写

var childDom = ulDom.firstElementChild || ulDom.firstChild;

孩子结点

childNodes：选出全部的孩子
childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点（嫡出）
火狐谷歌等高本版会把换行也看做是子节点，但是，可以利用 nodeType == 1 时才是元素节点，来判断和获取元素节点
nodeType == 1 元素节点
nodeType == 2 属性节点
nodeType == 3 文本节点

children 重要选取所有的孩子（只有元素节点）
这个更好更适用。
ie 6、7、8 注释节点comment也包含在children中，这个要避免开。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var ulDom = document.getElementsByTagName("ul")[0];
            //chrome、IE9、10：13
            //IE6、7、8:6
            console.log(ulDom.childNodes.length);
            //所有浏览器都是：6
            console.log(ulDom.children.length);
        }
    </script>
</head>
<body>
<ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>
</body>
</html>

DOM的节点操作

新建节点
插入节点
删除节点
克隆节点等等

创建节点

var div = document.creatElement(“li”);

上面的意思就是生成一个新的 li 标签

插入节点

appendChild(); 添加孩子

意思：添加孩子，添加放到盒子的最后面。

insertBefore(插入的节点，参照节点);

insertBefore(dom1,dom2);将dom1插入到dom2的前面
写满两个参数：demo.insertBefore(test,childrens[0]);，放到了第一个孩子的前面
如果第二个参数为 null 则默认这新生成的盒子放到最后面。demo.insertBefore(test,null);

移除节点

removeChild(); 孩子节点

var da = document.getElementById("xiongda");
demo.removeChild(da);

克隆节点

cloneNode(); 复制节点

括号里面可以跟boolean类型的参数：

如果里面是 true 深层复制，除了复制本盒子，还复制子节点
如果为 false 浅层复制只复制本节点不复制子节点。

最后编辑于：2017.12.08 01:20:05

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,425评论 4赞 361
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,058评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,186评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,848评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,249评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,554评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,830评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,536评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,239评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,505评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,004评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,346评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,999评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,060评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,821评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,574评论 2赞 271
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,480评论 2赞 267