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

来源：懂视网责编：小采时间：2020-11-27 22:33:53

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

浅谈JS中的常用选择器及属性、方法的调用:选择器、属性及方法调用的配合使用： <style> #a{ width: 200px; height: 100px; background-color: red; } .b{ width: 200px; height: 100px; background-color: green; } .div1{ width: 200px;

推荐度：

点击下载本文 文档为doc格式

导读浅谈JS中的常用选择器及属性、方法的调用:选择器、属性及方法调用的配合使用： <style> #a{ width: 200px; height: 100px; background-color: red; } .b{ width: 200px; height: 100px; background-color: green; } .div1{ width: 200px;

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

<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中的常用选择器及属性、方法的调用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推荐度：

点击下载本文 文档为doc格式

标签：选择器方法的调用浅谈js中的常用选择器及属性

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