2024年常见样式设计及DOM操作整理(3)，2024年最新阿里影业前端面试

算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}, 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);

window.history.forward(-1);

})

javascript 部分

=============

类数组对象转化为数组

function trans(obj){

return [].slice.call(obj);

}

//以下是 ES6 方法

function trans(obj){

return Array.from(obj);

}

判断 浏览器 js 版本(鸭式辩型)

//js版本检测

var JS_ver = [];

(Number.prototype.toFixed)?JS_ver.push(“1.5”):false;

([].indexOf && [].forEach)?JS_ver.push(“1.6”):false;

((function(){try {[a,b] = [0,1];return true;}catch(ex) {return false;}})())?JS_ver.push(“1.7”):false;

([].reduce && [].reduceRight && JSON)?JS_ver.push(“1.8”):false;

(“”.trimLeft)?JS_ver.push(“1.8.1”):false;

JS_ver.supports = function()

{

if (arguments[0])

return (!!~this.join().indexOf(arguments[0] +“,”) +“,”);

else

return (this[this.length-1]);

}

console.log("Javascript version supported in this browser: "+ JS_ver.supports());

获取 url 中参数

function getURIData(url){

var para = url.slice(url.indexOf(‘?’) + 1);

var reg = /&?(\w*)=([%\w]*)/g;

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

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

JSON)?JS_ver.push(“1.8”):false;

(“”.trimLeft)?JS_ver.push(“1.8.1”):false;

JS_ver.supports = function()

{

if (arguments[0])

return (!!~this.join().indexOf(arguments[0] +“,”) +“,”);

else

return (this[this.length-1]);

}

console.log("Javascript version supported in this browser: "+ JS_ver.supports());

获取 url 中参数

function getURIData(url){

var para = url.slice(url.indexOf(‘?’) + 1);

var reg = /&?(\w*)=([%\w]*)/g;

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

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

[外链图片转存中…(img-tpZXPCzf-1715635084847)]

[外链图片转存中…(img-Vt0zFeIV-1715635084848)]