js篇--学习web-api第三天(DOM的学习)

节点

1.节点的属性

可以使用标签–元素.出来,可以使用属性节点.出来,文本节点.点出来

nodeType:节点的类型:1–标签,2–属性,3–文本

nodeName:节点的名字:标签节点–大写的标签名字,属性节点–小写的属性名字,文本节点–#text

nodeValue:节点的值:标签节点—null,属性节点–属性值,文本节点–文本内容

2.获取相关的节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<div id="dv">哦哦
  <span>这是div中的第一个span标签</span>
  <p>这是div中的第二个元素,第一个p标签</p>
  <ul id="uu">
    <li>乔峰</li>
    <li>鹿茸</li>
    <li id="three">段誉</li>
    <li>卡卡西</li>
    <li>雏田</li>
  </ul>
</div>
<script src="common.js"></script>
<script>

  //12行代码:都是获取节点和元素的
  //ul
  var ulObj=document.getElementById("uu");
  //父级节点
  console.log(ulObj.parentNode);
  //父级元素
  console.log(ulObj.parentElement);
  //子节点
  console.log(ulObj.childNodes);
  //子元素
  console.log(ulObj.children);
  console.log("==============================================");
  //第一个子节点
  console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素
  //第一个子元素
  console.log(ulObj.firstElementChild);//-----------------IE8中不支持
  //最后一个子节点
  console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
  //最后一个子元素
  console.log(ulObj.lastElementChild);//-----------------IE8中不支持
  //某个元素的前一个兄弟节点
  console.log(my$("three").previousSibling);
  //某个元素的前一个兄弟元素
  console.log(my$("three").previousElementSibling);
  //某个元素的后一个兄弟节点
  console.log(my$("three").nextSibling);
  //某个元素的后一个兄弟元素
  console.log(my$("three").nextElementSibling);



  //总结:凡是获取节点的代码在谷歌和火狐得到的都是  相关的节点
  //凡是获取元素的代码在谷歌和火狐得到的都是   相关的元素
  //从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持
  

//  var ulObj=document.getElementById("uu");
//
//
//  console.log("==============================================");
//  //第一个子节点
//  console.log(ulObj.firstChild.innerText);//------------------------IE8中是第一个子元素
//  //第一个子元素
//  console.log(ulObj.firstElementChild);//-----------------IE8中不支持
//  //最后一个子节点
//  console.log(ulObj.lastChild.innerText);//------------------------IE8中是第一个子元素
//  //最后一个子元素
//  console.log(ulObj.lastElementChild);//-----------------IE8中不支持
//  //某个元素的前一个兄弟节点
//  console.log(my$("three").previousSibling.innerText);
//  //某个元素的前一个兄弟元素
//  console.log(my$("three").previousElementSibling);
//  //某个元素的后一个兄弟节点
//  console.log(my$("three").nextSibling.innerText);
//  //某个元素的后一个兄弟元素
//  console.log(my$("three").nextElementSibling);
//

</script>
</body>
</html>

案例

1.点击按钮,设置div中p标签改变背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 300px;
      height: 450px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="变色" id="btn"/>
<div id="dv">
  <span>这是span</span>
  <p>这是p</p>
  <span>这是span</span>
  <p>这是p</p>
  <span>这是span</span>
  <p>这是p</p>
  <span>这是span</span>
  <a href="http://www.baidu.com">百度</a>
</div>
<script src="common.js"></script>
<script>

  my$("btn").onclick = function () {
    //先获取div
    var dvObj = my$("dv");
    //获取里面所有的子节点
    var nodes = dvObj.childNodes;
    //循环遍历所有的子节点
    for (var i = 0; i < nodes.length; i++) {
      //判断这个子节点是不是p标签
      if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
        nodes[i].style.backgroundColor = "red";
      }
    }
  };
  //点击按钮,设置p变色---节点的方式做


</script>
</body>
</html>

2.节点操作隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="变色" id="btn"/>
<ul id="uu">
  <li>爆炒助教</li>
  <li>油炸班主任</li>
  <li>清蒸小苏</li>
  <li>红烧班长</li>
  <li>红烧肉</li>
  <li>糖醋排骨</li>
  <li>凉拌秋葵</li>
  <li>鱼香胡萝卜丝</li>
