下拉菜單的事件 `onchange`

sele.onchange = function(){}

當改變的時候觸發(fā)事件

例：星座運勢

<!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 = [
                    "今天的你要注意跟伴侶相處的態(tài)度不要太強勢，否則會影響你們的感情，財運不錯，可以抓住機會小賺...",
                    "今天的你工作會比較辛苦，注意勞逸結(jié)合，遇到難題會有前輩幫助你，人際交往中你可能比較強勢自我...",
                    "今天的你在人際交往中可能會吃虧，小心被他人利用，在工作中注意不要太過自我小心會冒犯到上司，...",
                    "今天的你工作中可能比較忙碌，上司給你安排了大量的工作，這對你來說是個考驗，今天你會感到伴侶...",
                    "今天的你魅力十足，周圍有一群人圍繞著你讓你分外開心，注意不要太忘乎所以，外出時注意安全，可...",
                    "今天你的心緒不佳，注意小心跟戀人發(fā)生爭執(zhí)，可以轉(zhuǎn)移注意力，外出散心或者學(xué)習(xí)一項新的技能都是...",
                    "今天的你在工作中與同事的關(guān)系可能會感覺比較壓抑，要防止因小事與周圍的人發(fā)生摩擦，家中的長輩...",
                    "今天的你運勢不錯，好好工作會得到應(yīng)有的回報，在與伴侶的相處中比較強勢、我行我素，這樣你的伴...",
                    "今天的運勢一般，上司會比較強勢，對你要求嚴格，要給自己加油打氣，提高自信努力把事情做好，在...",
                    "今天的你情緒不佳，要注意不要因小事與家人發(fā)生矛盾，在事業(yè)上可能要耗費很多精力來完成手頭的工...",
                    "今天的你要注意跟朋友之間可能會有矛盾，可能有外出工作的機會，一天的奔波會使你非常疲勞，可以...",
                    "今天的你可能會想要跟朋友呆在一起，但要注意防止因錢財傷了與朋友之間的感情，多反思一下自己的..."
            ];
            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>

數(shù)組常用方法

我們經(jīng)常要對數(shù)組進行操作，可能追加，也可能刪除等等，如何操作呢？

添加數(shù)組

var arr = [1,3,5];
我們想要把7 這個數(shù)字放到這個數(shù)組的后面，得到 [1,3,5,7];

push() 后面推進去
返回值：數(shù)組的新長度

push() 方法可向數(shù)組的末尾添加一個或多個元素，并返回新的長度。
var arr =[1,3,5] → arr.push(7) → 結(jié)果變成 : [1,3,5,7];

unshift() 從數(shù)組的前面放入
返回值：數(shù)組的新長度

unshift() 方法可向數(shù)組的開頭添加一個或更多元素，并返回新的長度
var arr = [1,3,5] → arr.unshift(0) → 結(jié)果變成 [0,1,3,5]
注意：

var dom = [1,3,5];
console.log(dom.push(7));  // 返回的是 數(shù)組的長度  4

刪除數(shù)組內(nèi)容

pop() 刪除最后一個元素
返回值：這個被刪除的元素

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

shift() 刪除第一個元素
返回值：這個被刪除的元素

shift() 方法用于把數(shù)組的第一個元素從其中刪除，并返回第一個元素的值
var arr = [1,3,5] → arr.shift() → 結(jié)果 [3,5]

連接兩個數(shù)組

concat() 用于連接兩個或多個數(shù)組
返回值：連接后的新數(shù)組

該方法用于連接兩個或多個數(shù)組。它不會改變現(xiàn)有的數(shù)組，而僅僅會返回被連接數(shù)組的一個副本

        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() 把數(shù)組轉(zhuǎn)換為字符串

join() 將數(shù)組各個元素是通過指定的分隔符進行連接成為一個字符串
語法：arrayObject.join(separator)
返回值：轉(zhuǎn)換后的字符串

