jquery面试题

最新推荐文章于 2024-04-07 11:05:25 发布

hxyfdsal

最新推荐文章于 2024-04-07 11:05:25 发布

阅读量464

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

原文链接：https://blog.csdn.net/fdsal/article/details/115691562?spm=1001.2014.3001.5501

1、你为什么要使用jQuery？你觉得jquery有哪些好处？

因为jQuery是轻量级的框架，大小不到30kb
它有强大的选择器，出色的DOM操作的封装
有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)
完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。)
出色的浏览器的兼容性
支持链式操作，隐式迭代
行为层和结构层的分离，还支持丰富的插件，jquery的文档也非常的丰富

2、$(document).ready() $(functiion({}))方法和window.onload有什么区别？

两个方法的功能相似，但在实行时机方面是有区别的
1、window.onload方法是在网页中所有的元素完全加载到浏览器后才执行
2、$(document).ready() 可以在DOM载入就绪是就对其进行操纵，并调用执行绑定的函数

3、你知道jQuery中的选择器吗，有哪些选择器

大致分为：基本选择器，层次选择器，表单选择器
基本选择器：id选择器，标签选择器，类选择器等
层次选择器：如：$("form input") 选择所有的form元素中的input元素 $("#main > *")选择id为main的所有子元素
过滤选择器：如：$("tr:first")选择所有tr元素的第一个  $("tr:last")选择所有tr元素的最后一个
表单选择器：如：$(":input")选择所有的表单输入元素 $(":text")选择所有的text的input元素

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

//回答：其实美元符号$只是”jQuery”的别名，它是jQuery的选择器，如下代码：
$(document).ready(function(){  
 
});
//当然你也可以用jQuery来代替$，如下代码：
jQuery(document).ready(function(){  
 
});

5、jQuery对象和DOM对象是怎样转换的

jQuery对象是一个包含了dom对象的数组可以通过jQuery对象[下标]获取dom对象
将dom对象放入$("")中转为jQuery对象

6、jQuery中`$.get()`提交和`$.post()`提交的区别

$.get()使用GET方法来进行异步提交 $.post()使用POST方法来进行异步提交
get请求方式将参数跟在url后进行传递用户可见 post请求则是作为http消息的实体内容发送给服务器，用户不可见
post传输数据比get大
get请求的数据会被浏览器缓存不安全

7、怎么使用jQuery中的动画

隐藏：hide()
显示：show()

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#hide").click(function () {
        $("p").hide();
      });
      $("#show").click(function () {
        $("p").show();
      });
    });
  </script>
</head>

<body>
  <p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
  <button id="hide" type="button">隐藏</button>
  <button id="show" type="button">显示</button>
</body>

</html>

在这里插入图片描述
淡入淡出：
fadeIn() == 淡入(显示)

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
      });
    });
  </script>
</head>

<body>
  <p>演示带有不同参数的 fadeIn() 方法。</p>
  <button>点击这里，使三个矩形淡入</button>
  <br><br>
  <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
  <br>
  <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
  <br>
  <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>

</html>

在这里插入图片描述

fadeOut() == 淡出(消失)

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeOut();
        $("#div2").fadeOut("slow");
        $("#div3").fadeOut(3000);
      });
    });
  </script>
</head>

<body>
  <p>演示带有不同参数的 fadeOut() 方法。</p>
  <button>点击这里，使三个矩形淡出</button>
  <br><br>
  <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
  <br>
  <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
  <br>
  <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>

</html>

在这里插入图片描述
滑动：slideUp() == 向上滑动

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $(".flip").click(function () {
        $(".panel").slideUp("slow");
      });
    });
  </script>

  <style type="text/css">
    div.panel,
    p.flip {
      margin: 0px;
      padding: 5px;
      text-align: center;
      background: #e5eecc;
      border: solid 1px #c3c3c3;
    }

    div.panel {
      height: 120px;
    }
  </style>
</head>

<body>

  <div class="panel">
    <p>jQuery slideUp() 方法用于向上滑动元素。</p>
    <p>可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。</p>
  </div>

  <p class="flip">请点击这里</p>

</body>

</html>

在这里插入图片描述

slideDown() == 向下滑动

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $(".flip").click(function () {
        $(".panel").slideDown("slow");
      });
    });
  </script>

  <style type="text/css">
    div.panel,
    p.flip {
      margin: 0px;
      padding: 5px;
      text-align: center;
      background: #e5eecc;
      border: solid 1px #c3c3c3;
    }

    div.panel {
      height: 120px;
      display: none;
    }
  </style>