</ul>
<script src="common.js"></script>
<script>
  //隔行变色--li
  my$("btn").onclick = function () {
    var count=0;//记录有多少个li
    //获取ul中所有的子节点
    var nodes = my$("uu").childNodes;
    for (var i = 0; i < nodes.length; i++) {
      //判断这个节点是不是li标签
      if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
        nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
        count++;//8个
        //nodes[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
      }
    }
  };

</script>
</body>
</html>

3.节点的兼容代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<ul id="uu">
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  <li>第四个</li>
  <li>第五个</li>
</ul>
<script src="common.js"></script>
<script>
  //第一个节点和第一个元素的获取的代码在IE8中可能不支持

  //element.firstChild--->谷歌和火狐获取的是第一个子几点
  //element.firstChile--->IE8获取的是第一个子元素
  //element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
  //获取任意一个父级元素的第一个子级元素
  function getFirstElementChild(element) {
    if(element.firstElementChild){//true--->支持
      return element.firstElementChild;
    }else{
      var node=element.firstChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.nextSibling;
      }
      return node;
    }
  }
  //获取任意一个父级元素的最后一个子级元素
  function getLastElementChild(element) {
    if(element.lastElementChild){//true--->支持
      return element.lastElementChild;
    }else{
      var node=element.lastChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.previousSibling;
      }
      return node;
    }
  }


  console.log(getFirstElementChild(my$("uu")).innerText);
  console.log(getLastElementChild(my$("uu")).innerText);




  //最后一个节点和最后一个元素的获取的代码在IE8中可能不支持
  //前一个节点和前一个元素的获取的代码在IE8中可能不支持
  //后一个节点和后一个元素的获取的代码在IE8中可能不支持


  //学习节点操作还是为了操作元素





</script>
</body>
</html>

4.切换背景图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>哈哈,我又变帅了</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    body {
      background-image: url("images/1.jpg");
    }

    #mask {
      background-color: rgba(255, 255, 255, 0.3);
      height: 200px;
      text-align: center;
    }

    #mask img {
      width: 200px;
      margin-top: 35px;
      cursor: pointer;
    }

  </style>

</head>
<body id="bd">
<div id="mask">
  <img src="images/1.jpg" alt="">
  <img src="images/2.jpg" alt="">
  <img src="images/3.jpg" alt="">
</div>
<script src="common.js"></script>
<script>
  var imgObjs=my$("mask").children;//获取的所有的子元素
  //循环遍历所有img,注册点击事件
  for(var i=0;i<imgObjs.length;i++){
    imgObjs[i].onclick=function () {
      document.body.style.backgroundImage="url("+this.src+")";
    };
  }
</script>

</body>
</html>

5.全选和不全选的实现

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: #f0f0f0;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
<div class="wrap">
  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="j_cbAll"/>
      </th>
      <th>菜名</th>
      <th>饭店</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧肉</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>西红柿鸡蛋</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>油炸榴莲</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>清蒸助教</td>
      <td>田老师</td>
    </tr>

    </tbody>
  </table>
</div>
<script src="common.js"></script>
<script>

  //获取全选的这个复选框
  var ckAll = my$("j_cbAll");
  //获取tbody中所有的小复选框
  var cks = my$("j_tb").getElementsByTagName("input");
  //点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态
  ckAll.onclick = function () {
    //console.log(this.checked);
    for (var i = 0; i < cks.length; i++) {
      cks[i].checked = this.checked;
    }
  };

  //获取tbody中所有的复选框,分别注册点击事件
  for(var i=0;i<cks.length;i++){
    cks[i].onclick=function () {
      var flag=true;//默认都被选中了
      //判断是否所有的复选框都选中
      for(var j=0;j<cks.length;j++){
        if(!cks[j].checked){
          //没选中就进来了
          flag=false;
          break;
        }
      }
      //全选的这个复选框的状态就是flag这个变量的值
      ckAll.checked=flag;
    };
  }

</script>
</body>
</html>

6.三种元素创建的不同方式
1. document.write(“标签的代码及内容”);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="创建一个p" id="btn"/>
小苏是一个快乐的小男孩,人家今年才38岁.好帅哦
<script src="common.js"></script>
<script>
  //document.write("标签代码及内容");
  my$("btn").onclick=function () {
    document.write("<p>这是一个p</p>");
  };
 // document.write("<p>这是一个p</p>");

  //document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉


