今天面試(有筆試題的那種)鞭光;題目倒是不難但我發(fā)現(xiàn)React用久了樣式都不會修改了胯陋,jQuery之前就沒有過多研究的情況下竭恬,再加上是手寫代碼脉顿;結(jié)果悲劇了_ + _---還是基本功不夠扎實卜朗,不過發(fā)現(xiàn)手寫代碼也是一種不錯的梳理知識點的方式拔第;
正題:用jQuery或js改變div 下指定類名的樣式;
下面進入貼代碼時間场钉;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../libStudy/com-lib/jquery-2.2.2.js"></script>
<link href="../../cssDemo/base/base.css" rel="stylesheet"/>
<style>
.bg div{
height: 200px;
width: 100%;
border: 1px solid green;
}
</style>
</head>
<script>
$(function () {
// 錯誤的對div修改樣式$(".col").attr("height","20px");div沒有只帶height,width 屬性蚊俺;所以修改無效;而img可以
// 文檔參考html標簽 http://www.w3school.com.cn/tags/tag_div.asp
// 方式一:
$(".col").attr("style","height: 20px");
// Jquery內(nèi)部會執(zhí)行如下操作逛万;
$(".col").each(function (index,ele) {
$(ele).attr("style","height: 20px");
});
// 原生js方法泳猬;
var a=document.getElementsByClassName("col");
// 返回的是一個偽集合,通過Array中的slice方法轉(zhuǎn)化下即可宇植;
Array.prototype.slice.call(a).forEach(function (ele,index) {
ele.style.height="60px";
});
//Es6的轉(zhuǎn)化數(shù)組方式為
Array.from(a).forEach(function (ele,index) {
ele.style.height="260px";
});
// forEach和map 的區(qū)別就是forEach沒有返回值得封,而map有返回值;
for(var i=0;i<a.length;i++){
a[i].style.height="160px";
}
// jQuery對所有div 且類名為col的元素綁定一個click 事件指郁;
$("div[class='col']").click(function () {
alert(this.innerHTML)
})
})
</script>
<body class="bg">
<div class="col" id="one">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="colNoClick">4</div>
<div class="col">5</div>
</body>
</html>
不多說 好好學習天天向上嘍-