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