浅谈JS中的常用选择器及属性、方法的调用
更新时间：2017年07月28日 07:49:10 投稿：jingxian
下面小编就为大家带来一篇浅谈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" 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中的常用选择器及属性、方法的调用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS中的防抖与节流及作用详解，本文通过文字说明加示例代码的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
这篇文章主要为大家详细介绍了微信小程序用canvas实现电子签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家介绍了javascript计算时间差的示例代码，，一般来说都是计算当前时间和一个指定时间点之间的差距，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家详细介绍了使用js和canvas实现时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
图片横向滚动效果，大家可能都已经很熟悉了，本文为大家介绍下使用js实现横向滚动效果，喜欢的朋友可以参考下，希望对大家有所帮助2013-09-09
这篇文章主要为大家详细介绍了微信小程序日历效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
Canvas对于我们前端来说是一个非常强大的工具,它可以实现各种复杂的图形和动画效果,我们如果能够熟练掌握它,我们就可以做很多炫酷的效果,本文就给大家介绍了用canvas画出一片星空的方法,需要的朋友可以参考下2023-11-11
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
这篇文章主要介绍了javascript字符串对象常用api函数,结合实例形式总结分析了javascript常用的连接、替换、分割、转换等相关函数与使用方法,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了javascript实现回车键提交表单方法,实例总结了纯javascript与jQuery的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍的是通过js来制作复选框的全选和不选效果,需要的朋友可以参考下2014-05-05
最新评论