1. JavaScript window.onload 事件和 jQuery ready 函数有何不同?
参考答案
执行时间不同：$(document).ready在页面框架下载完毕后就执行；而window.onload 必须在页面全部加载完毕（包含图片下载）后才能执行。很明显前者的执行效率高于后者。
执行数量不同：$(document).ready可以重复写多个，并且每次执行结果不同；而 window.onload尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出。
2. jQuery 库中的 $() 是什么？
参考答案
$() 函数是 jQuery() 函数的别称。
3. 什么DOM对象？什么是jQuery对象？
参考答案
DOM对象：每一个页面都是一个DOM(Document Object Model，文本对象模型)对象，通过传统的JavaScript方法访问页面中的元素，就是访问DOM对象。
var tDiv=document.getElementById("Tmp"); //获取DOM对象 var oDiv=document.getElementById("Out"); //获取DOM对象 var cDiv=tDiv.innerHTML; //获取DOM对象中的内容 oDiv.innerHTML=cDiv; //设置DOM对象中的内容jQuery对象：在jQuery库中，通过本身自带的方法获取页面元素的对象，称为jQuery对象。
var tDiv=$("#Tmp"); //获取jQuery对象 var oDiv=$("#Out"); //获取jQuery对象 var cDiv=tDiv.html(); //获取jQuery对象中的内容 oDiv.html(cDiv); //设置jQuery对象中的内容
4. jQuery 的选择器的优势何在？
参考答案
- 代码更简单
由于在jQuery库中，封装了大量可以通过选择器直接调用的方法或函数，使编写代码更加简单轻松，简单几行代码就可以实现较为复杂的功能。
- 完善的检测机制
在传统的JavaScript代码中，给页面中某元素设置事务时必须先找到该元素，然后赋予相应的属性或事件；如果该元素在页面中不存在或被前面代码所删除，那么浏览器将提示运行出错信息，影响后续代码的执行。因此，在JavaScript代码中，为了避免显示这样的出错信息，先要检测该元素是否存在，然后再运行其属性或事件代码，从而导致代码冗余，影响执行效率。而在jQuery选择器定位页面元素时，无须考虑所定位的元素在页面中是否存在，即使该元素不存在该元素，浏览器也不提示出错信息，极大地方便了代码的执行效率。
5. jQuery 选择器的类型有哪些？
参考答案
基本选择器、层次选择器、过滤选择器、表单选择器。其中，在过滤选择器中又可分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。
基本选择器是jQuery中使用最频繁的选择器，它由元素ID、Class、元素名、多个选择符组成。
层次选择器是通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系。
简单过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位
可见性过滤选择器根据元素是否可见的特征获取元素
属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以“]”号结束
子元素过滤选择器轻松获取所有父元素中指定的某个元素
表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素
表单选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象
6. jQuery 操作DOM -- 元素属性操作
参考答案
获取元素属性
attr(name);
其中，参数name表示属性的名称设置元素属性
attr(key, value);
其中，参数key表示属性的名称，value表示属性的值。
如果要设置多个属性，也可以通过attr()方法实现：
attr({key0:value0, key1:value1})删除元素属性
removeAttr(name);
其中，参数name为元素属性的名称。
7. jQuery 操作DOM -- 获取和设置元素
参考答案
获取和设置元素内容
html() - 获取或设置元素的HMTL内容
text() - 获取或设置元素的文本内容
获取和设置元素值
val(val)
其中，如果不带参数val，是获取某元素的值 ；反之，则是将参数 val 的值赋给某元素，即设置元素的值。该方法常用于表单中获取或设置对象的值。
8. jQuery 操作DOM -- 元素样式操作
参考答案
直接设置元素样式值
css(name, value)
其中name为样式名称，value为样式的值增加元素CSS类别
addClass(class)
其中，参数 class 为类别的名称，也可以增加多个类别的名称，只需要用空格将其隔开即可：
addClass(class0 class1 ...)切换元素CSS类别
toggleClass(class)
其中，参数 class 为类别名称，其功能是当元素中含有名称为 class 的 CSS 类别时，删除该类别，否则增加一个该名称的 CSS类别。删除元素CSS类别
removeClass([class])
其中，参数 class 为类别名称，该名称是可选项。当选该名称时，删除名称是 class 的类别，有多个类别时用空格隔开。如果不选名称，则删除元素中的所有类别
9. jQuery 操作DOM -- 页面元素操作
参考答案
创建节点元素
$(html)
其中，参数 html 表示用于动态创建 DOM 元素的 HTML 标记字符串内部插入节点
外部插入节点
复制元素节点
clone()
其功能为复制匹配的 DOM 元素并且选中复制成功的元素。该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。
clone(true)
其中的参数设置为 true，就可以复制元素的所有事件处理替换元素节点
replaceWith(content)
该方法的功能是将所有选择的元素替换成指定的HTML或DOM元 素，其中参数content为被所选择元素替换的内容。
replaceAll(selector)
该方法的功能是将所有选择的元素替换成指定 selector 的元素，其中参数 selector 为需要被替换的元素。
二者最大的区别在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。 一旦完成替换， 被替换元素中的全部事件都将消失包裹元素节点
遍历元素
each(callback)
其中，参数 callback 是一个 function 函数，该函数还可以接受一个形参 index，此形参为遍历元素的序号(从0开始)；如果需要访问元素中的属性，可以借助形参 index，配合 this 关键字来实现元素属性的设置或获取
删除页面元素
remove() 方法
remove([expr])
其中参数 expr 为可选项，如果接受参数，则该参数为筛选元素的 jQuery 表达式，通过该表达式获取指定的元素，并进行删除。
empty () 方法
empty()
其功能为清空所选择的页面元素或所有的后代元素
10. jQuery 事件 -- 事件机制
参考答案
事件冒泡：事件在执行过程中存在冒泡现象 ，最里面的元素的事件被触发时，外围元素的事件也被触发，其整个事件波及的过程就像水泡一样向外冒 ，故称为冒泡过程。
阻止冒泡：
非IE：event.stopPropagation(); 只有当cancelable属性设置为true时才能使用
IE：cancelBubble = true;
11. jQuery 事件 -- 页面载入事件 ready()方法
参考答案
ready()方法的工作原理 ：
在 jQuery 脚本加载到页面时 ，会设置一个isReady 的标记，用于监听页面加载的进度。遇到执行ready()方法时 ，通过查看isReady值是否被设置 ，如果未被设置 ，那么就说明页面并未加载完成 ，在此情况下，将未完成的部分用一个数组缓存起来，当全部加载完成后 ，再将未完成的部分通过缓存 一一执行。reday()方法的写法：
写法一：$(document).ready(function () { //代码部分 })写法二：
$(function () { //代码部分 })写法三：
jQuery(document).ready(function () { //代码部分 })写法四：
jQuery(function () { //代码部分 })
12. jQuery 事件 -- 绑定事件
参考答案
- 使用bind()方法绑定事件
bind()功能是为每个选择元素的事件绑定处理函数，其语法格式如下：
bind(type, [data], fn)
参数type为一个或多个类型的字符串，如“click”或“change”，也可以自定义类型；可以被参数type调用的类型包括blur、focus、load、resize、scroll、unload、click、 dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error。
参数data是作为event.data属性值传递给事件对象的额外数据对象。
参数fn是绑定到每个选择元素的事件中的处理函数。
- 通过映射方式绑定事件
例如：
$(".txt").bind({ focus: function() { $("#divTip").show() //显示 .html("执行的是focus事件"); //设置文本 }, change: function() { $("#divTip").show() //显示 .html("执行的是change事件"); //设置文本 } })
13. jQuery 事件 -- 切换事件
参考答案
hover()方法
使元素在鼠标悬停与鼠标移出的事件中进行切换
hover()功能是当鼠标移动到所选的元素上面时，执行指定的第一个函数；当鼠标移出这个元素时，执行指定的第二个函数，其语法格式如下：
hover(over, out)
其中，参数over为鼠标移到元素时触发的函数，参数out为鼠标移出元素时触发的函数。toggle()方法
在toggle()方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用。
toggle()方法的功能是每次单击后依次调用函数，请注意“依次”这两个字，说明该方法在调用函数时并非随机或指定调用，而是通过函数设置的前后顺序进行调用，其调用的语法格式如下：
toggle(fn, fn2, [fn3, fn4, ...])
其中参数fn，fn2，...，fnN为单击时被依次调用的函数。
14. jQuery 事件 -- 移除事件 unbind()方法
参考答案
unbind()的功能是移除元素绑定的事件，其调用的语法格式如下：
unbind([type], [fn])
其中，参数type为移除的事件类型，fn为需要移除的事件处理函数。如果该方法没有参数，移除所有绑定的事件；如果带有参数type，移除该参数所指定的事件类型；如果带有参数fn，则只移除绑定时指定的函数fn。
15. jQuery 事件 -- 其他事件
参考答案
one()方法
one()方法功能是为所选的元素绑定一个仅触发一次的处理函数，其调用的语法格式为：
one(type, [data], fn)
其中，参数type为事件类型，即需要触发什么类型的事件；参数data为可选参数，表示作为event. data属性值传递给事件对象的额外数据对象；fn为绑定事件时所要触发的函数。下trigger()方法
trigger()方法的功能是在所选择的元素上触发指定类型的事件。其调用的语法格式为：
trigger(type, [data])
其中，参数type为触发事件的类型，参数data为可选项，表示在触发事件时传递给函数的附加参数
16. jQuery 动画和特效
参考答案
- 显示和隐藏
show()与hide()方法
动画效果的显示功能：
show(speed, [callback])
动画效果的隐藏功能：
hide(speed, [callback])
方法中的参数speed表示执行动画时的速度，该速度有3个默认字符值“slow”、“normal”、“fast”，其对应的速度分别是“0.6秒”、“0.4秒”、“0.2秒”；如果不使用默认的字符值，也可以直接写入数字，如“3000”表示该动画执行的速度为3000毫秒。可选型参数[callback]为在动画完成时执行的回调函数，该函数每个元素执行一次。
- 滑动
slideDown()方法：
slideDown(speed, [callback])
其功能是以动画的效果将所选择元素的高度向下增大，使其呈现一种“滑动”的效果，而元素的其他属性并不发生变化；参数speed为动画显示的速度，可选项[callback]为动画显示完成后，执行的回调函数。
slideUp ()方法：
slideUp(speed, [callback])
其功能是以动画的效果将所选择元素的高度向上减小，同样也是仅改变高度属性，其包含的参数作用与slideDown()方法一样。
slideToggle()方法：
slideToggle(speed, [callback])
该方法的功能是以动画的效果切换所选择元素的高度，即：如果高，则减小；如果低，则增大。同时，在每次执行动画完成后，可执行一个用于回调的函数。其包含的参数功能与方法slideDown()或slideUp()一样
- 淡入淡出
fadeIn()方法：
fadeIn(speed, [callback])
该方法的功能是通过改变所选元素透明度，实现淡入的动画效果，并在完成时，可执行一个回调的函数。参数speed为动画效果的速度，可选项参数[callback]为动画完成时执行的函数。
fadeOut()方法：
fadeOut(speed, [callback])
该方法的功能是通过改变所选元素透明度，实现淡出的动画效果，其包含参数的功能与fadeIn()方法一样。
- 自定义动画
animate方法：
animate(params, [duration], [easing], [callback])
参数params表示用于制作动画效果的属性样式和值的集合。
可选项[duration]表示三种默认的速度字符"slow"、"normal"、"fast"或自定义的数字。
可选项[easing]为动画插件使用，用于控制动画的表现效果，通常有"linear" 和"swing"字符值。
可选项[callback]为动画完成后，执行的回调函数。
17. jQuery中的ajax方法 -- 加载异步数据
参考答案
- 传统的JavaScript方法 - 见https://blog.csdn.net/weixin_37580235/article/details/81459282
- jQuery的load()方法
load(url, [data], [callback])
参数url为被加载的页面地址
可选项[data]参数表示发送到服务器的数据，其格式为key/value。
可选项[callback]参数表示加载成功后，返回至加载页的回调函数
- jQuery的getJSON()方法
$.getJSON(url, [data], [callback])
参数url表示请求的地址
可选项[data]参数表示发送到服务器的数据，其格式为key/value。
可选项[callback]参数表示加载成功时执行的回调函数
- jQuery的getScript()方法
$.getScript(url, [callback])
参数url为等待加载的JS文件地址
可选项[callback]参数表示加载成功时执行的回调函数。
18. jQuery中的ajax方法 -- 请求服务器数据
参考答案
- jQuery的get()方法
$.get(url, [data], [callback], [type])
参数url表示等待加载的数据地址
可选项[data]参数表示发送到服务器的数据，其格式为key/value
可选项[callback]参数表示加载成功时执行的回调函数
可选项[type]参数表示返回数据的格式
- jQuery的post()方法
$.post(url, [data], [callback], [type])
参数url表示等待加载的数据地址
可选项[data]参数表示发送到服务器的数据，其格式为key/value
可选项[callback]参数表示加载成功时执行的回调函数
可选项[type]参数表示返回数据的格式
19. jQuery中的ajax方法 -- $.ajax()方法
参考答案
$.ajax([options])
可选项参数[options]为$.ajax()方法中的请求设置，其格式为key/value，既包含发送请求的参数，也含有服务器响应后回调的数据
20. jQuery中的ajax方法 -- Ajax中的全局事件
参考答案
21. jQuery调用JSON数据
参考答案
- 读取
将一个JSON格式的数据赋值给一个变量，就可以通过点号“.”，以“变量名.记录名称”的形式读取名称对应的值。
var objInfo = { 'name': 'Any', 'sex': '女', 'age': 19 }; $(function() { console.log("姓名：" + objInfo.name); console.log("性别：" + objInfo.sex); console.log("年龄：" + objInfo.age); })
- 遍历
JSON数据中的“value”值以数组的形式展示时，在取值时，只需要遍历整个JSON数据，以“变量名.名称”的形式逐层读取即可。
var objData = { member: [{ grade: "一年级", students: { name: ["刘小芳", "李大明"] } }, { grade: "二年级", students: { name: ["陈优", "王小海", "朱红"] } }, { grade: "三年级", students: { name: ["张妍", "蔡霞"] } }] }; $(function() { var objmember = objData.member; $.each(objmember, function(index) { console.log(objmember[index].students.name); }); });
- 操作
找到该对象中需要修改的名称，并对该名称重新进行赋值。