</script>
</body>
</html>

2. 对象.innerHTML=“标签及代码”;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      border:2px solid pink;
    }
  </style>
</head>
<body>
<input type="button" value="创建一个p" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //点击按钮,在div中创建一个p标签
  //第二种方式创建元素: 对象.innerHTML="标签代码及内容";

  my$("btn").onclick=function () {
    my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
  };
</script>
</body>
</html>

1. 案例点击按钮创建一个图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="来个图片" id="btn"/>
<div id="dv"></div>

<script src="common.js"></script>
<script>
  //点击按钮,在div中创建一个图片
  my$("btn").onclick=function () {
     my$("dv").innerHTML="<img src='images/liuyan.jpg' alt='美女' />";
  };

</script>
</body>
</html>

2. 案例点击按钮创建列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 300px;
      height: 400px;
      background-color: green;
    }
  </style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>

  //  my$("btn").onclick=function () {
  //    my$("dv").innerHTML="<ul><li>杨过</li><li>小龙女</li><li>张无忌</li>  <li>张三丰</li></ul>";
  //  };


  var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
  my$("btn").onclick = function () {
    var str = "<ul style='list-style-type: none;cursor: pointer'>";
    //根据循环创建对应对数的li
    for (var i = 0; i < names.length; i++) {
      str += "<li>" + names[i] + "</li>";
    }
    str += "</ul>";
    my$("dv").innerHTML = str;

    //代码执行到这里,li已经有了
    //获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
    var list = my$("dv").getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
      //鼠标进入
      list[i].onmouseover = function () {
        this.style.backgroundColor = "yellow";
      };
      //鼠标离开
      list[i].onmouseout = function () {
        this.style.backgroundColor = "";
      };

    }

  };


</script>
</body>
</html>

3. document.createElement(“标签的名字”);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 200px;
      height: 150px;
      border: 2px dashed pink;
    }
  </style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //第三种方式创建元素
  //创建元素
  //document.createElement("标签名字");对象
  //把元素追加到父级元素中
  //点击按钮,在div中创建一个p

  my$("btn").onclick = function () {
    //创建元素的
    var pObj = document.createElement("p");
    setInnnerText(pObj, "这是一个p");
    //把创建后的子元素追加到父级元素中
    my$("dv").appendChild(pObj);
  };


</script>
</body>
</html>

1. 案例动态创建列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
      cursor: pointer;
    }

    div {
      width: 200px;
      height: 400px;
      border: 2px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];

  //点击按钮动态的创建列表,把列表加到div中
  my$("btn").onclick = function () {
    //创建ul,把ul立刻加入到父级元素div中
    var ulObj = document.createElement("ul");
    my$("dv").appendChild(ulObj);
    //动态的创建li,加到ul中
    for (var i = 0; i < kungfu.length; i++) {
      var liObj = document.createElement("li");
      //设置li中间的文字内容
      liObj.innerHTML = kungfu[i];
      ulObj.appendChild(liObj);
      //为li添加鼠标进入事件
      liObj.onmouseover = mouseoverHandle;
      //为li添加鼠标离开事件
      liObj.onmouseout = mouseoutHandle;
    }
  };

  //此位置.按钮的点击事件的外面
  function mouseoverHandle() {
    this.style.backgroundColor = "red";
  }
  function mouseoutHandle() {
    this.style.backgroundColor = "";
  }

  //如果是循环的方式添加事件,推荐用命名函数
  //如果不是循环的方式添加事件,推荐使用匿名函数


</script>
</body>
</html>

2.案例点击按钮,创建一个表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>

  var arr=[
    {name:"百度",href:"http://www.baidu.com"},
    {name:"谷歌",href:"http://www.google.com"},
    {name:"优酷",href:"http://www.youku.com"},
    {name:"土豆",href:"http://www.tudou.com"},
    {name:"快播",href:"http://www.kuaibo.com"},
    {name:"爱奇艺",href:"http://www.aiqiyi.com"}
  ];

  //点击按钮创建表格
  my$("btn").onclick=function () {
    //创建table加入到div中
    var tableObj=document.createElement("table");
    tableObj.border="1";
    tableObj.cellPadding="0";
    tableObj.cellSpacing="0";
    my$("dv").appendChild(tableObj);
    //创建行,把行加入到table中
    for(var i=0;i<arr.length;i++){
      var dt=arr[i];//每个对象
      var trObj=document.createElement("tr");
      tableObj.appendChild(trObj);
      //创建第一个列,然后加入到行中
      var td1=document.createElement("td");
      td1.innerText=dt.name;
      trObj.appendChild(td1);
      //创建第二个列
      var td2=document.createElement("td");
      td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
      trObj.appendChild(td2);
    }
  };

