欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript的基礎(chǔ)交互詳解

 更新時(shí)間：2021年10月21日 16:44:17   作者：玖商人不歸  
這篇文章主要介紹了javascript的基礎(chǔ)交互詳解，文章通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一.元素的獲取方式

文檔下獲取

只要在文檔中符合都會(huì)獲取到

id獲取

  • 基本語(yǔ)法：document.getElementById(id值);
    • document：文檔，表示獲取的范圍
    • get：獲取 Element：元素 By:通過(guò)..
    • 返回的是元素對(duì)象
  • 返回值：獲取到了返回具體的元素，獲取不到返回null
  • 用過(guò)id獲取只能在document下獲取，不能自定義獲取范圍
  var box = document.getElementById("box1");
        console.log(box);//<div id="box1">我是DIV</div>
        var box = document.getElementById("box2");
        console.log(box); //null
        var myH2 = document.getElementById("my-h2");
        console.log(myH2);

類(lèi)名獲?。╟lassName）

  • 基本語(yǔ)法：document.getElementsByClassName(類(lèi)名值);
    • document：文檔，表示獲取的范圍
    • get：獲取 Elements：元素（復(fù)數(shù)） By:通過(guò)..
    • 得到的元素對(duì)象是動(dòng)態(tài)的偽數(shù)組
    • 可以通過(guò)遍歷的形式打印出來(lái)
  • 返回值：獲取到了：返回一個(gè)元素集合 HTMLCollection,這個(gè)集合由索引和值組成，0對(duì)應(yīng)第一項(xiàng)，1對(duì)應(yīng)第二項(xiàng)依次類(lèi)推，天生自帶length屬性，最后一項(xiàng)的索引是集合.length -1; 獲取不到 返回一個(gè)空集合 長(zhǎng)度是0
  • length屬性 集合的長(zhǎng)度 或 集合中元素的個(gè)數(shù)
    • 集合.length;
  • 獲取集合中具體元素
    • 集合[索引]
 var tests = document.getElementsByClassName("test");
        console.log(tests);
        console.log(tests.length); //獲取長(zhǎng)度
        // 直接輸出到控制臺(tái)
        console.log(tests[0]);
        console.log(tests[1]);
        console.log(tests[tests.length - 1]);
        // 存儲(chǔ)起來(lái)
        var oDiv = tests[0];
        var oH2 = tests[1];
        console.log(oDiv, oH2);
        var test1 = document.getElementsByClassName("test1");
        console.log(test1, test1.length);
        console.log(test1[0]);
        console.log(test1[1]); //沒(méi)有這個(gè)小標(biāo)或索引 相當(dāng)于集合中這個(gè)位置還沒(méi)有初始化，或未定義 返回undefined
        var hello = document.getElementsByClassName("hello");
        console.log(hello, hello.length);
        console.log(hello[0]); //undefined

標(biāo)簽名（tagName）

  • 基本語(yǔ)法：document.getElementsByTagName(標(biāo)簽名);
    • document：文檔，表示獲取的范圍
    • get：獲取 Elements：元素（復(fù)數(shù)） By:通過(guò)..
  • 返回值：獲取到了：返回一個(gè)元素集合 HTMLCollection,這個(gè)集合由索引和值組成，0對(duì)應(yīng)第一項(xiàng)，1對(duì)應(yīng)第二項(xiàng)依次類(lèi)推，天生自帶length屬性，最后一項(xiàng)的索引是集合.length -1; 獲取不到 返回一個(gè)空集合 長(zhǎng)度是0
  • length屬性 集合的長(zhǎng)度 或 集合中元素的個(gè)數(shù)
    • 集合.length;
  • 獲取集合中具體元素
    • 集合[索引]
   var oLis = document.getElementsByTagName("li");
        console.log(oLis);
        // 獲取長(zhǎng)度
        console.log(oLis.length);
        // 獲取具體的元素
        console.log(oLis[0]);
        console.log(oLis[1]);
        console.log(oLis[2]);
        console.log(oLis[oLis.length - 1]);

自定義獲取范圍

父級(jí)元素：必須是具體的元素

  • 父級(jí)元素.getElementsByClassName(類(lèi)名值);
  • 父級(jí)元素.getElementsByTagName(標(biāo)簽名);
// 獲取ol下的li
        // 獲取父級(jí)元素
        var wrap = document.getElementById("wrap");
        console.log(wrap);
        // var oLis = wrap.getElementsByClassName("test");
        var oLis = wrap.getElementsByTagName("li");
        console.log(oLis);
        console.log(oLis.length);
        console.log(oLis[0]);
        console.log(oLis[1]);
        console.log(oLis[oLis.length - 1]);
        // 獲取ul下的li
        // 獲取父級(jí)
        var wrap1 = document.getElementsByClassName("wrap");
        console.log(wrap1);
        console.log(wrap1[0]);
        console.log(wrap1[1]);
        // var ullis = wrap1[1].getElementsByClassName("test");
        var ullis = wrap1[1].getElementsByTagName("li");
        console.log(ullis);
        console.log(ullis.length);
        console.log(ullis[0]);
        console.log(ullis[1]);
        console.log(ullis[ullis.length - 1]);

二.鼠標(biāo)事件

