jQuery 常见面试题

目录

1、jQuery有哪些好处

2、你知道 jQuery 有哪些选择器

3、jQuery 的美元符号 $ 有什么作用？

4、jQuery 中使用过哪些插入节点的方法，他们的区别是什么

5、jQuery 中常见的几种函数以及他们的含义是什么

6、$(this) 和 this 关键字在 jQuery 中有何不同

1、jQuery有哪些好处

• jQuery 是轻量级的框架，大小不到 30 kb

• 它有强大的选择器，出色的 DOM 操作的封装

• 有可靠的事件处理机制

• 完善的 ajax（它的 ajax 封装的非常的好，不需要考虑复杂浏览器的兼容性和 XMLHttpRequest 对象的创建和使用的问题）

• 出色的浏览器的兼容性

• 支持链式操作，隐式迭代

2、你知道 jQuery 有哪些选择器

基本选择器：id选择器，标签选择器，类选择器等

层次选择器：如：$("form input") 选择所有的 form 元素中的 input 元素；$("#main > *") 选择 id 为 main 的所有子元素

过滤选择器：如：$("tr:first") 选择所有tr元素的第一个；$("tr:last") 选择所有 tr 元素的最后一个

表单选择器：如：$(":input") 选择所有的表单输入元素；$(":text") 选择所有的 text 的 input 元素

3、jQuery 的美元符号 $ 有什么作用？

其实美元符号$只是 jQuery 的别名，它是 jQuery 的选择器，如下代码：

$(document).ready(function(){});

当然你也可以用 jQuery 来代替 $，如下代码：

jQuery(document).ready(function(){}); 

4、jQuery 中使用过哪些插入节点的方法，他们的区别是什么

1. 在元素内部添加

   1、append：向每个匹配的元素内部追加内容 
   <p>我想说：</p>
   $("p").append("<b>你好</b>")
   <p>我想说：<b>你好</b></p>
   ​
   2、appendTo：将所有匹配的元素追加到指定的元素中
   <p>我想说：</p>
   $("<b>你好</b>").appendTo("p")
   <p>我想说：<b>你好</b></p>
   ​
   3、prepend：向每个匹配的元素内部前置添加内容 
   <p>我想说：</p>
   $("p").prepend("<b>你好</b>") 
   <p><b>你好</b>我想说：</p>
   ​
   4、prependTo：将所有匹配的元素前置到指定的元素中
   <p>我想说：</p>
   $("<b>你好</b>").prependTo("p")
   <p><b>你好</b>我想说：</p>

2. 在元素外部添加

   1、after：在每个匹配元素之后插入内容
   <p>我想说：</p>
   $("p").after("<b>你好</b>")
   <p>我想说：</p><b>你好</b>
           
   2、insertAfter：将所有配的元素插入到指定元素的后面** 
   <p>我想说：</p>
   $("<b>你好</b>").insertAfter("p")
   <p>我想说：</p><b>你好</b>
         
   3、before：在每个匹配的元素之前插入内容
   <p>我想说：</p>
   $("p").before("<b>你好</b>")
   <b>你好</b><p>我想说：</p>
           
   4、insertBefore：将所有匹配的元素插入到指定的元素的前面
   <p>我想说：</p> 
   $("<b>你好</b>").insertBefore("p")
   <b>你好</b><p>我想说：</p>

5、jQuery 中常见的几种函数以及他们的含义是什么

1. get()：取得所有匹配的DOM元素集合

2. get(index)：取得其中一个匹配的元素.index表示取得第几个匹配的元素

3. append(content)：向每个匹配的元素内部追加内容

4. after(content)：在每个匹配的元素之后插入内容

5. html()/html(var)：取得或设置匹配元素的html内容

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

7. bind(type,[data],fn)：为每个匹配元素的特定事件绑定事件处理函数

8. empty()：删除匹配的元素集合中所有的子节点

9. hover(over,out)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

10. attr(name)：取得第一个匹配元素的属性值

11. addClass(class) 和 removeClass(class) 为指定的元素添加或移除样式

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

13. ajax([options])：通过HTTP请求加载远程数据

14. get(url,[data],[callback],[type])：通过远程HTTP GET请求载入信息

15. post(url,[data],[callback],[type])：通过远程HTTP POST请求载入信息

16. load(url,[data],[callback])：载入远程HTML文件代码并插入至DOM中

6、$(this) 和 this 关键字在 jQuery 中有何不同

• $(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用 val() 获取值等等

• 而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用jQuery 方法，直到它被 $() 函数包裹，例如 $(this)