Web前端最新常见样式设计及DOM操作整理，web网站前端开发培训

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

解决 input:text 自动填充变黄的问题

input:-webkit-autofill{

-webkit-box-shadow: 0 0 0px 10000px white inset !important;

box-shadow: 0 0 0px 10000px white inset !important;

}

jQuery部分

========

返回头部

$(‘a.top’).click(function (e) {

e.preventDefault();

$(body).animate({scrollTop: 0}, 800);

});

预加载图片

$.preloadImages = function () {

for (var i = 0; i < arguments.length; i++) {

$(‘’).attr(‘src’, arguments[i]);

}

};

$.preloadImages(‘img/hover-on.png’, ‘img/hover-off.png’);

自动替换加载失败的图片

$(‘img’).on(‘error’, function () {

$(this).prop(‘src’, ‘img/broken.png’);

});

切换元素的各种样式

$(‘.btn’).hover(function () {

$(this).addClass(‘hover’);

}, function () {

$(this).removeClass(‘hover’);

});

禁用/启用提交按钮

$(‘input[type=“submit”]’).prop(‘disabled’, true);

$(‘input[type=“submit”]’).prop(‘disabled’, false);

组织默认事件

$(‘a.no-link’).click(function (e) {

e.preventDefault();

});

切换动画

//淡入淡出

$(‘.btn’).click(function () {

$(‘.element’).fadeToggle(‘slow’);

});

//滑入滑出

$(‘.btn’).click(function () {

$(‘.element’).slideToggle(‘slow’);

});

简单的手风琴样式

$(‘#accordion’).find(‘.content’).hide(); //关闭全部标签

$(‘#accordion’).find(‘.accordion-header’).click(function () {

var next = $(this).next();

next.slideToggle(‘fast’);

$(‘.content’).not(next).slideUp(‘fast’);

return false;

});

调整多个 div 一样高

var $columns = $(‘.column’);

var height = 0;

$columns.each(function () {

if ($(this).height() > height) {

height = $(this).height();

}

});

$columns.height(height);

同链接不同样式

$(‘a[href^=“http”]’).attr(‘target’, ‘_blank’);

$(‘a[href^=“//”]’).attr(‘target’, ‘_blank’);

$(‘a[href^="’ + window.location.origin + ‘"]’).attr(‘target’, ‘_self’); //cannot work in IE10

$("a[href$=pdf]").addClass(‘pdf’);

$("a[href$=doc]").addClass(‘doc’);

$("a[href$=xls]").addClass(‘xls’);

通过内容查找元素

var search = $(‘#search’).val();

$(‘div:not(:contains("’ + search + ‘"))’).hide();

当其他元素获得焦点时触发

$(document).on(‘visibilitychange’, function (e) {

if (e.target.visibilityState === “visible”) {

console.log(‘Tab is now in view!’);

} else if (e.target.visibilityState === “hidden”) {

console.log(‘Tab is now hidden!’);

}

});

显示 Ajax 错误信息

$(document).ajaxError(function (e, xhr, settings, error) {

console.log(error);

});

禁用右键菜单

$(document).ready(function(){

$(document).bind(“contextmenu”, function(e){

e.preventDefault();

})

})

模拟 placeholder 属性

$(document).ready(function(){

var $input_text = $(“input[type=text]”);

$input_text.val(“Enter your words here…”);

var originalValue = input.val();

input.focus(function(){

if($.trim(input.val()) == originalValue){

input.val(“”);

}

}).blur(funtion(){

if($.trim(input.val()) == “”){

input.val(originalValue);

}

});

});

判断元素是否存在

$(document).ready(function(){

if($(‘#id’).length){

//do sth.

}

});

放大 标签面积

$(“div”).click(function(){

window.loaction = $(this).find(“a”).attr(“href”);

return false;

});

根据浏览器大小选择不同的类

$(document).ready(function(){

$(window).resize(function(){

if($(window).width() > 1200){

$(‘body’).addClass(‘large’);

} else {

$(‘body’).removeClass(‘large’)

}

});

});

自定义伪类选择器

$.extend($.expr[‘:’], {

moreThan500px:function(a){

return $(a).width > 500;

}

}); //create a pseudo selector ‘:moreThan500px’

禁用 jQuery 所以动画

$.fx.off = true;

判断鼠标左右键

$(“#id”).mousedown(function(e){

switch(e.witch){

case 1: //left click

break;

case 2: //middle click

break;

case 3: //right click

break;

default: break;

}

});

回车提交表单

$(“input”).keyup(function(e){

if(e.witch == 13 || e.keyCode == 13){

$(“#submit”).trigger(‘click’);

}

});

配置 Ajax 的全局参数

$(“#load”).ajaxStart(function(){

showLoading();

disableButton();

}).ajaxComplete(function() {

hideLoading();

enableButton();

});

用 siblings() 选择兄弟元素

$(“#nav li”).click(function(){

$(this).addClass(“active”).sibling().removeClass(‘active’);

});

用 Firebug 输出日志

jQuery.log = jQuery.fn.log = function(msg){

if(console){

console.log(“%s, %o”, msg, this);

}

return $(this); //链式调用

}

CSS 钩子

$.cssHooks[‘borderRadius’] = {

get: function(ele, computed, extra){

//Read the value of -moz-border-radius, -webkit-border-radius, -o-border-radius, -ms-border-radius or border-radius depanding on browser.

}

set: function(ele, value){

//Set all the property above.

}

};

限制 textarea 的文字数量

jQuery.fn.maxLength = function(max){

this.each(function(){

var type = this.tagName.toLowerCase();

var inputType = this.type ? this.type.toLowerCase() : null;

if(type == “input” && inputType == “text” || inputType == “password”){

this.maxLength = max; //use normal length

} else if(type == “textarea”){

this.onkeypress = function(e){

var ob = e || window.event;

var keyCode = ob.keyCode;

var hasSelection - document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;

return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !ob.shiftKey && !hasSelection);

};

this.onkeyup = function(){

if(this.value.length > max){

this.value = this.value.substring(0, max);

}

};

}

});

};

删除字符串中的 HTML 标签

$.fn.stripHTML = function(){

var regexp = /<(“[^“]*”|'[‘]’|[^'”>])*/gi;

this.each(function(){

$(this).html($(this).html().replace(regexp, “”));

});

return $(this);

}

使用 proxy() 函数代理

$(“panel”).fadeIn(function(){

$(“panel button”).click(function(){

$(this).fadeOut(); //‘this’ is button, not panel

});

$("panelbutton").click($.proxy(function(){

$(this).fadeOut(); //‘this’ is panel, not button

}, this));

});

禁用前进后退按钮

$(document).ready(function(){

window.history.forward(1);

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】