綁定事件也要是具體的元素，不能夠直接去操作集合

  • onclick 單擊事件
  • ondblclick 雙擊事件
  • onmousedown 鼠標(biāo)按下
  • onmouseup 鼠標(biāo)抬起
  • onmousemove 鼠標(biāo)移動(dòng)
  • oncontextmenu 鼠標(biāo)右擊
  • onmouseover 鼠標(biāo)移入
  • onmouseout 鼠標(biāo)移出
  • onmouseenter 鼠標(biāo)進(jìn)入
  • onmouseleave 鼠標(biāo)離開(kāi)
  <div id="box"></div>
    <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
   var box = document.getElementById("box");
   console.log(box);
   var myUl = document.getElementById("myUl")
   console.log(myUl);
   var oLis = myUl.getElementsByTagName("li");
   console.log(oLis);
            // - onclick  單擊事件
            box.onclick = function() {
                console.log("單擊");
            }
            // - ondblclick  雙擊事件
            oLis[0].ondblclick = function() {
                console.log("雙擊事件");
            }
            // - onmousedown 鼠標(biāo)按下
            oLis[1].onmousedown = function() {
                console.log("鼠標(biāo)按下");
            }
            // - onmouseup  鼠標(biāo)抬起
            oLis[1].onmouseup = function() {
                console.log("鼠標(biāo)抬起");
            }
            // - onmousemove 鼠標(biāo)移動(dòng)
            oLis[1].onmousemove= function() {
                console.log("鼠標(biāo)移動(dòng)");
            }
            // - oncontextmenu 鼠標(biāo)右擊
            oLis[2].oncontextmenu = function() {
                console.log("鼠標(biāo)右擊");
            }
            // - onmouseover 鼠標(biāo)移入
            myUl.onmouseover = function() {
                console.log("鼠標(biāo)移入");
            }
            // - onmouseout 鼠標(biāo)移出
            myUl.onmouseout = function() {
                console.log("鼠標(biāo)移出");
            }
            // - onmouseenter  鼠標(biāo)進(jìn)入
            myUl.onmouseenter = function() {
                console.log("鼠標(biāo)進(jìn)入");
            }
            // - onmouseleave  鼠標(biāo)離開(kāi)
            myUl.onmouseleave = function() {
                console.log("鼠標(biāo)離開(kāi)");
            }
    </script>
  • onmouseover 鼠標(biāo)移入
  • onmouseout 鼠標(biāo)移出
  • onmouseenter 鼠標(biāo)進(jìn)入
  • onmouseleave 鼠標(biāo)離開(kāi)

區(qū)別：

onmouseover及onmouseout不僅會(huì)觸發(fā)自身這個(gè)事件對(duì)應(yīng)的事情還會(huì)將父級(jí)這個(gè)事件對(duì)應(yīng)做的事情再次觸發(fā)

onmouseenter及onmouseleave：只會(huì)觸發(fā)自身這個(gè)事件對(duì)應(yīng)做的事情，不會(huì)觸發(fā)父級(jí)這個(gè)事件對(duì)應(yīng)做的事情

三.元素操作

原則：給值就是設(shè)置，不給值就是獲取

元素的所有操作都必須是具體的元素,集合不能直接操作

1.操作元素內(nèi)容

從元素中獲取到的內(nèi)容都是字符串，沒(méi)有內(nèi)容獲取到的是空字符串

操作表單元素內(nèi)容

  • 設(shè)置：表單元素.value = 值;
  • 獲?。罕韱卧?value;

// 多次賦值后邊覆蓋前邊的

// 獲取元素
var inputs = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("button")[0];
console.log(inputs, btn);
// 將兩個(gè)輸入框的和展示到第三個(gè)輸入框
// 綁定事件
// 事件每點(diǎn)擊一次 函數(shù)中代碼就重新執(zhí)行一次
btn.onclick = function () { //做什么事情
    // 獲取兩個(gè)輸入框的值
    var oneVal = inputs[0].value;
    var twoVal = inputs[1].value;
    console.log(oneVal, twoVal);
    // 遇到字符串表示拼接 先轉(zhuǎn)為數(shù)字
    var total = parseFloat(oneVal) + parseFloat(twoVal);
    console.log(total);
    // 將和設(shè)置給第三個(gè)輸入框
    inputs[2].value = total;
}

操作普通閉合標(biāo)簽

  • 設(shè)置：表單元素.innerText/innHTML = 值;
  • 獲?。罕韱卧?innerText/innHTML;
  • 區(qū)別：innerText只能識(shí)別文本，而innHTML既可以識(shí)別文本，又可以識(shí)別標(biāo)簽
var div = document.getElementsByTagName("div")[0];
var h2 = document.getElementsByTagName("h2")[0];
var p = document.getElementsByTagName("p")[0];
console.log(div, h2,p);
// 設(shè)置：表單元素.innerText/innHTML = 值;
// 后邊設(shè)置的覆蓋前邊的
// div.innerText = "我是div";
// div.innerText = "<h6>我是div</h6>";
// div.innerHTML = "我是div";
div.innerHTML = "<h6><a ;
h2.innerHTML = "我是H2";
// 獲?。罕韱卧?innerText/innHTML;  
console.log(div.innerText);//我是div
console.log(div.innerHTML);//<h6><a >我是div</a></h6>
console.log(p.innerText);
console.log(p.innerHTML);

2.操作元素屬性

操作結(jié)構(gòu)上天生自帶的屬性

  • 設(shè)置：元素.屬性 = 值; 獲取不到返回空字符串
  • 獲?。涸?屬性；

元素.id = 值;/元素.id;
元素.className = 值;/元素.className;
元素.title = 值;/元素.title;
...

// 獲取元素
var div =  document.getElementsByTagName("div")[0];
// 設(shè)置
div.className = "myBox";
div.title = "我是div";
// 獲取
console.log(div.id);
console.log(div.className);
console.log(div.title);

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

相關(guān)文章

最新評(píng)論