1.JS獲取元素

<button id="btn">btn</button>
<input type="checkbox">籃球
<script >
  var btn=document.getElementById("btn");
  var input=document.getElementsByTagName("input")[0];
  btn.onclick=function(){
    input.checked=!input.checked;
  }
</script>

2.修改元素樣式

<p id="p">hello world</p>
<button id="btn">change</button>
<script >
  /*
  * 修改樣式
  * element.style.attr =value;
  * */
  var btn=document.getElementById("btn");
  var p =document.getElementById("p");
  btn.onclick=function(){
    p.style.backgroundColor="red";
  }
</script>

3.隔行變色

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script >
  var list=document.getElementsByTagName("li");
  for (let i=0;i<list.length;i++){
    if (i%2!=0){
      list[i].style.backgroundColor="red";
    } else{
      list[i].style.backgroundColor="blue";
    }
  }
</script>

4.顯示隱藏

 <style>
    div{
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>

<div id="div"></div>
<button id="btn">btn</button>
<script >
  var btn=document.getElementById("btn");
  var div=document.getElementById("div");
  btn.onclick=function(){
    //element.style.屬性名 只能獲得內(nèi)聯(lián)樣式的值
    let value=div.style.display;
    console.log(div.style.height);
    if (value =="none"){
      //設置值的時候也是設置的內(nèi)聯(lián)樣式
      div.style.display="block";
    } else{
      div.style.display="none";
    }
    // div.style.display=(div.style.display=="none")?"block":"none";
  }

  //若要獲取內(nèi)部樣式或外部樣式
  //1.Chrome中獲取
  let value=window.getComputedStyle(div, null).width;
  console.log(value);
  //2.IE中獲取
  let ieValue=div.currentStyle.width;
</script>

5.更改/增加class名

<style>
    .current{
      color: red;
    }
  </style>


<p id="p">hello world</p>
<button id="btn">btn</button>
<script >
  var btn=document.getElementById("btn");
  var p =document.getElementById("p");
  btn.onclick=function () {
    //方法1
    // p.className="current";
    //方法2
    p.classList.add("current");
  }
</script>

6.節(jié)點 Node

<!---->
<p class="one">hello world <span>good</span></p>
<script >
  //textContent獲得節(jié)點中所有文本內(nèi)容
  var p=document.getElementsByTagName("p")[0];
  var x=p.firstChild;
  var tNode=p.getAttributeNode("class");
  var nodeContent=p.textContent;
  console.log(x);
  console.log(nodeContent);
  //只有文本節(jié)點和注釋節(jié)點,屬性節(jié)點的nodeVaule會返回值其余都為null
  console.log(p.nodeValue);
  console.log(tNode.nodeValue);
  //nodeType==1 元素節(jié)點
  //nodeType==2 屬性節(jié)點
  //nodeType==3 文本節(jié)點
  console.log(p.nodeType);
  console.log(x.nodeType);
  console.log(tNode.nodeType);
</script>

7.增加節(jié)點

<div id="parent">
  <p id="one">hello world</p>
</div>
<button id="btn">add</button>
<script >
  /*
  * 增加節(jié)點
  * 從后添加parentNode.appendChild(ChildNode);
  * 從前添加 parentNode.insertBefore(增加的節(jié)點，目標位置節(jié)點)
  * createElement()創(chuàng)造元素節(jié)點
  * createTextNode()創(chuàng)建文本節(jié)點
  * */
  var btn=document.getElementById("btn");
  var parent=document.getElementById("parent");
  var pOne=document.getElementById("one");

  btn.onclick=function () {
    let p=document.createElement("p");
    let txt=document.createTextNode("first");
    p.appendChild(txt);
    parent.appendChild(p);
    let p1=document.createElement("p");
    let txt1=document.createTextNode("first");
    p1.appendChild(txt1);
    console.log(p1);
    parent.insertBefore(p1, pOne);
  }
</script>

8.刪除節(jié)點

<ul id="parent">
  <li>hello world</li>
  <li>hello world</li>
  <li>hello world</li>
  <li>hello world</li>
  <li>hello world</li>
</ul>
<button id="btn">btn</button>
<script >
  //刪除節(jié)點  parentNode.removeChild(childNode)
  var btn=document.getElementById("btn");
  var parent=document.getElementById("parent");
  var li=document.getElementsByTagName("li")[0];
  btn.onclick=function () {
    parent.removeChild(li);

  }
</script>

9.修改節(jié)點

<div id="parent">
  <p id="child">hello world</p>
</div>
<button id="btn">btn</button>
<script >
  var btn=document.getElementById("btn");
  var parent=document.getElementById("parent");
  var child=document.getElementById("child");
  //修改節(jié)點 parentNode.replaceChild(newNode,targetNode)
  btn.onclick=function () {
    let h4=document.createElement("h4");
    let txt=document.createTextNode("修改");
    h4.appendChild(txt);

    parent.replaceChild(h4, child);

  }
</script>

10.克隆節(jié)點

<p>hello world</p>
<script >
  //nodeElement.cloneNode(true) 克隆節(jié)點
  var p=document.getElementsByTagName("p")[0];
  var cp=p.cloneNode(true);
  document.body.appendChild(cp);
</script>

11.DOM事件

<input type="text" id="input">
<p id="p">hello word</p>
<form action="">
  <input type="text">
  <input type="submit" id="submit">
</form>
<p>你還可以輸入 <em id="show">0</em>/150個字</p>
<textarea name="" id="txt" cols="30" rows="10"></textarea>

<script >

  var input=document.getElementById("input");
  //onfocus獲取焦點時觸發(fā)
  //this 執(zhí)行時間的當前對象 下面input執(zhí)行onfocus則this=input
  input.onfocus=function () {
    this.style.backgroundColor="red";
  }
  //onblur失去焦點時出發(fā)
  input.onblur=function () {
    this.style.backgroundColor="green";

  }
  //onmouseover 鼠標覆蓋事件
  var p=document.getElementById("p");
  p.onmouseover=function () {
    this.style.color="red";
  }
  //onmouseout 鼠標離開（未覆蓋）事件
  p.onmouseout=function () {
    this.style.color="green";
  }
  //window.onload 整個DOM及相關(guān)圖片資源加載完成之后執(zhí)行
  window.onload=function () {
    var np=document.createElement("p");
    let npx=document.createTextNode("hello");
    np.appendChild(npx);
    document.body.appendChild(np);
  }
  //onchange事件 域的內(nèi)容發(fā)生改變時觸發(fā) 支持input select textarea
   input.onchange=function () {
    this.value="change";
   }
   //onsubmit form.onsubmit表單背提交時觸發(fā)
  var form=document.getElementsByTagName("form")[0];
  form.onsubmit=function () {
    alert("提交表單");
  }
  //onresize 瀏覽器窗口大小改變時觸發(fā)
  window.onresize=function () {
    alert("瀏覽器窗口改變");

  }
  //onscroll 頁面下滑（滾動）時觸發(fā)
  window.onscroll=function () {
    alert("頁面滾動");
  }
  //document.keydown 任意鍵按下時觸發(fā) event.keyCode按下的鍵對應的鍵盤嗎
  // document.onkeydown=function () {
  //   alert(event.keyCode);
  // }
  //document.keypress 按下并釋放
  // document.onkeypress=function () {
  //   alert(event.keyCode);
  // }
  //document.keyup 釋放時觸發(fā)

  let show=document.getElementById("show");
  let txt=document.getElementById("txt");
  txt.onkeyup=function () {
    let length=txt.value.length;
    show.innerHTML=length;

  }
</script>

12.BOM

<script >
  //JS的頂級作用域就是window，全局變量是window的屬性，
  //方法是window的方法
  var a=10;
  console.log(window.a);
  // this指向
  function b(){
    console.log(this);
  }
  //confirm 返回值  確定true 取消false
  var result=  window.confirm("是否取消");
  console.log(result);
</script>

13.小米登陸框案例

CSS

<style>
    *{
      padding: 0;
      margin: 0;}
    .form{
      width: 400px;
      border: 1px solid #eee;
      margin: 50px auto;

      box-shadow:  5px 5px 10px #999;
    }
    li{
      margin: 20px 0;
      list-style:none;
      display: inline-block;
      font-size: 30px;
      border-right: 2px solid #e3e3e3;
      padding:0 20px;
    }
    li:last-child{
      border: none;
    }
    ul{
      text-align: center;
      line-height: 55px;
      margin-bottom: 20px;
      border-bottom: 1px solid #eeeeee;
    }
    .content{
      position: relative;
      height: 200px;
    }
    .content>div{
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .account{
      text-align: center;
    }
    .account>div>input{
      width: 360px;
      height: 40px;
      margin-bottom: 20px;
    }
    .qrCode{
      text-align: center;
      display: none;
    }
    .current{
      color: orange;
    }
  </style>

HTML

<div class="form">
  <ul><li class="current">賬號登陸</li>
    <li>掃碼登陸</li>
  </ul>
  <div class="content">
    <div class="account">
      <div><input type="text"></div>
      <div><input type="password"></div>
      <div><input type="submit" value="立即登陸"></div>
    </div>
    <div class="qrCode">
      <img src="../images/01.png" alt="">
    </div>
  </div>
</div>

<script >
  let list=document.getElementsByTagName("li");
  let contents=document.querySelectorAll(".content>div");
  for (let i=0;i<list.length;i++){
    list[i].index=i;
    list[i].onclick=function () {
      //先將所有l(wèi)i的class清空
      for (let key in list){
        list[key].className="";
      }
      this.className="current";
      // if (this.firstChild.textContent=="賬號登陸"){
      //   document.getElementsByClassName("account")[0].style.display="block";
      //   document.getElementsByClassName("qrCode")[0].style.display="none";
      // } else{
      //   document.getElementsByClassName("account")[0].style.display="none";
      //   document.getElementsByClassName("qrCode")[0].style.display="block";
      // }
      for (let i=0;i<contents.length;i++){
        contents[i].style.display="none";
      }
      contents[this.index].style.display="block";
    }

  }
</script>

14.sHover插件

插件地址：
http://www.jq22.com/demo/sHover-master20150718/#

插件引入：

  <script src="JS/sHover.min.js"></script>

案例如下：
CSS

  <style>
    #item1{
      overflow: hidden;
      border: 1px solid #333;
      width: 280px;
      height: 180px;
    }
    .sIntro{
      background: #333;
    }

  </style>

HTML

<div id="item1" class="sHoverItem">
  <img id="img1" src="../images/01.jpg">
  <span id="intro1" class="sIntro">
        <h2>Flowers</h2>
        <p> Flowers are so inconsistent!  </p>
        <button>inconsistent</button>
    </span>
</div>
<script >
  var a=new sHover("sHoverItem","sIntro");
  a.set({
    slideSpeed:5,
    opacityChange:true,
    opacity:80
  });
</script>