淺談JS中的常用選擇器及屬性、方法的調(diào)用
更新時間:2017年07月28日 07:49:10 投稿:jingxian
下面小編就為大家?guī)硪黄獪\談JS中的常用選擇器及屬性、方法的調(diào)用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
選擇器、屬性及方法調(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");
//檢測類型
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)用就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript里四舍五入函數(shù)round用法實例
這篇文章主要介紹了JavaScript里四舍五入函數(shù)round用法,實例分析了round函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
css值轉(zhuǎn)換成數(shù)值請拋棄parseInt
絕大多數(shù)人喜歡用parseInt()把css中的字符串值轉(zhuǎn)換成數(shù)值2011-10-10
微信小程序scroll-view橫向滑動嵌套for循環(huán)的示例代碼
這篇文章主要介紹了微信小程序scroll-view橫向滑動嵌套for循環(huán)的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
可以用鼠標(biāo)拖動的DIV實現(xiàn)思路及代碼
DIV可以拖動的效果,想必大家都有見到過吧,在本文也為大家實現(xiàn)一個不錯的可以用鼠標(biāo)拖動的div,感興趣的各位不要錯過2013-10-10
(JS實現(xiàn))MapBar中坐標(biāo)的加密和解密的腳本
(JS實現(xiàn))MapBar中坐標(biāo)的加密和解密的腳本...2007-05-05
JS操作字符串轉(zhuǎn)換為數(shù)值并取整的代碼
這篇文章主要介紹了JS操作字符串轉(zhuǎn)換為數(shù)值并取整的代碼,代碼比較短,需要的朋友可以參考下2014-01-01

