快捷導(dǎo)航

淺談JS中的常用選擇器及屬性、方法的調(diào)用

更新時(shí)間：2017年07月28日 07:49:10 投稿：jingxian

下面小編就為大家?guī)?lái)一篇淺談JS中的常用選擇器及屬性、方法的調(diào)用。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

選擇器、屬性及方法調(diào)用的配合使用：

<style>
      #a{
        width: 200px;
        height: 100px;
        background-color: red;
        
      }
      .b{
        width: 200px;
        height: 100px;
        background-color: green;
        
      }
      .div1{
        width: 200px;
        height: 100px;
        background-color:aqua;
      }
    </style>

  <body>
    <div id="a"></div>
    <div class="b" style="background-color: black;"></div>
    <div class="b" style="background-color: chartreuse;"></div>
    <div class="div1">精英教育</div>
    <input type="text" name="ipt1" />
    <input type="checkbox" name="ckb2" / disabled="disabled">
  </body>
  
  <script>
    //先選擇元素在進(jìn)行加效果
    //ID選擇器(使用較高JS)
    var a = document.getElementById("a");
    //檢測(cè)類型
    alert(typeof(document.getElementById("a")))
    
    a.style.backgroundColor="royalblue";
    
    a.innerHTML ="<span>hello<span>";
    a.innerText = "<span>hello<span>";
//    class選擇器
    var b_class = document.getElementsByClassName("b");
    b_class[0].style.backgroundColor="red";
    
    var b_class = document.getElementsByClassName("b");
    b_class[1].style.backgroundColor="blueviolet";
//    標(biāo)簽選擇器
    var b_b = document.getElementsByTagName("div");
    b_b[1].style.backgroundColor="yellow";
    
    var div_1 = document.getElementsByName("ipt1");
    div_1[0].value="文本框";
    
    var ckb2 = document.getElementsByName("ckb2")[0];
    ckb2.setAttribute("checked","");
  //移除屬性
    ckb2.removeAttribute("disabled")
    
  //創(chuàng)造元素
   var a = document.createElement("a");
   a.setAttribute("href","http://www.baidu.com");
   a.innerText="百度一下";
   
   document.body.appendChild(a);
   document.body.removeChild(a);
   
  div1.appendChild(a);
  
    
  </script>

<body>
    <!--DOM  Document Object Model
    BOM  Bowers O M-->
    <div id="div1" class="div1"></div>
    <div class="div1"></div>
    <input type="text" name="ipt1" />
    <input type="checkbox" name="ckb1" disabled="disabled"/>
  </body>
</html>
<script>
//  alert('1111');
//  window.alert('123')
  var div1 = document.getElementById('div1');
  div1.style.backgroundColor = 'red';
//  div1.innerHTML = "<ul><li>123456</li></ul>";
  div1.innerText = "<ul><li>123456</li></ul>";
  
  
  var div1_class = document.getElementsByClassName('div1');
  div1_class[1].style.backgroundColor = "green";
  
  var div1_1 = document.getElementsByTagName('div');
  div1_1[1].style.backgroundColor = "blue";
  
//  jQuery
  var div1_2 = document.getElementsByName('ipt1');
  div1_2[0].value = '123';
  
  var ckb1 = document.getElementsByName('ckb1')[0];
//  ckb1.setAttribute("checked","checked");
  ckb1.removeAttribute('disabled');
  
  var a = document.createElement("a");
  a.setAttribute("href","http://www.baidu.com");
  a.innerText = "百度";
  
  document.body.appendChild(a);
  document.body.removeChild(a);
  
  div1.appendChild(a);
</script>

以上這篇淺談JS中的常用選擇器及屬性、方法的調(diào)用就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: