Day07 JavaScript

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.属性名 只能获得内联样式的值
    let value=div.style.display;
    console.log(div.style.height);
    if (value =="none"){
      //设置值的时候也是设置的内联样式
      div.style.display="block";
    } else{
      div.style.display="none";
    }
    // div.style.display=(div.style.display=="none")?"block":"none";
  }

  //若要获取内部样式或外部样式
  //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.节点 Node

<!---->
<p class="one">hello world <span>good</span></p>
<script >
  //textContent获得节点中所有文本内容
  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);
  //只有文本节点和注释节点,属性节点的nodeVaule会返回值其余都为null
  console.log(p.nodeValue);
  console.log(tNode.nodeValue);
  //nodeType==1 元素节点
  //nodeType==2 属性节点
  //nodeType==3 文本节点
  console.log(p.nodeType);
  console.log(x.nodeType);
  console.log(tNode.nodeType);
</script>

7.增加节点

<div id="parent">
  <p id="one">hello world</p>
</div>
<button id="btn">add</button>
<script >
  /*
  * 增加节点
  * 从后添加parentNode.appendChild(ChildNode);
  * 从前添加 parentNode.insertBefore(增加的节点，目标位置节点)
  * createElement()创造元素节点
  * createTextNode()创建文本节点
  * */
  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.删除节点

<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 >
  //删除节点  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.修改节点

<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");
  //修改节点 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.克隆节点

<p>hello world</p>
<script >
  //nodeElement.cloneNode(true) 克隆节点
  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获取焦点时触发
  //this 执行时间的当前对象 下面input执行onfocus则this=input
  input.onfocus=function () {
    this.style.backgroundColor="red";
  }
  //onblur失去焦点时出发
  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及相关图片资源加载完成之后执行
  window.onload=function () {
    var np=document.createElement("p");
    let npx=document.createTextNode("hello");
    np.appendChild(npx);
    document.body.appendChild(np);
  }
  //onchange事件 域的内容发生改变时触发 支持input select textarea
   input.onchange=function () {
    this.value="change";
   }
   //onsubmit form.onsubmit表单背提交时触发
  var form=document.getElementsByTagName("form")[0];
  form.onsubmit=function () {
    alert("提交表单");
  }
  //onresize 浏览器窗口大小改变时触发
  window.onresize=function () {
    alert("浏览器窗口改变");

  }
  //onscroll 页面下滑（滚动）时触发
  window.onscroll=function () {
    alert("页面滚动");
  }
  //document.keydown 任意键按下时触发 event.keyCode按下的键对应的键盘吗
  // document.onkeydown=function () {
  //   alert(event.keyCode);
  // }
  //document.keypress 按下并释放
  // document.onkeypress=function () {
  //   alert(event.keyCode);
  // }
  //document.keyup 释放时触发

  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 () {
      //先将所有li的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>