浅谈JS中的常用选择器及属性、方法的调用

2019-11-19 15:58:00

字体：大中小

来源：转载

供稿：网友

选择器、属性及方法调用的配合使用：

<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>    //先选择元素在进行加效果    //ID选择器(使用较高JS)    var a = document.getElementById("a");    //检测类型    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";//    标签选择器    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")      //创造元素   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中的常用选择器及属性、方法的调用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：jQuery获取table表中的td标签(实例讲解)

下一篇：js原生代码实现轮播图的实例讲解