</script>
</body>
</html>

7.元素相关的方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="干掉第一个子元素" id="btn2"/>
<input type="button" value="干掉所有子元素" id="btn3"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>

  var i=0;
  my$("btn").onclick=function () {  
    i++;
   var obj= document.createElement("input");
    obj.type="button";
    obj.value="按钮"+i;
    //my$("dv").appendChild(obj);//追加子元素
    //把新的子元素插入到第一个子元素的前面
    my$("dv").insertBefore(obj,my$("dv").firstElementChild);
    //my$("dv").replaceChild();---自己玩
  };

  my$("btn2").onclick=function () {
    //移除父级元素中第一个子级元素
    my$("dv").removeChild(my$("dv").firstElementChild);
  };

  my$("btn3").onclick=function () {
    //点击按钮删除div中所有的子级元素
    //判断父级元素中有没有第一个子元素
    while(my$("dv").firstElementChild){
      my$("dv").removeChild(my$("dv").firstElementChild);
    }

    
  };
</script>
</body>
</html>

8.只创建一个元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //有则删除,无则创建


//先判断有没有,有就删除,然后再创建
//  my$("btn").onclick=function () {
//    //判断,div中有没有这个按钮,有就删除
//    //判断这个按钮的子元素是否存在
//    if(my$("btn2")){//如果为true就有
//      my$("dv").removeChild(my$("btn2"));
//    }
//    var obj=document.createElement("input");
//    obj.type="button";
//    obj.value="按钮";
//    obj.id="btn2";
//    my$("dv").appendChild(obj);
//  };


  my$("btn").onclick=function () {
    //判断,div中有没有这个按钮,有就删除
    //判断这个按钮的子元素是否存在
    if(!my$("btn2")){//如果为true就有
      var obj=document.createElement("input");
      obj.type="button";
      obj.value="按钮";
      obj.id="btn2";
      my$("dv").appendChild(obj);
    }

  };


</script>
</body>
</html>

9.为元素创建多个事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
  //为元素绑定事件(DOM):一种,但是不兼容,有两种
  //1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
  //2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持

  //为按钮绑定点击事件
  //参数1:事件的类型---事件的名字,没有on
  //参数2:事件处理函数---函数(命名函数,匿名函数)
  //参数3:布尔类型,目前就写false-----没有为什么,不解释,明天说

  //为同一个元素绑定多个相同的事件--
//  my$("btn").addEventListener("click",function () {
//    console.log("小苏猥琐啊");
//  },false);
//  my$("btn").addEventListener("click",function () {
//    console.log("小苏龌龊啊");
//  },false);
//  my$("btn").addEventListener("click",function () {
//    console.log("小苏邪恶啊");
//  },false);
//  my$("btn").addEventListener("click",function () {
//    console.log("小苏下流啊");
//  },false);

  //参数1:事件类型---事件名字,有on
  //参数2:事件处理函数---函数(命名函数,匿名函数)

//  my$("btn").attachEvent("onclick",function () {
//    console.log("小杨好帅哦1");
//  });
//
//  my$("btn").attachEvent("onclick",function () {
//    console.log("小杨好帅哦2");
//  });
//
//  my$("btn").attachEvent("onclick",function () {
//    console.log("小杨好帅哦3");
//  });


</script>
</body>
</html>

10.为元素绑定事件兼容代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>

  //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
  function addEventListener(element,type,fn) {
    //判断浏览器是否支持这个方法
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }

  addEventListener(my$("btn"),"click",function () {
    console.log("哦1");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦2");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦3");
  });



//  my$("btn")["on"+"click"]=function () {
//
//  };

//  function Person(name) {
//    this.name=name;
//    this.sayHi=function () {
//      console.log("您好啊");
//    };
//  }

//  var per=new Person("小明");
//  if(per.sayHii){//判断这个对象中有没有这个方法
//    per.sayHii();
//  }else{
//    console.log("没有这个方法");
//  }






</script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值