今天面试（有笔试题的那种）；题目倒是不难但我发现React用久了样式都不会修改了，jQuery之前就没有过多研究的情况下，再加上是手写代码；结果悲剧了_ + _---还是基本功不够扎实，不过发现手写代码也是一种不错的梳理知识点的方式；
正题：用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内部会执行如下操作；
$(".col").each(function (index,ele) {
$(ele).attr("style","height: 20px");
});
// 原生js方法；
var a=document.getElementsByClassName("col");
// 返回的是一个伪集合，通过Array中的slice方法转化下即可；
Array.prototype.slice.call(a).forEach(function (ele,index) {
ele.style.height="60px";
});
//Es6的转化数组方式为
Array.from(a).forEach(function (ele,index) {
ele.style.height="260px";
});
// forEach和map 的区别就是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>
不多说 好好学习天天向上喽-
网友评论