</head>

<body>

  <div class="panel">
    <p>jQuery slideDown() 方法用于向下滑动元素。</p>
    <p>可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。</p>
  </div>

  <p class="flip">请点击这里</p>

</body>

</html>

在这里插入图片描述

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

在元素内部添加
append：向每个匹配的元素内部追加内容 
        <p>我想说：</p>
        $("p").append("<b>你好</b>") 
        <p>我想说：<b>你好</b></p>
 
appendTo：将所有匹配的元素追加到指定的元素中 
        <p>我想说：</p> 
        $("<b>你好</b>").appendTo("p") 
        <p>我想说：<b>你好</b></p>
 
prepend：向每个匹配的元素内部前置添加内容 
        <p>我想说：</p> 
        $("p").prepend("<b>你好</b>") 
        <p><b>你好</b>我想说：</p>
 
prependTo：将所有匹配的元素前置到指定的元素中 
        <p>我想说：</p> 
        $("<b>你好</b>").prependTo("p") 
        <p><b>你好</b>我想说：</p>
 
在元素外部添加
after：在每个匹配元素之后插入内容 
        <p>我想说：</p> 
        $("p").after("<b>你好</b>") 
        <p>我想说：</p><b>你好</b>
 
insertAfter：将所有配的元素插入到指定元素的后面 
        <p>我想说：</p> 
        $("<b>你好</b>").insertAfter("p") 
        <p>我想说：</p><b>你好</b>
 
before：在每个匹配的元素之前插入内容 
        <p>我想说：</p> 
        $("p").before("<b>你好</b>") 
        <b>你好</b><p>我想说：</p>
 
insertBefore：将所有匹配的元素插入到指定的元素的前面 
        <p>我想说：</p> 
        $("<b>你好</b>").insertBefore("p") 
        <b>你好</b><p>我想说：</p>

9、jQuery中如何来获取和设置属性

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

attr()获取元素属性

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        alert($("#w3s").attr("href"));
      });
    });
  </script>
</head>

<body>
  <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
  <button>显示 href 值</button>
</body>

</html>

在这里插入图片描述
attr()设置元素属性

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $("#w3s").attr("href", "https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E5%A5%B3%E8%A3%85&clk1=5d6c028d72f4e5dd64a2b8ea7f7d5cd6&upsId=5d6c028d72f4e5dd64a2b8ea7f7d5cd6");
      });
    });
  </script>
</head>

<body>
  <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
  <button>改变 href 值</button>
  <p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</body>

</html>

在这里插入图片描述
removeAttr()删除元素属性

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("button").click(function () {
        $("p").removeAttr("style");
      });
    });
  </script>
</head>

<body>
  <h1>这是一个标题</h1>
  <p style="font-size:120%;color:red">这是一个段落。</p>
  <p>这是另一个段落。</p>
  <button>删除所有 p 元素的 style 属性</button>
</body>

</html>

在这里插入图片描述

10.如何来设置和获取HTML和文本的值？

//获取HTMl：
$("选择器").html()
//获取文本的值：
$("选择器").text()

11、jQuery中有哪些方法可以遍历节点？

children():获取匹配元素的子元素集合，不考虑后代元素 $(function(){$("div").children()})
next()获取匹配元素后面紧邻的同级元素
prev()获取匹配元素前紧邻的同级元素
siblings()获取匹配元素前后的所有同辈元素

12、radio单选组的第二个元素为当前选中的值，该怎么去取

$('input[type=radio]')[1].checked=true

13、什么是JSON,在什么情况下使用?

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON采用完全独立于语言的文本格式.
JSON最常见的用法之一,是从web服务器上读取JSON数据,将JSON数据转换为JavaScript对象,然后在网页中使用该数据.

14、说出jQuery中常见的几种函数以及他们的含义是什么?

jQuery中常见的函数如下:

get()取得所有匹配的DOM元素集合.
get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素.
append(content)向每个匹配的元素内部追加内容.
after(content)在每个匹配的元素之后插入内容.
html()/html(var)取得或设置匹配元素的html内容.
find(expr)搜索所有与指定表达式匹配的元素.
bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数.
empty()删除匹配的元素集合中所有的子节点.
hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.
attr(name)取得第一个匹配元素的属性值.
addClass(class)和removeClass(class)为指定的元素添加或移除样式.
css(name)访问第一个匹配元素的样式属性.
ajax([options])通过HTTP请求加载远程数据.
get(url,[data],[callback],[type])通过远程HTTP GET请求载入信息.
post(url,[data],[callback],[type])通过远程HTTP POST请求载入信息.
load(url,[data],[callback])载入远程HTML文件代码并插入至DOM中.