作用是將數(shù)組各個元素是通過指定的分隔符進行連接成為一個字符串。
數(shù)組名.join(符號)
數(shù)組轉(zhuǎn)換為字符串
參數(shù) separator 可選。指定要使用的分隔符。如果省略該參數(shù)，則使用逗號作為分隔符。

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

把字符串轉(zhuǎn)換為數(shù)組 split()

split() 方法用于把一個字符串分割成字符串數(shù)組
語法：stringObject.split(separator,howmany)
返回值：分割的數(shù)組

參數(shù) separator 可選。指定要使用的分隔符。如果省略該參數(shù)，則使用逗號作為分隔符。howmany 可選。該參數(shù)可指定返回的數(shù)組的最大長度
join <=> split

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

DOM

javascript組成

DOM

DOM 為文檔提供了結(jié)構(gòu)化表示，并定義了如何通過腳本來訪問文檔結(jié)構(gòu)。目的其實就是為了能讓js操作html元素而制定的一個規(guī)范。
DOM 樹：

DOM相關(guān)概念

DOM就是把HTML視為一個層次結(jié)構(gòu)(樹形結(jié)構(gòu))的文檔
文檔(Document)：就是指HTML或者XML文件
節(jié)點(Node)：HTML文檔中的所有內(nèi)容都可以稱之為節(jié)點
元素(Element)：HTML文檔中的標簽可以稱為元素
文檔元素(根元素)：文檔中的第一個元素，HTML文檔元素就是<html>
文本節(jié)點
屬性節(jié)點

訪問結(jié)點

我們學(xué)過幾個訪問節(jié)點：
getElementById() id 訪問節(jié)點
getElementsByTagName() 標簽訪問節(jié)點
getElementsByClassName() 類名有兼容性問題
getElementsByClassName()主流瀏覽器支持，但是IE 6、7、8 不認識
怎么辦？我們自己封裝自己的類。

封裝getElementsByClassName方法

原理：（核心），我們要取出所有的盒子，利用遍歷的方法，通過每一個盒子的className 來判斷。如果相等就留下。

