jQuery常见面试题

2020-06-10 本文已影响0人村东头老骥

jQuery面试题总结

1、jQuery的优点

轻量级框架,大小不到30kb
它有强大的选择器,出色的DOM操作的封装,有可靠的时间处理机制
完善的ajax,出色的浏览器兼容性
而且支持链式操作,隐式迭代
行为层和结构层的分离,还支持丰富的插件,jQuery的文档也非常的丰富

2、jQuery中有哪几种类型的选择器

基本选择器：根据id,css类名,元素名返回匹配的DOM元素
层次选择器：也叫做路径选择器,可以根据路径层次来选择相应的DOM元素。

parent > child , prev + next , prev ~ siblings

表单选择器： :input , :text , :password ,:radio,:checkbox ,:submit
过滤选择器：在前面的基础上过滤相关的条件,得到匹配的DOM元素

基本过滤器选择器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt
内容过滤器选择器： :contains ，:empty ，:has ，:parent
可见性过滤器选择器：:hidden ，:visible
属性过滤器选择器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]
子元素过滤器选择器：:nth-child ，:first-child ，:last-child ，:only-child
表单过滤器选择器：:enabled ，:disabled ，:checked ，:selected

3、jQuery中$(this)和this关键词有何不同

$(this)返回一个jQuery对象,你可以对它调用多个jQuery方法,比如用text()获取文本,用val()获取值等等。
this代表当前元素,它是JavaScript关键词中的一个,表示上下文中的当前DOM元素。你不能对它调用jQuery方法,直到它被$()函数包裹,例如$(this)

4、$(document).ready()方法和window.onload有什么区别？

window.onload方法是是页面所有元素都加载完毕，包括图片等所有元素。只能执行一次。
$(document).ready() 方法是DOM结构绘制完毕后就执行，不必等到加载完毕。意思就是DOM树加载完毕，就执行，不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready。
所以$(document).ready的执行时间要早于window.onload

5、jQuery中的选择器和css中的选择器有区别吗？

jQuery选择器支持CSS里的选择器
jQuery选择器可用来添加样式和添加相应的行为
CSS 中的选择器是只能添加相应的样式

6、操作样式的常用方法

addClass() 添加样式
removeClass() 删除样式
toggle() 切换样式

7、jQuery如何来获取或设置属性

jQuery中可以用attr()方法来获取和设置元素属性
用removeAttr()方法来删除元素属性

8、jquery中遍历节点的常用方法

children() 获取子元素，只考虑子元素不考虑后代元素
next() 获取下一个紧邻的兄弟元素
prev() 获取上一个紧邻的兄弟元素
siblings() 获取当前元素的兄弟元素(除了自己)
parents() 获取当前元素的所有祖先元素
find() 取得匹配元素中的元素集合，包括子代和后代

9、jQuery中的hover()和toggle()有什么区别

hover(fn,fn2): 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(function(){
    $(this).addClass("over");
},
function(){
    $(this).addClass("out"); 
});

toggle(evenFn,oddFn):每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

//每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function(){
   $(this).addClass("selected");   
},function(){
   $(this).removeClass("selected"); 
});

jQuery常见面试题

jQuery面试题总结

猜你喜欢

热点阅读