全栈工程师-那些经常用的前端知识小结

全栈工程师，一个从来没有在互联网公司正式出现过的职位。但在近年各大互联网公司中却被人不断称呼，但他们存在的价值却颇受争议。 有人认为这是对掌握多种语言技能工程师的戏谑，嘲笑他们的杂而不精，不求甚解。有人则视为这是对这群工程 师的尊敬，是他们用组合技能为团队做出贡献的尊称。

我倾向于后者，在我眼里全栈工程师就是一个神话。我不奢求自己将来会成为全栈工程师，但是人总得有追求，朝着这方面努力也不是一件坏事。

后台工程师，了解一些常用的Jquery+CSS知识也是很有必要的。否则当你做任务时，一遇到前端的问题就得找人求助。同事小蔡就是

一个多面手，前端后端样样精通。看他写前端的代码兼职是一种享受，当然心里也是痒痒的。人就得知道自己的不足才会进步。活到

老学到老，尤其是IT互联网领域，更是这样。技术迭代的太快，需要不停止给自己充电。前端一直是我欠缺的方面，所有在这里总结一些简单常用而又经常忘记的jquery+CSS知识。

01.添加编辑样式

覆盖原有样式，添加新样式

$(this).attr("class", "add");

删除样式

$(this).removeClass("add cancel");
$(this).removeClass("add").removeClass("cancel");

删除一个样式，添加一个新样式，写文本

$(this).removeClass("cancel").addClass("add").text("已选择");

$(this).toggleClass("add").text($(this).text() == "1" ? "2" :"1");

toggleClass检查对象的样式add。如果不存在则添加该样式，如果已设置则删除之。这就是所谓的切换效果。

02.获取自定义属性

<div class="quickListOperate add" data-key="wk" id="id_wk">已选择</div>
var key = $(".quickListOperate.add").data("key");
var key = $(".quickListOperate.add").attr('data-value');

03.清空操作

清空表单下的所有input控件的值

$(".myform input").val("");

清空某个div的所有内容

$("#div_id").empty();

04.遍历元素取值

var array = [];
$(".quickListOperate.add").each(function(i){
var key = $(this).data("key");
array.push(key);
});
console.log(array.join())

05.scrollTop滚动效果

滚动到顶部

滚动到某个元素的位置(带动画效果)

封面

$(“body”).animate({scrollTop:coverAnchor.offsetTop},300);

小结

今天总结的这些只是jquery+css知识中的冰山一角，如果您有兴趣，可以搜索“在线工具-开源社区”，这里有很多不错的文档工具。