- jQuery 教程
- jQuery 首页
- jQuery 路线图
- jQuery 概述
- jQuery 基础
- jQuery 语法
- jQuery 选择器
- jQuery 事件
- jQuery 属性
- jQuery AJAX
- jQuery DOM 操作
- jQuery DOM
- jQuery 添加元素
- jQuery 删除元素
- jQuery 替换元素
- jQuery CSS 操作
- jQuery CSS 类
- jQuery 尺寸
- jQuery CSS 属性
- jQuery 效果
- jQuery 特效
- jQuery 动画
- jQuery 链式操作
- jQuery 回调函数
- jQuery 遍历
- jQuery 遍历
- jQuery 遍历祖先节点
- jQuery 遍历子孙节点
- jQuery UI
- jQuery 交互
- jQuery 小部件
- jQuery 主题
- jQuery 插件
- jQuery 插件
- jQuery - PagePiling.js
- jQuery - Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery 有用资源
- jQuery 问答
- jQuery 快速指南
- jQuery 有用资源
- jQuery 讨论
jQuery 面试题
亲爱的读者们,这些jQuery 面试题专为帮助您熟悉面试中可能遇到的jQuery相关问题而设计。根据我的经验,优秀的面试官很少会预先设定具体的题目,通常会从一些基本概念开始,然后根据您的回答和进一步的讨论展开。
jQuery 是一个快速、简洁的 JavaScript 库,由 John Resig 于 2006 年创建,其口号是 - 少写代码,多做事情。jQuery 简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互,从而加快了 Web 开发速度。jQuery 是一个旨在通过编写更少代码来简化各种任务的 JavaScript 工具包。
以下是 jQuery 支持的重要核心功能列表:
DOM 操作 - jQuery 使选择 DOM 元素、遍历它们以及使用名为 Sizzle 的跨浏览器开源选择器引擎修改其内容变得容易。
事件处理 - jQuery 提供了一种优雅的方式来捕获各种事件,例如用户点击链接,而无需在 HTML 代码本身中添加事件处理程序。
AJAX 支持 - jQuery 可以帮助您使用 AJAX 技术开发响应迅速且功能丰富的网站。
动画 - jQuery 附带大量内置动画效果,您可以在网站中使用。
轻量级 - jQuery 是一个非常轻量级的库 - 大约 19KB(压缩和 gzip 压缩)。
跨浏览器支持 - jQuery 具有跨浏览器支持,可在 IE 6.0+、FF 2.0+、Safari 3.0+、Chrome 和 Opera 9.0+ 中良好运行。
最新技术 - jQuery 支持 CSS3 选择器和基本的 XPath 语法。
使用 $(document).ready() 函数。其中的所有内容将在 DOM 加载完毕且页面内容加载之前加载。
JavaScript 很好地支持对象的概念。您可以使用对象字面量创建对象,如下所示:
var emp = { name: "Zara", age: 10 };
您可以使用点表示法编写和读取对象的属性,如下所示:
// Getting object properties emp.name // ==> Zara emp.age // ==> 10 // Setting object properties emp.name = "Daisy" // <== Daisy emp.age = 20 // <== 20
您可以使用数组字面量定义数组,如下所示:
var x = []; var y = [1, 2, 3, 4, 5];
数组具有一个 length 属性,可用于迭代。我们可以按如下方式读取数组的元素:
var x = [1, 2, 3, 4, 5]; for (var i = 0; i < x.length; i++) { // Do something with x[i] }
命名函数在定义时具有名称。可以使用 function 关键字定义命名函数,如下所示:
function named(){ // do some stuff here }
JavaScript 中的函数可以是命名函数或匿名函数。
匿名函数的定义方式与普通函数类似,但它没有名称。
可以!匿名函数可以赋值给变量。
可以!匿名函数可以作为参数传递给另一个函数。
JavaScript 变量 arguments 表示传递给函数的参数。
使用 typeof 运算符,我们可以获取传递给函数的参数类型。例如:
function func(x){ console.log(typeof x, arguments.length); } func(); //==> "undefined", 0 func(1); //==> "number", 1 func("1", "2", "3"); //==> "string", 3
使用 arguments.length 属性,我们可以获取传递给函数的参数总数。例如:
function func(x){ console.log(typeof x, arguments.length); } func(); //==> "undefined", 0 func(1); //==> "number", 1 func("1", "2", "3"); //==> "string", 3
arguments 对象具有一个 callee 属性,它引用您所在的函数。例如:
function func() { return arguments.callee; } func(); // ==> func
JavaScript 中著名的关键字 this 始终指向当前上下文。
变量的作用域是程序中定义它的区域。JavaScript 变量只有两种作用域。
全局变量 - 全局变量具有全局作用域,这意味着它在 JavaScript 代码的任何地方都是可见的。
局部变量 - 局部变量仅在其定义的函数内可见。函数参数始终是该函数的局部变量。
局部变量优先于同名全局变量。
回调函数是一个普通的 JavaScript 函数,作为参数或选项传递给某些方法。一些回调函数只是事件,调用它们是为了给用户一个机会在触发特定状态时做出反应。
每当从某个内部作用域访问在当前作用域之外定义的变量时,就会创建闭包。
以下示例显示了变量 counter 如何在 create、increment 和 print 函数内可见,但在它们外部不可见:
function create() { var counter = 0; return { increment: function() { counter++; }, print: function() { console.log(counter); } } } var c = create(); c.increment(); c.print(); // ==> 1
charAt() 方法返回指定索引处的字符。
concat() 方法返回指定索引处的字符。
forEach() 方法为数组中的每个元素调用一个函数。
indexOf() 方法返回在调用 String 对象中指定值的第一次出现的索引,如果未找到则返回 -1。
length() 方法返回字符串的长度。
pop() 方法从数组中删除最后一个元素并返回该元素。
push() 方法将一个或多个元素添加到数组的末尾并返回数组的新长度。
reverse() 方法反转数组元素的顺序 - 第一个元素变成最后一个,最后一个元素变成第一个。
sort() 方法对数组的元素进行排序。
substr() 方法返回从指定位置开始,通过指定字符数的字符串中的字符。
toLowerCase() 方法返回转换为小写的调用字符串值。
toUpperCase() 方法返回转换为大写的调用字符串值。
toString() 方法返回数字值的字符串表示形式。
jQuery 选择器是一个函数,它使用表达式根据给定的条件从基于 DOM 的元素中查找匹配的元素。简单来说,选择器用于使用 jQuery 选择一个或多个 HTML 元素。选择元素后,我们就可以对所选元素执行各种操作。jQuery 选择器以美元符号和括号开头 - $()。
工厂函数 $() 是 jQuery() 函数的同义词。因此,如果您正在使用任何其他 JavaScript 库,其中 $ 符号与其他内容冲突,则可以将 $ 符号替换为 jQuery 名称,并且可以使用函数 jQuery() 代替 $()。
$('tag-name') 选择文档中所有类型为 tag-name 的元素。例如,$('p') 选择文档中的所有段落 <p>。
$('#some-id') 选择文档中 ID 为 some-id 的单个元素。
$('.some-class') 选择文档中所有类为 some-class 的元素。
$('*')
选择 DOM 中所有可用的元素。
$('E, F, G')
选择指定选择器 E、F 或 G 的所有组合结果,其中选择器可以是任何有效的 jQuery 选择器。
attr()
方法可以用于从匹配集合中的第一个元素获取属性的值。
attr(name, value)
方法可以用于使用传递的值将命名属性设置到包装集中的所有元素上。
addClass( classes )
方法可以用于将定义的样式表应用于所有匹配的元素。可以使用空格分隔多个类。
removeAttr( name )
方法可以用于从每个匹配的元素中删除属性。
hasClass( class )
方法如果指定的类至少存在于匹配元素集中,则返回 true
。
removeClass(class)
方法删除匹配元素集中所有或指定的类。
toggleClass(class)
方法在类不存在时添加它,存在时删除它。
html()
方法获取第一个匹配元素的 HTML 内容 (innerHTML)。
html( val )
方法设置每个匹配元素的 HTML 内容。
text( )
方法获取所有匹配元素的组合文本内容。
text( val )
设置所有匹配元素的文本内容。
val( )
方法获取第一个匹配元素的输入值。
val(val)
方法如果在 `` 元素上调用,则设置每个匹配元素的 value 属性;如果在 `
filter( selector )
方法可以用于过滤掉与指定选择器不匹配的所有元素。选择器可以使用任何选择器语法编写。
eq( index )
方法将匹配元素集缩减为单个元素。
is( selector )
方法将当前选择与表达式进行比较,如果选择的至少一个元素符合给定的选择器,则返回 true
。
not(selector)
方法从匹配元素集中删除与指定选择器匹配的元素。
slice(selector)
方法选择匹配元素的子集。
add( selector )
方法将更多由给定选择器匹配的元素添加到匹配元素集中。
andSelf( )
方法将之前的选择添加到当前选择中。
children( [selector])
方法获取一个包含每个匹配元素集的唯一直接子元素的元素集。
closest( selector )
方法获取包含与指定选择器匹配的最近父元素(包括起始元素)的元素集。
contents( )
方法查找匹配元素(包括文本节点)内的所有子节点,或者如果元素是 iframe,则查找内容文档。
end( )
方法撤消最近的“破坏性”操作,将匹配元素集更改为其先前状态。
find( selector )
方法搜索与指定选择器匹配的子元素。
next( [selector] )
获取一个包含给定元素集的唯一下一个兄弟元素的元素集。
nextAll( [selector] )
查找当前元素之后的所有兄弟元素。
offsetParent( )
方法返回包含第一个匹配元素的定位父元素的 jQuery 集合。
parent( [selector] )
方法获取元素的直接父元素。如果在一个元素集上调用,则 `parent` 返回其唯一直接父元素的集合。
parents( [selector] )
方法获取包含匹配元素集的唯一祖先(根元素除外)的元素集。
prev( [selector] )
方法获取包含每个匹配元素集的唯一前一个兄弟元素的元素集。
prevAll( [selector] )
方法查找当前元素之前的兄弟元素。
siblings( [selector] )
方法获取一个包含每个匹配元素集的唯一兄弟元素的元素集。
css( name )
方法返回第一个匹配元素的样式属性。
css( name, value )
方法将单个样式属性设置为所有匹配元素的值。
height( val )
方法设置每个匹配元素的 CSS 高度。
height( )
方法获取第一个匹配元素的当前计算像素高度。
innerHeight( )
方法获取第一个匹配元素的内部高度(不包括边框,包括填充)。
innerWidth( )
方法获取第一个匹配元素的内部宽度(不包括边框,包括填充)。
offset( )
方法获取第一个匹配元素相对于文档的当前偏移量(以像素为单位)。
offsetParent( )
方法返回包含第一个匹配元素的定位父元素的 jQuery 集合。
outerHeight( [margin] )
方法获取第一个匹配元素的外部高度(默认情况下包括边框和填充)。
outerWidth( [margin] )
方法获取第一个匹配元素的外部宽度(默认情况下包括边框和填充)。
position( )
方法获取元素相对于其偏移父元素的顶部和左侧位置。
width( val )
方法设置每个匹配元素的 CSS 宽度。
width( )
方法获取第一个匹配元素的当前计算像素宽度。
empty( )
方法从匹配元素集中删除所有子节点。
remove( expr )
方法从 DOM 中删除所有匹配的元素。
事件对象的 preventDefault()
方法阻止浏览器执行默认操作。
事件对象的 isDefaultPrevented()
方法返回是否曾经在这个事件对象上调用过 event.preventDefault()
。
事件对象的 stopPropagation()
方法停止事件冒泡到父元素,阻止任何父级处理程序收到事件通知。
事件对象的 isPropagationStopped()
方法返回是否曾经在这个事件对象上调用过 event.stopPropagation()
。
事件对象的 stopImmediatePropagation()
方法停止执行其余的处理程序。
事件对象的 isImmediatePropagationStopped()
方法返回是否曾经在这个事件对象上调用过 event.stopImmediatePropagation()
。
bind( type, [data], fn )
函数将处理程序绑定到每个匹配元素的一个或多个事件(如 click)。也可以绑定自定义事件。
ready(fn)
函数绑定一个函数,以便在 DOM 准备好被遍历和操作时执行。
load( url, [data], [callback] ) 方法可以从远程文件加载HTML并将其注入DOM。
ajaxComplete( callback ) 方法可以用来注册一个回调函数,该函数在每次AJAX请求完成后执行。
下一步是什么?
接下来,你可以回顾一下你以前在这个科目上完成的任务,确保你能自信地谈论它们。如果你刚毕业,面试官并不期望你会回答非常复杂的问题,而是你的基础概念要非常扎实。
其次,如果你无法回答一些问题,其实并不太重要,重要的是,你回答的任何问题,都必须充满自信。所以在面试时要自信。Tutorialspoint祝你面试顺利,并祝你未来的事业一切顺利!干杯 :-)