JS中如何使用选择器及属性、方法
短信预约 -IT技能 免费直播动态提醒
这篇文章将为大家详细讲解有关JS中如何使用选择器及属性、方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
选择器、属性及方法调用的配合使用:
<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" ></div>
<div class="b" ></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中如何使用选择器及属性、方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341