前端jquery面试题个人总结

1、jquery的优点

• 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

6、jquery中的选择器 和 css中的选择器有区别吗？

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

7、操作样式的常用方法

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

8、jquery中如何来获取或和设置属性？

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

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

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

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

• hover(fn1,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"); 
  });