JQuery最全常用方法指南

});

jQuery.ajaxSetup(options) 为所有的 AJAX 请求进行全局设置。查看 $.ajax 函数取得所有选项信息。

设置默认的全局 AJAX 请求选项。

$.ajaxSetup({

url:“/ xmlhttp /”,

global: false,

type:“POST”

});

$.ajax({data: myData});

serialize() 以名称和值的方式连接一组 input 元素。实现了正确表单元素序列

function showValues() {

var str = $(”form”).serialize();

$(”#results”).text(str);

}

$(”: checkbox, : radio”).click(showValues);

$(”select”).change(showValues);

showValues();

serializeArray() 连接所有的表单和表单元素 (类似于.serialize() 方法)，但是返回一个 JSON 数据格式。

从 form 中取得一组值，显示出来

function showValues() {

var fields = $(”: input”).serializeArray();

alert(fields);

$(”#results”).empty();

jQuery.each(fields, function (i, field) {

$(”#results”).append(field.value +”“);

});

}

$(”: checkbox, : radio”).click(showValues);

$(”select”).change(showValues);

showValues();

JQuery Effects 方法说明

show() 显示隐藏的匹配元素。

show(speed, [callback]) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

hide() 隐藏所有的匹配元素。

hide(speed, [callback]) 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数

toggle() 切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，

切换为可见的。

slideDown(speed, [callback]) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选

地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以

“滑动”的方式显示出来。

slideUp(speed, [callback]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地

触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以”滑动”

的方式隐藏起来。

slideToggle(speed, [callback]) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回

调函数。这个动画效果只调整元素的高度，可以使匹配的元素以”滑动”的方式隐

藏或显示。

fadeIn(speed, [callback]) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触

发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的

高度和宽度不会发生变化。

fadeOut(speed, [callback]) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触

发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的

高度和宽度不会发生变化。

fadeTo(speed, opacity, [callback]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成

后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所

有匹配的元素的高度和宽度不会发生变化。

stop() 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中，他们就会立即开始。

queue() 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)

queue(callback) 在每一个匹配元素的事件序列的末尾添加一个可执行函数，作为此元素的事件函数

queue(queue) 以一个新的动画序列代替所有匹配元素的原动画序列

dequeue() 执行并移除动画序列前端的动画

animate(params, [duration], [easing], [callback]) 用于创建自定义动画的函数。

animate(params, options) 创建自定义动画的另一个方法。作用同上。

JQuery Traversing 方法说明

eq(index) 从匹配的元素集合中取得一个指定位置的元素，index 从 0 开始

filter(expr) 返回与指定表达式匹配的元素集合，可以使用”,”号分割多个 expr，用于实现多个条件筛选

filter(fn) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。

is(expr) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的

表达式就返回 true。

map(callback) 将 jQuery 对象中的一组元素利用 callback 方法转换其值，然后添加到一个 jQuery 数组中。

not(expr) 从匹配的元素集合中删除与指定的表达式匹配的元素。

slice(start, [end]) 从匹配元素集合中取得一个子集，和内建的数组的 slice 方法相同。

add(expr) 把与表达式匹配的元素添加到 jQuery 对象中。

children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器

将使这个方法只匹配符合的元素(只包括元素节点，不包括文本节点)。

contents() 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点，不

包括文本节点)，如果元素为 iframe，则取得其中的文档元素

find(expr) 搜索所有与指定表达式匹配的元素。

next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

nextAll([expr]) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合

parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。

parents([expr]) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。

prev([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

prevAll([expr]) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。

siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。

andSelf() 将前一个匹配的元素集合添加到当前的集合中

取得所有 div 元素和其中的 p 元素，添加 border 类属性。取得所有 div 元素中的 p 元素，

添加 background 类属性

$(”div”).find(”p”).andSelf().addClass(”border”);

$(”div”).find(”p”).addClass(”background”);

end() 结束当前的操作，回到当前操作的前一个操作

找到所有 p 元素其中的 span 元素集合，然后返回 p 元素集合，添加 css 属性

$(”p”).find(”span”).end().css(”border”,“2px red solid”);

JQuery Selectors 方法说明

基本选择器

$(”#myDiv”) 匹配唯一的具有此 id 值的元素

$(”div”) 匹配指定名称的所有元素

$(”.myClass”) 匹配具有此 class 样式值的所有元素

$(”*”) 匹配所有元素

$(”div, span, p.myClass”) 联合所有匹配的选择器

层叠选择器

$(”form input”) 后代选择器，选择 ancestor 的所有子孙节点

$(”#main> *”) 子选择器，选择 parent 的所有子节点

$(”label + input”) 临选择器，选择 prev 的下一个临节点

$(”#prev ~div”) 同胞选择器，选择 prev 的所有同胞节点

基本过滤选择器

$(”tr: first”) 匹配第一个选择的元素

$(”tr: last”) 匹配最后一个选择的元素

$(”input: not(: checked) + span”)从原元素集合中过滤掉匹配 selector 的所有元素（这里有是一个临选择器）

$(”tr: even”) 匹配集合中偶数位置的所有元素(从 0 开始)

$(”tr: odd”) 匹配集合中奇数位置的所有元素(从 0 开始)

$(”td: eq(2)”) 匹配集合中指定位置的元素(从 0 开始)

$(”td: gt(4)”) 匹配集合中指定位置之后的所有元素(从 0 开始)

$(”td: gl(4)”) 匹配集合中指定位置之前的所有元素(从 0 开始)

$(”: header”) 匹配所有标题

$(”div: animated”) 匹配所有正在运行动画的所有元素

内容过滤选择器

$(”div: contains(’John’)”) 匹配含有指定文本的所有元素

$(”td: empty”) 匹配所有空元素(只含有文本的元素不算空元素)

$(”div: has§”) 从原元素集合中再次匹配所有至少含有一个 selector 的所有元素

$(”td: parent”) 匹配所有不为空的元素(含有文本的元素也算)

$(”div: hidden”) 匹配所有隐藏的元素，也包括表单的隐藏域

$(”div: visible”) 匹配所有可见的元素

属性过滤选择器

$(”div[id]”) 匹配所有具有指定属性的元素

$(”input[name =’newsletter’]”) 匹配所有具有指定属性值的元素

$(”input[name !=’newsletter’]”) 匹配所有不具有指定属性值的元素

$(”input[name ^=’news’]”) 匹配所有指定属性值以 value 开头的元素

(”i n p u t [ n a m e (”input[name (”input[name =’letter’]”) 匹配所有指定属性值以 value 结尾的元素

$(”input[name *=’man’]”) 匹配所有指定属性值含有 value 字符的元素

(”i n p u t [ i d] [n a m e (”input[id][name (”input[id][name =’man’]”) 匹配同时符合多个选择器的所有元素

子元素过滤选择器

$(”ul li: nth – child(2)”),

$(”ul li: nth – child(odd)”), 匹配父元素的第 n 个子元素

$(”ul li: nth – child(3n + 1)”)

$(”div span: first – child”) 匹配父元素的第 1 个子元素

$(”div span: last – child”) 匹配父元素的最后 1 个子元素

$(”div button: only – child”) 匹配父元素的唯一 1 个子元素

表单元素选择器

$(”: input”) 匹配所有的表单输入元素，包括所有类型的 input, textarea, select 和 button

$(”: text”) 匹配所有类型为 text 的 input 元素

$(”: password”) 匹配所有类型为 password 的 input 元素

$(”: radio”) 匹配所有类型为 radio 的 input 元素

$(”: checkbox”) 匹配所有类型为 checkbox 的 input 元素

$(”: submit”) 匹配所有类型为 submit 的 input 元素

$(”: image”) 匹配所有类型为 image 的 input 元素

$(”: reset”) 匹配所有类型为 reset 的 input 元素

$(”: button”) 匹配所有类型为 button 的 input 元素

$(”: file”) 匹配所有类型为 file 的 input 元素

$(”: hidden”) 匹配所有类型为 hidden 的 input 元素或表单的隐藏域

表单元素过滤选择器

$(”: enabled”) 匹配所有可操作的表单元素

$(”: disabled”) 匹配所有不可操作的表单元素

$(”: checked”) 匹配所有已点选的元素

$(”select option: selected”) 匹配所有已选择的元素

JQuery CSS 方法说明

css(name) 访问第一个匹配元素的样式属性。

css(properties) 把一个”名 / 值对”对象设置为所有匹配元素的样式属性。

$(”p”).hover(function () {

$(this).css({backgroundColor:”yellow”, fontWeight:”bolder”});

}, function () {

var cssObj = {

backgroundColor:“#ddd”,

fontWeight:“”,

color:“rgb(0,40,244)”

}

$(this).css(cssObj);

});

css(name, value) 在所有匹配的元素中，设置一个样式属性的值。

offset() 取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有 2 个属性，

top 和 left，属性值为整数。这个函数只能用于可见元素。

var p = $(”p: last”);

var offset = p.offset();

p.html(“left:”+ offset.left +“, top:”+ offset.top);

width() 取得当前第一匹配的元素的宽度值，

width(val) 为每个匹配的元素设置指定的宽度值。

height() 取得当前第一匹配的元素的高度值，

height(val) 为每个匹配的元素设置指定的高度值。

JQuery Utilities 方法说明

jQuery.browser

.msie 表示 ie

jQuery.browser.version 读取用户浏览器的版本信息

jQuery.boxModel 检测用户浏览器针对当前页的显示是否基于 w3c CSS 的盒模型

jQuery.isFunction(obj) 检测传递的参数是否为 function

function stub() {}

var objs = [

function () {},

{x: 15, y: 20},

null,

stub,

“function”

];

jQuery.each(objs, function (i) {

var isFunc = jQuery.isFunction(objs[i]);

$(”span: eq(”+ i +“)”).text(isFunc);

});

jQuery.trim(str) 清除字符串两端的空格，使用正则表达式来清除给定字符两端的空格

jQuery.each(object, callback) 一个通用的迭代器，可以用来无缝迭代对象和数组

jQuery.extend(target, object1, [objectN]) 扩展一个对象，修改原来的对象并返回，这是一个强大的实现继承的

工具，这种继承是采用传值的方法来实现的，而不是 JavaScript 中的

原型链方式。

合并 settings 和 options 对象，返回修改后的 settings 对象

var settings = {validate: false, limit: 5, name:“foo”};

var options = {validate: true, name:“bar”};

jQuery.extend(settings, options);

合并 defaults 和 options 对象，defaults 对象并没有被修改。options 对象中的值

代替了 defaults 对象的值传递给了 empty。

var empty = {}

var defaults = {validate: false, limit: 5, name:“foo”};

var options = {validate: true, name:“bar”};

var settings = $.extend(empty, defaults, options);

jQuery.grep(array, callback, [invert]) 通过一个筛选函数来去除数组中的项

$.grep([0, 1, 2], function (n, i) {

return n > 0;

});

jQuery.makeArray(obj) 将一个类似数组的对象转化为一个真正的数组

将选取的 div 元素集合转化为一个数组

var arr = jQuery.makeArray(document.getElementsByTagName(”div”));
自我介绍一下，小编 13 年上海交大毕业，曾经在小公司待过，也去过华为、OPPO 等大厂，18 年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024 年 Web 前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合 3 年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了 95% 以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

完整版面试题资料免费分享，只需你点赞支持，动动手指点击此处就可领取了。

前端实习面试的套路

回顾项目

往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

重点在于基础知识

这里指的基础知识包括：前端基础知识和学科基础知识。

前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象 / 活动对象（VO/AO）、作用域链、this 指向、原型链等。

学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
你可能发现了我没有提到 React/Vue 这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。

m/2024/03/13/H4lCoPEF.jpg” />

完整版面试题资料免费分享，只需你点赞支持，动动手指点击此处就可领取了。

前端实习面试的套路

回顾项目

往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

重点在于基础知识

这里指的基础知识包括：前端基础知识和学科基础知识。

前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象 / 活动对象（VO/AO）、作用域链、this 指向、原型链等。

学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
你可能发现了我没有提到 React/Vue 这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。