15、AJAX都有哪些优点和缺点？

ajax的优点

最大的一点是页面无刷新，用户的体验非常好。
使用异步方式与服务器通信，具有更加迅速的响应能力。
可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

ajax的缺点

ajax不支持浏览器back按钮。
安全问题 AJAX暴露了与服务器交互的细节。
对搜索引擎的支持比较弱。
破坏了程序的异常机制。
不容易调试。

16、AJAX最大的特点是什么。

Ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

17、怎么阻止冒泡过程？

stopPropagation(); // 阻止冒泡过程

18、bind()方法绑定事件有了解吗？

bind(type,[data],fn);
绑定类型： blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, select, submit , keydown, keypress, keyup, error, mousemove, mouseover, mouseout, mouseenter, mouseleave, change
$("#btn").bind("click", function(){});
$(".txt").bind("focus", { msg: message }, function(event){ // 获取数据 event.data.msg });

19、hover()方法和toggle()方法区别？

hover()方法：语法结构为： hover(enter,leave)。用于模拟光标悬停事件。当光标移动到目标元素上时，会触发指定第1个函数(enter);当移出这个元素时，会触发第2个函数(leave)。

$("a").hover(function(){ // 执行一 }, function() { // 执行二 });
hover(over, out)
$("a").mouseenter(function(){});
$("a").mouseleave(function(){});

toggle()方法：语法结构为：toggle(fnl, fn2, …fnN)。主要用于模拟鼠标连续单击事件。第1次单击元素，触发指定的第1个函数(fn1)；当再次单击同一元素时，则触发指定的第2个函数(fh2)；如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的循环调用。

toggle()方法可以依次执行函数

toggle(fn, fn2, fn3...);

20、简单的动画效果？

animate(params,[duration],[easing],[callback])
<script type="text/javascript">
 $(function(){
  $("p").click(function(){
    $(this).animate({height: 100}, "slow")
    .animate({width:100},"slow")
    .animate({height:50},"slow")
    .animate({width:50},"slow");
   })
 })
</script>

21、使用animate()方法

$("p").animate({height: "hide", width: "hide", opacity: "hide" }, 300);
$("p").hide(300);
$("p").animate({ opacity: "hide" }, 300);
$("p").fadeOut(300);
$("p").animate( {height: "hide" }, 300);
$("p").slideUp(300);
$("p").animate( {opacity: "0.8" }, 300);
$("p").fadeTo(300, "0.8");

选择器

基本选择器

22、什么是#id，element，.class，*，selector1, selector2, selectorN？

根据给定的id匹配一个元素，用于搜索，通过id的属性给定值。

案例：查找id为da3的元素

html代码：
<div id="da1"></div>
<div id="da2"></div>
<div id="da3"></div>

jquery代码：
$("#da3");

结果：
[ <div id="da3"></div> ]

html代码：
<div id="da:q"></div>

jquery代码：
$("#da\\:q");

根据给定的元素名匹配所有元素

案例，查找div元素：

html代码：
<div> da1 </div>
<div> da2 </div>
<p>da3</p>

jquery代码：
$("div");

结果：
[ <div> da1 </div> , <div> da2 </div> ]

根据给定的类匹配元素

html代码：
<div class="dashu"> dashu </div>
<div class="da"> da </div>

jquery代码:
$(".da");

结果:
[ <div class="da"> da </div> ]

匹配所有元素*

html代码：
<div> 1 </div>
<p> 2 </p>

jquery代码：
$("*");

结果：
[ <div> 1 </div>, <p> 2 </p> ]

将每一个选择器匹配到的元素合并后一起返回：

html代码：
<div class="da"></div>
<p></p>
<span></span>

jquery代码：
$(".da, p, span");

结果：
[ <div class="da"></div>, <p></p>, <span></span> ]

层级选择器

23、后代选择器，子代选择器，next，siblings描述？

给祖先元素下匹配所有的后代元素

html代码：
<table>
 <input id="da"></input>
 <input id="da2"></input>
 <p></p>
</table>

jquery代码:
$("table input");

结果：
[ <input id="da"></input>, <input id="da2"></input> ]

给父元素下匹配所有子元素：

html代码：
<table>
 <input id="da"></input>
 <p>
 <input id="da2"></input>
 </p>
 <p></p>
</table>

jquery代码:
$("table > input");
结果：
[ <input id="da"></input> ]

匹配所有prev元素后的next元素：

html代码：
<table>
 <p>
 <input id="da"></input>
 </p>
 <p>
 <input id="da2"></input>
 </p>
 <p></p>
</table>

jquery代码:
$("p + input");

结果：
[ <input id="da"></input>, <input id="da2"></input> ]

匹配prev元素后的所有siblings元素：
找出同辈的元素

html代码：
<table>
 <p>
 <input id="da"></input>
 </p>
 <p>
 <input id="da2"></input>
 </p>
 <p></p>
</table>
<input id="da3"></input>

jquery代码：
$("table ~ input");

结果：
[ <input id="da3"></input> ]

24、基本选择器:?

:first :last :not :even :odd :eq :gt :lt :header :animated

获取第一个元素

<ul>
 <li>1</li>
 <li>2</li>
</ul>

$("li").first();
或
$("li :first");

[ <li>1</li> ]

获取最后一个元素

<ul>
 <li>1</li>
 <li>2</li>
</ul>

$('li').last();
$("li :last");

[ <li>2</li> ]

去除所有与给定选择器匹配的元素
查找所有未选中的 input 元素

<input name="da1" />
<input name="da2" checked="checked" />

$("input:not(:checked)")

[ <input name="da1" /> ]

匹配所有索引值为偶数的元素

<table>
  <tr><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
</table>

$("tr:even")

[ <tr><td>0</td></tr>, <tr><td>2</td></tr> ]

匹配所有索引值为奇数的元素

匹配所有索引值为奇数的元素

<table>
  <tr><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
</table>

$("tr:odd")

[ <tr><td>1</td></tr> ]

匹配一个给定索引值的元素

<table>
  <tr><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
</table>

$("tr:eq(1)")

[ <tr><td>1</td></tr> ]

匹配所有大于给定索引值的元素

<table>
  <tr><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
</table>

$("tr:gt(0)")

[ <tr><td>1</td></tr>, <tr><td>2</td></tr> ]

匹配所有小于给定索引值的元素

<table>
  <tr><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
</table>

$("tr:lt(2)")

[ <tr><td>0</td></tr>, <tr><td>1</td></tr>]

匹配标题元素

<h1>1</h1>
<p>1</p>
<h2>2</h2>
<p>2</p>

$(":header");

[ <h1>1</h1>, <h2>2</h2>]

匹配所有正在执行动画效果的元素

25、内容选择器的描述？

:contains :empty :has :parent

匹配包含给定文本的元素
匹配所有不包含子元素或者文本的空元素
匹配含有选择器所匹配的元素的元素
匹配含有子元素或者文本的元素

26、可见性选择器

:hidden :visible

匹配所有不可见元素

display:none

type="hidden"

匹配所有的可见元素

27、属性选择器的描述？

[attribute]
[attribute = value] 
匹配给定的属性是某个特定值的元素
[attribute != value] 
匹配所有不含有特定的属性
[attribute ^= value]
匹配给定的属性以某值开始的元素
[attribute $= value]
匹配给定的属性以某值结尾的元素
[attribute *= value]
匹配有包含某些值的特定元素
[selector1][selector2]
同时满足多个条件使用

$("div[id]");

<div>
 <p></p>
</div>
<div id="da"></div>

获取
[<div id="da"></div>]

$("div [id='da']")

28、选择器-子元素有哪些？

:nth-child 
从1开始的，匹配父元素下第n个元素
$("ul li:nth-child(2)"); 获取2 3 4。。

:first-child
匹配每个父元素下的第一个子元素

:last-child
匹配每个父元素下的最后一个子元素

:only-child
匹配父元素中只有唯一的子元素，如果父元素中有多个子元素，就不会被匹配

29、表单元素有哪些？

:input
会获取所有input,textarea,select,button
:text
匹配所有单行文本元框
:password
匹配所有密码框
:radio
匹配所有单选按钮
:checkbox
匹配所有复选框
:submit
匹配所有提交按钮
:image
匹配所有图像
:reset
匹配所有重置按钮
:button
匹配所有按钮
:file
匹配所有文本域
:hidden
匹配所有不可见元素

30、选择器表单对象属性有哪些？

:enabled
匹配所有可用元素
:disabled
匹配所有不可用元素
:checked
匹配所有选中元素
:selected
匹配所有选中option元素

31、在jquery中有哪些属性？

attr(name);
获取属性值
attr(properties);
以“名/值对”对象添加属性
attr(key,value);
为所匹配的元素设置属性值
attr(key, function(index, attr));
为所匹配的元素设置属性值
removeAttr(name);
删除属性

32、css 类属性有哪些?

addClass(class);
添加一个类名 $(“p”).addClass(“selected”);
addClass(function(index, class));
添加类名 $(‘ul li:last’).addClass(function() {})
removeClass([class]);
删除指定类
removeClass(function(index, class))
删除指定类
toggleClass(class);
有切换效果，如果有这个属性值就删除如果没有就添加
toggleClass(class, switch);
switch为ture添加class，反之删除
toggleClass(function(index, class), [switch]);
switch为ture添加class，反之删除

33、html代码？

html()
获取html内容
html(val)
设置html内容的值
html(function(index, html));
设置html内容的值

34、文本有哪些？

text()
获取元素内容
text(val)
设置内容文本
text(function(index, text))
设置内容文本

35、关于val有哪些？

val()
获取元素的当前值
val(val)
设置匹配元素的值
val(array)
赋值作用
val(function(index, value))
设置元素值

36、过滤选择器

eq(index): 获取第n个元素 $("p").eq(1)

first()： 获取第一个元素 $('li').first()

last()：获取最后一个元素 $('li').last()

hasClass(class)：判断是否有给类

filter(expr)：选出表达式匹配的元素

is(expr)：进行判断

map(callback)：$.map()

has(expr)：保留 .has()
not(expr)： .not()

37、一些方法？

children();
获取子元素
find();
用于查找表达式
next();
获取下一个元素
nextAll();
获取下一个所有元素
parent();
获取父元素
parents();
获取所有匹配元素的祖先元素的集合
prev();
获取前一个元素
prevAll();
获取之前所有同辈元素
siblings(); $("div").siblings()

add(); $("p").add("span")

$("p").add("<span>da</span>");

<p></p> <span>da</span>

38、文档处理

append()
中间插入
<p></p>
$("p").append("<div></div>");
<p><div></div></p>

appendTo();

<p></p>
<div><div>

$("p").appendTo("div");
<div><p></p></div>

prepend() 元素内部前置内容
<p>hello</p>

$("p").prepend("<b></b>");

<p><b></b>hello</p>

$("p").prependTo("<b></b>");

<b><p></p></b>

after(); 在后面追加
before(); 在前面追加

$("p").insertAfter("#foo");
<div id="foo">da</div><p>da</p>

$("p").insertBefore("#foo");
<p></p><div id="foo"></div>

wrap();

$("p").wrap("<div></div>");

<div><p></p></div>

jquery面试题

1、你为什么要使用jQuery？你觉得jquery有哪些好处？

2、$(document).ready() $(functiion({}))方法和window.onload有什么区别？

3、你知道jQuery中的选择器吗，有哪些选择器

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

5、jQuery对象和DOM对象是怎样转换的

6、jQuery中$.get()提交和$.post()提交的区别

7、怎么使用jQuery中的动画

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

9、jQuery中如何来获取和设置属性

10.如何来设置和获取HTML和文本的值？

11、jQuery中有哪些方法可以遍历节点？

12、radio单选组的第二个元素为当前选中的值，该怎么去取

13、什么是JSON,在什么情况下使用?

14、说出jQuery中常见的几种函数以及他们的含义是什么?

15、AJAX都有哪些优点和缺点？

16、AJAX最大的特点是什么。

17、 怎么阻止冒泡过程？

18、bind()方法绑定事件有了解吗？

19、hover()方法和toggle()方法区别？

20、简单的动画效果？

21、使用animate()方法

选择器

基本选择器

22、什么是#id，element，.class，*，selector1, selector2, selectorN？

层级选择器

23、后代选择器，子代选择器，next，siblings描述？

24、基本选择器:?

25、内容选择器的描述？

26、可见性选择器

27、属性选择器的描述？

28、选择器-子元素有哪些？

29、表单元素有哪些？

30、选择器表单对象属性有哪些？

31、在jquery中有哪些属性？

32、css 类属性有哪些?

33、html代码？

34、文本有哪些？

35、关于val有哪些？

36、过滤选择器

37、一些方法？

38、文档处理

6、jQuery中`$.get()`提交和`$.post()`提交的区别

17、怎么阻止冒泡过程？