自己封裝getElementsByClassName方法解決瀏覽器兼容性的問題

    <script type="text/javascript">
        window.onload = function () {
            function MyGetElementsByClassName(className) {
                var arr = [];//用于存放結(jié)果的數(shù)組
                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 = [];//用于存放結(jié)果的數(shù)組
                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>

實際項目中，我們經(jīng)常會有這樣的需求，查找id=xxx標簽內(nèi)的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大數(shù)據(jù)類型中的真假：

|數(shù)據(jù)| 結(jié)論|
|::|::|
|數(shù)字類型| 所有數(shù)字都是真，0是假|(zhì)
|字符串| 所有字符串都是真，’ ’串是假|(zhì)
|對象| 所有對象都是真，null是假|(zhì)
|未定義| undefined是假，沒有真|

訪問關(guān)系

父節(jié)點

父節(jié)點
parentNode
爺爺結(jié)點
dom.parentNode.parentNode;

兄弟結(jié)點

下一個兄弟結(jié)點
nextSibling：只有IE6、7、8支持
下一個兄弟結(jié)點
nextElementSibling：其他瀏覽器(除IE6、7、8以外的)支持
上一個兄弟結(jié)點
previousSibling：同理，只有IE6、7、8支持
上一個兄弟結(jié)點
previousElementSibling：其他瀏覽器(除IE6、7、8以外的)都支持

為了解決兼容性，我們一般這么寫

 var div = dom.nextElementSibling || dom.nextSibling;//解決瀏覽器兼容性

必須先寫正常瀏覽器(nextElementSibling ) 后寫 IE678(nextSibling)

子節(jié)點

第一個子結(jié)點
firstChild：只有IE6、7、8支持
第一個子結(jié)點
firstElementChild：其他瀏覽器(除IE6、7、8以外的)支持
最后一個子結(jié)點
lastChild：同理，只有IE6、7、8支持
最后一個子結(jié)點
lastElementChild：其他瀏覽器(除IE6、7、8以外的)都支持

同樣，為了解決兼容性，我們一般這么寫

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

孩子結(jié)點

childNodes：選出全部的孩子
childNodes：它是標準屬性，它返回指定元素的子元素集合，包括HTML節(jié)點，所有屬性，文本節(jié)點（嫡出）
火狐谷歌等高本版會把換行也看做是子節(jié)點，但是，可以利用 nodeType == 1 時才是元素節(jié)點，來判斷和獲取元素節(jié)點
nodeType == 1 元素節(jié)點
nodeType == 2 屬性節(jié)點
nodeType == 3 文本節(jié)點

children 重要選取所有的孩子（只有元素節(jié)點）
這個更好更適用。
ie 6、7、8 注釋節(jié)點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的節(jié)點操作

新建節(jié)點
插入節(jié)點
刪除節(jié)點
克隆節(jié)點等等

創(chuàng)建節(jié)點

var div = document.creatElement(“l(fā)i”);

上面的意思就是生成一個新的 li 標簽

插入節(jié)點

appendChild(); 添加孩子

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

insertBefore(插入的節(jié)點，參照節(jié)點);

insertBefore(dom1,dom2);將dom1插入到dom2的前面
寫滿兩個參數(shù)：demo.insertBefore(test,childrens[0]);，放到了第一個孩子的前面
如果第二個參數(shù) 為 null 則默認這新生成的盒子放到最后面。demo.insertBefore(test,null);

移除節(jié)點

removeChild(); 孩子節(jié)點

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

克隆節(jié)點

cloneNode(); 復(fù)制節(jié)點

括號里面可以跟boolean類型的參數(shù)：

如果里面是 true 深層復(fù)制，除了復(fù)制本盒子，還復(fù)制子節(jié)點
如果為 false 淺層復(fù)制只復(fù)制本節(jié)點不復(fù)制子節(jié)點。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

07_JS星座運勢、數(shù)組方法、DOM結(jié)點關(guān)系和操作

07_JS星座運勢、數(shù)組方法、DOM結(jié)點關(guān)系和操作

下拉菜單的事件 `onchange`

數(shù)組常用方法

添加數(shù)組

刪除數(shù)組內(nèi)容

連接兩個數(shù)組

join() 把數(shù)組轉(zhuǎn)換為字符串

把字符串轉(zhuǎn)換為數(shù)組 split()

DOM

javascript組成

DOM

DOM相關(guān)概念

訪問結(jié)點

封裝getElementsByClassName方法

判斷真假

訪問關(guān)系

父節(jié)點

兄弟結(jié)點

子節(jié)點

孩子結(jié)點

DOM的節(jié)點操作

創(chuàng)建節(jié)點

插入節(jié)點

移除節(jié)點

克隆節(jié)點

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

07_JS星座運勢、數(shù)組方法、DOM結(jié)點關(guān)系和操作

下拉菜單的事件 onchange

數(shù)組常用方法

添加 數(shù)組

刪除數(shù)組內(nèi)容

連接兩個數(shù)組

join() 把數(shù)組轉(zhuǎn)換為字符串

把字符串轉(zhuǎn)換為數(shù)組 split()

DOM

javascript組成

DOM

DOM相關(guān)概念

訪問結(jié)點

封裝getElementsByClassName方法

判斷真假

訪問關(guān)系

父節(jié)點

兄弟結(jié)點

子節(jié)點

孩子結(jié)點

DOM的節(jié)點操作

創(chuàng)建節(jié)點

插入節(jié)點

移除節(jié)點

克隆節(jié)點

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

07_JS星座運勢、數(shù)組方法、DOM結(jié)點關(guān)系和操作

下拉菜單的事件 `onchange`

添加數(shù)組