Jquery 面试题

Ajax是异步的流程：

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求 .(sned)
(5)获取异步调用返回的数据.(onreadystatechange)
(6)使用JavaScript和DOM实现局部刷新.

Get和Post方式的区别：

1、 Get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
2、 对于Get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。
3、Get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，因服务器的不同而异.
4、Get安全性非常低，post安全性较高。
5、跟是一样的，也就是说，action页面后边带的参数列表会被忽视；而跟是不一样的。

另外
Get请求有如下特性：它会将数据添加到URL中，通过这种方式传递到服务器，通常利用一个问号？代表URL地址的结尾与数据参数的开端，后面的参数每一个数据参数以“名称=值”的形式出现，参数与参数之间利用一个连接符&来区分。
Post请求有如下特性：数据是放在HTTP主体中的，其组织方式不只一种，有&连接方式，也有分割符方式，可隐藏参数，传递大批数据，比较方便。
总而言之：当我们在提交表单的时候我们通常用post方式,当我们要传送一个较大的数据文件时,需要用post。当传递的值只需用参数方式(这个值不大于2KB)的时候,用get方式即可。

使用eval parse,鉴于安全性考虑 使用parse更靠谱;
JSON.parse() 方法用于解析一个JSON字符串，并将其转换为JavaScript对象
let obj = JSON.parse(jsonData);
console.log(obj);

jQuery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jQuery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链。
(function( window, undefined ) {
//用一个函数域包起来，就是所谓的沙箱
//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局
//把当前沙箱需要的外部变量通过函数参数引入进来
//只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
window.jQuery = window.$ = jQuery;
}
)( window );
jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法。
有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度。
jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。

优点：
1）无刷新更新数据（在不刷新整个页面的情况下维持与服务器通信）
2）异步与服务器通信（使用异步的方式与服务器通信，不打断用户的操作）
3）前端和后端负载均衡（将一些后端的工作交给前端，减少服务器与宽度的负担）
4）界面和应用相分离（ajax将界面和应用分离也就是数据与呈现相分离）
缺点：
1）ajax不支持浏览器back按钮
2）安全问题 Aajax暴露了与服务器交互的细节
3）对搜索引擎的支持比较弱
4）破坏了Back与History后退按钮的正常行为等浏览器机制

JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样！

1.总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。
2.在class前使用tag(标签名)在jQuery中第二快的选择器是tag(标签)选择器(比如：$(“head”))
3.将jQuery对象缓存起来把jQuery对象缓存起来就是要告诉我们要养成将jQuery对象缓存进变量的习惯。
4.如果你打算在其他函数中使用jQuery对象，那么你必须把它们缓存到全局环境中。
5.冒泡除非在特殊情况下,否则每一个js事件(例如:click,mouseover等.)都会冒泡到父级节点。
6.推迟到$(window).load。
jQuery对于开发者来说有一个很诱人的东西,可以把任何东西挂到$(document).ready下。尽管$(document).rady确实很有用，它可以在页面渲染时，其它元素还没下载完成就执行。如果你发现你的页面一直是载入中的状态，很有可能就是$(document).ready函数引起的。你可以通过将jQuery函数绑定到$(window).load事件的方法来减少页面载入时的cpu使用率。它会在所有的html(包括iframe)被下载完成后执行。一些特效的功能，例如拖放,视觉特效和动画,预载入隐藏图像等等，都是适合这种技术的场合。
7.压缩JavaScript。
在线压缩地址:http://dean.edwards.name/packer/压缩之前，请保证你的代码的规范性，否则可能失败，导致Js错误。
8.尽量使用ID代替Class。
9.给选择器一个上下文。
jQuery选择器中有一个这样的选择器，它能指定上下文。jQuery(expression,context);通过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提高效率。普通方式：$(‘.myDiv’)改进方式：$(‘.myDiv’,$(“#listItem”))。
10.慎用.live()方法（应该说尽量不要使用）。

选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。

jQuery中有个动画队列的机制。当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行。可是用户的操作往往都比动画快，如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，影响到效果。jQuery中有stop这个方法可以停止当前执行的动画，并且它有两个布尔参数，默认值都为false。第一个参数为true时会清空动画队列，第二个参数为true时会瞬间完成掉当前动画。所以，我们经常使用obj.stop(true,true)来停止动画。但是这还不够！正如jQuery文档中的说法，即使第二个参数为true，也仅仅是把当前在执行的动画跳转到完成状态。这时第一个参数如果也为true，后面的队列就会被清空。如果一个效果需要多个动画同时处理，我们仅完成其中的一个而把后面的队列丢弃了，这就会出现意料之外的结果。

(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.
(2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.
(3)设置响应`HTTP`请求状态变化的函数.
(4)发送`HTTP`请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState === 4 & xmlHttp.status === 200) {
}
}

$ () 函数是 jQuery() 函数的别称。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象

$(’[name=selectname] :selected’)

$(’[name=selectname] :selected’)

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

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

获得a标签的onclick属性: $(“a”).attr(“onclick”);
删除onclick属性：$(“a”).removeAttr(“onclick”);
设置onclick属性：$(“a”).attr(“onclick”,“test();”);

(selector).addClass(class)：为每个匹配的元素添加指定的类名
$(selector).removeClass(class)：从所有匹配的元素中删除全部或者指定的类，删除class中某个值；
$(selector).toggleClass(class)：如果存在（不存在）就删除（添加）一个类
$(selector).removeAttr(class);删除class这个属性；

(1)、基本选择器：#id，class,element,*;
(2)、层次选择器：parent > child，prev + next ，prev ~ siblings
(3)、基本过滤器选择器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt
(4)、内容过滤器选择器： :contains ，:empty ，:has ，:parent
(5)、可见性过滤器选择器：:hidden ，:visible
(6)、属性过滤器选择器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]
(7)、子元素过滤器选择器：:nth-child ，:first-child ，:last-child ，:only-child
(8)、表单选择器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；
(9)、表单过滤器选择器：:enabled ，:disabled ，:checked ，:selected

delegate()会在以下两个情况下使用到：
1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：
$(“ul”).delegate(“li”, “click”, function(){ $(this).hide(); });
2、当元素在当前页面中不可用时，可以使用delegate()

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

相同点：都是异步请求的方式来获取服务端的数据；
异同点：
1、请求方式不同： $ .get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。
2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。
3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多
4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题

(1)、bind 【jQuery 1.3之前】
定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；
语法：bind(type,[data],function(eventObject))；
特点：
(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。
(2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。
实例如下：$( “#members li a” ).bind( “click”, function( e ) {} );

(2)、live 【jQuery 1.3之后】
定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；
语法：live(type, [data], fn);
特点：
(1)、live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。
(2)、live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document，新添加的元素不必再绑定一次监听器。
(3)、使用live（）方法但却只能放在直接选择的元素后面，不能在层级比较深，连缀的DOM遍历方法后面使用，即 $ (“ul”").live…可以，但$(“body”).find(“ul”).live…不行；

实例如下：$( document ).on( “click”, “#members li a”, function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】

定义和用法：将监听事件绑定在就近的父级元素上
语法：delegate(selector,type,[data],fn)
特点：
(1)、选择就近的父级元素，因为事件可以更快的冒泡上去，能够在第一时间进行处理。
(2)、更精确的小范围使用事件代理，性能优于.live()。可以用在动态添加的元素上。
实例如下：
$("#info_table").delegate(“td”,“click”,function(){/显示更多信息/});
$(“table”).find("#info").delegate(“td”,“click”,function(){/显示更多信息/});
(4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】
定义和用法：将监听事件绑定到指定元素上。
语法：on(type,[selector],[data],fn)
实例如下：$("#info_table").on(“click”,“td”,function(){/显示更多信息/});参数的位置写法与delegate不一样。
说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。

总结：.bind(), .live(), .delegate(),.on()分别对应的相反事件为：.unbind(),.die(), .undelegate(),.off()

如果你用过 CSS，你也许就知道 ID 选择器和 class 选择器之间的差异，jQuery 也同样如此。ID 选择器使用 ID 来选择元素，比如 #element1，而 class 选择器使用 CSS class 来选择元素。当你只需要选择一个元素时，使用 ID 选择器，而如果你想要选择一组具有相同 CSS class 的元素，就要用 class 选择器。在面试过程中，你有很大几率会被要求使用 ID 选择器和 class 选择器来写代码。下面的 jQuery 代码使用了 ID 选择器和 class 选择器：
$(
'#LoginTextBox'
)
// Returns element wrapped as jQuery object with id='LoginTextBox'

$(
'.active'
)
// Returns all elements with CSS class active.
正如你所见，从语法角度来说，ID 选择器和 class 选择器的另一个不同之处是，前者用字符”#”而后者用字符”.”。

这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。你需要知道如何为按钮设置事件并执行hide() 方法，代码如下所示：
$(
'#ButtonToClick'
).click(
function
() {
$(
'#ImageToHide'
).hide();
}
);

ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题

JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。你可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题，举个例子，如何在 alert 框里显示所有选中项。我们可以用上面的选择器代码找出所有选中项，然后我们在 alert 框中用 each() 方法来一个个打印它们，代码如下：
$(
'[name=NameOfSelectedTag] :selected'
).each(
function
(selected) {
alert($(selected).text());
}
);
其中 text() 方法返回选项的文本。

可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。这是 jQuery 提供的众多操控 DOM 的方法中的一个。你可以通过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素

attr() 方法被用来提取任意一个HTML元素的一个属性的值. 你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接，然后你可以应用attr()方法来获得他们的href属性的值。下面的代码会找到页面中所有的链接并返回href值：
$(
'a'
).each(
function
() {
alert($(
this
).attr(
'href'
));
}
);

一、属性设置
简单来说，就是使用jQuery的 .attr() 方法来设置元素的属性值。该方法需要传入至少一个参数，即要设置的属性名，而属性值可以作为第二个参数传入。例如：

//html部分


//js部分
$('#myDiv').attr('title', '这是我的div元素');
这将为id为“myDiv”的元素添加一个title属性，属性值为“这是我的div元素”

.attr() 方法还有一个用于获取元素属性值的重载，即调用时不传入属性值参数，例如：

var title = $('#myDiv').attr('title');
这将会返回“这是我的div元素”

二、属性删除
通过 .removeAttr() 方法可以删除元素的属性，它需要传入一个属性名：

//html部分


//js部分
$('#myDiv').removeAttr('title');
这将删除id为“myDiv”的元素的title属性

三、CSS属性的设置
除了设置元素的普通属性之外，还可以使用jQuery的 .css() 方法来设置CSS样式属性。例如：

//html部分


//js部分
$('#myDiv').css('background-color', '#fff');
这将把id为“myDiv”的元素的背景色设置为白色（#fff）

当然， .css() 方法还有一种可以一次设置多个CSS属性的用法，例如：

$('#myDiv').css({
'background-color': '#fff',
'color': '#000',
'font-size': '16px'
});
这会一次性把背景色、字体颜色、字体大小设置为对应的值。

四、属性的toggleClass()
有时候需要在两个或多个值之间进行切换，例如一个按钮需要点击切换颜色。这可以使用 .toggleClass() 方法来实现。例如：

//html部分
Change Color
Hello World!


//js部分
$('#myBtn').click(function() {
$('#myDiv').toggleClass('highlight');
});
这将会在按钮 #myBtn 被点击时，为 #myDiv 添加或删除 highlight 类，从而实现颜色变换。

五、属性的data() 方法
使用 .data() 方法可以为元素添加与DOM无关的数据和标记。.data() 方法的语法如下：

$('#myDiv').data('foo', 'bar');
这将把一个名为 "foo" 的数据项添加到 #myDiv 元素，数据值为 "bar"。同样的，我们也可以通过 .data() 方法获取数据：

var foo = $('#myDiv').data('foo');
这将把 foo 的值设置为 "bar"。

六、属性的prop()方法
jQuery中的 .prop() 方法用于获取或设置DOM元素属性的值。例如：



$('#myCheckbox').prop('checked', true);
这将使id为“myCheckbox”的复选框被选中，.prop() 方法还适用于button、input、select和textarea等表单元素。

detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于 detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用. 你也还可以看看 用来向DOM中添加元素的 appendTo() 方法

为一个元素添加CSS类的语法。
$('selector').addClass(class_name);
JavaScript
移除一个元素的CSS类的语法。
$('selector').removeClass(class_name);
JavaScript
例子：在这个例子中，我们首先创建一个图像元素和两个按钮，第一个按钮用于添加CSS类，第二个按钮用于删除CSS类。当用户点击第一个按钮时，addClass()方法被调用，该类被添加到图像元素中。当用户点击第二个按钮时，removeClass()方法被调用，类被从图像元素中删除

JQuery.ajax()是对原生的javaScript的ajax的封装，简化了ajax的步骤，用户可用JQuery.ajax()发送get或者post方式请求,Jquery.get()是对ajax的get方式的封装，只能发送get方式的请求。

chaining 允许我们在一条语句中对同一个元素运行多个 jQuery 方法
jQuery 可以把许多方法调用链接在一起形成方法调动链 ( chaining )
jQuery 方法链
之前，我们都是一次写一条 jQuery 语句（一条接着另一条）
但 jQuery 还提供了一种一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条
这样做的好处就是省去了多次查找相同的元素
如需链接一个动作，我们只需要简单地把该动作追加到之前的动作上
下面的范例把 css()、slideUp() 和 slideDown() 链接在一起
"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
运行范例 »
如果需要，我们还可以添加更多的方法调用
当进行链接时，代码行会变得很差
不过，jQuery 语法不是很严格
我们可以按照希望的格式来写，包含换行和缩进，比如下面这种书写方式也可以很好地运行
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
运行范例 »
jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行

第一种，因为它直接调用了 JavaScript 引擎。

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

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

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

jquery的核心函数之对象访问 （$(this)[0]）

jQuery.proxy，接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文（context）语境。
delegate是一种委托事件，但是可以通过选择器缩小查找范围。

这个涉及到jQuery的优化问题，我们知道jQuery选择器由右向左寻找的。
以上是先找寻class的标签，然后在class标签里面找寻只有div的标签，会找两次，应该是后面的高

$(document).ready(function(){
//内部内容
});

Query是方便操作DOM的，bootstrap是一套UI库，bootstrap的一些组件还依赖jQuery
简单来说，jQuery用来控制页面逻辑与页面操作。而Bootstarp用来控制页面的显示效果。

jQuery的css处理:
($("div").css("color","green"))

通过ID，使用getElementById() 获得标签节点
通过标签的名称，使用getElementById()获取元素节点或标签节点
注意：以上的查找方法都会忽略文档的结构
通过使用一个元素节点的parentNode、firstChild以及lastChild属性
节点名称nodeName
如果节点是标签，nodeName是标签名称
如果节点是属性，nodeName是属性名称
如果节点是文本节点，nodeName是#text
如果节点是文档，nodeName是#document
节点值nodeValue
节点类型nodeType

1、总是使用#id去寻找element
在jQuery中最快的选择器是ID选择器 ( $('#Id') ), 这是因为它直接映射为JavaScript的getElementById()方法。

2、在Classes前面使用Tags
在jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法

3、缓存jQuery对象
养成保存jQuery对象到一个变量上（就像上面的例子）的习惯

4、更好的利用链
前面的例子也可以这样写：
var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...}).css('border', '3px dashed yellow').css('background-color', 'orange').fadeIn('slow');
这样可以让我们写更少的代码，使JavaScript更轻量。

5、使用子查询
jQuery允许我们在一个包集上附加其它的选择器。因为我们已经在本地变量里保存了父对象这样会减少以后在选择器上的性能开销

6、限制直接对DOM操作
DOM操作的基本做法是在内存中创建DOM结构，然后再更新DOM结构。这不是jQuery最好的做法，但对JavaScript来讲是高效的。直接操作DOM结构性能是低下的

7、事件委托（又名：冒泡事件）
除非特别说明，每一个JavaScript事件（如click, mouseover 等）在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。取而代之的是 你可以只对它们的父级绑定一次，而且可以计算出是哪一个节点触发了事件，而不是绑定一个事件监听器到很多节点上这种效率低下的方式。例如，假如我们要开发 一个包含很多input的大型form，当input被选择的时候我们想绑定一个class name

8、消除查询浪费
虽然jQuery对没有找到任何匹配的elements处理的很好，但是它还是需要花费时间去查找的。如果你的站点有一个全局的JavaScript，你可能会把每个jQuery function都放在 $(document).ready(function(){ // all my glorious code })里。 不要这样做。只去放一些页面上适合用到的function。这样做最有效的方式是你的模板可以完全控制任何时候或者地方执行JavaScript以内联脚 本的方式初始化function。例如，在你的“article”页面模板里，你可能在body标签关闭之前包含以下代码

jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
jQuery UI 则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等
15 jQuery中如何将数组转换为就送字符串，然后再转化
jQuery中没有提供这个功能，所以需要先编写两个jQuery的扩展；
编写：
$.fn.stringifyArray = function(array){
return JSON.stringify(array);
}
$.fn.parseArray = function(array){
return JSON.parse(array);
}
//然后调用：
$(" ").stringifyArray(array);

为了节省带宽和脚本引用的稳定性，我们会使用CDN上的jQuery文件，例如google的jquery cdn服务。但是如果这些CDN上的jQuery服务不可用，我们还可以通过以下代码来切换到本地服务器的jQuery版本：

$(document).ready(function () { $('#Button1').click(function () { alert($('#inputField').attr("value")); }); });

在jQuery中，我们可以使用以下方法实现URL的编码和解码。
encodeURIComponent(url) and decodeURIComponent(url)

返回的this指的就是当前操作后的jquery对象，为了实现jquery的链式操作

在默认情况下，通过$.extend()合并操作不是递归的（浅拷贝）;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。然而，如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并（深拷贝）。

浅拷贝（false 默认）：如果第二个参数对象有的属性第一个参数对象也有，那么不会进行相同参数内部的比较，直接将第一个对象的相同参数覆盖。

深拷贝（true）：如果第二个参数对象有的属性第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖。

jQuery.extend(object);
它是为jQuery类添加类方法，可以理解为添加静态方法。如：
jQuery.extend( {
min: function(a, b) {
return a < b ? a : b;
}
,   max: function(a, b) {
return a > b ? a : b;
}
);
jQuery.min(2,3);
//  2 jQuery.max(4,5); //  5
jQuery.extend(target, object1, [objectN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
var settings = {
validate: false, limit: 5, name: "foo"
}
;
var options = {
validate: true, name: "bar"
}
;
jQuery.extend(settings, options);
结果：settings == {
validate: true, limit: 5, name: "bar"
}
jQuery.fn.extend(object);
$.fn是什么?
$.fn是指jQuery的命名空间，fn上的成员(方法function及属性property)，会对jQuery实例每一个有效。
查看jQuery代码，就不难发现。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {
//....
}
;
原来 jQuery.fn = jQuery.prototype.
所以，它是对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
jQuery.fn.extend(object);
扩展jQuery对象方法
jQuery.extend 扩展jQuery全局方法

$("#btn").on("mouseover mouseout", func);

$("#btn").on({
mouseover: func1,
mouseout: func2,
click: func3
});

📝 相关推荐面试专题：

Query 核⼼中有⼀组队列控制⽅法，queue()/dequeue()/clearQueue()三个⽅法组 成。主要应⽤于animate() ， ajax ，其他要按时间顺序执⾏的事件中

var func1 = function(){alert('事件1');}
var func2 = function(){alert('事件2');}
var func3 = function(){alert('事件3');}
var func4 = function(){alert('事件4');}
// ⼊栈队列事件
$('#box').queue("queue1", func1);
// push func1 to queue1
$('#box').queue("queue1", func2);
// push func2 to queue1
// 替换队列事件
$('#box').queue("queue1", []);
// delete queue1 with empty array
$('#box').queue("queue1", [func3, func4]);
// replace queue1
// 获取队列事件（返回⼀个函数数组） $('#box').queue("queue1");
// [func3(), func4()]
// 出栈队列事件并执⾏ $('#box').dequeue("queue1");
// return func3 and do func3
$('#box').dequeue("queue1");
// return func4 and do func4
// 清空整个队列 $('#box').clearQueue("queue1");
// delete queue1 with clearQueue

Sizzle选择器采取Right To Left的匹配模式，先搜寻所有匹配标签，再判断它的⽗节点
jQuery通过$(selecter).find(selecter); 和 Sizzle 选择器结合

// 通过原⽣ JSON.stringify/JSON.parse 扩展 jQuery 实现
$.array2json = function(array) {
return JSON.stringify(array); }
$.json2array = function(array) {
// $.parseJSON(array); // 3.0 开始，已过时
return JSON.parse(array);
// 调⽤
var json = $.array2json(['a', 'b', 'c']);
var array = $.json2array(json);

jQuery主要⽬标是PC的⽹⻚中，兼容全部主流浏览器。在移动设备⽅⾯，单独推出 jQuery Mobile
Zepto从⼀开始就定 位移动设备，相对更轻量级。它的 API基本兼容 jQuery，但对PC浏 览器兼容不理想

1 $.getScript() 方法可以直接加载.js文件，并且不需要对javascript文件进行处理，javascript文件会自动执行。

2 .getJson() 是用于加载JSON 文件的 ，用法和.getJson()是用于加载JSON文件的，用法和.getScript()

1 $(“#msg”).text() 是 返回id为msg的元素节点的文本内容
2 $(“#msg”).text(“new content”); 是 将“new content” 作为普通文本串写入id为msg的元素节点内容中, 页面显示粗体的new content

$(‘input[name=items]’).get(1).checked = true;

var values = [];
$("input[type=text][.Edit]").each(function(i,d){ values.push($(d).val()); }) ;
或者
var values = [];

.vsdoc.js文件是用来在微软的开发环境Visual Studio下使用的，方便得获得jQuery的智能感知，当你输入jQuery函授后，会自动提示函数的类型、函数使用说明、函数参数等等。如果在VS下用jQuery开发Web程序，则vsdoc.js文件会大大的提高开发效率

在jQuery中，"$"符号是一个jQuery的别名，默认的jQuery类库以$开头。

有很多类似jQuery一样的类库，如MooTools, Backbone, Sammy, Cappuccino, Knockout 。这些类库中，有的也使用了$符号，如果同时使用，则会导致命名冲突。

为了解决这个冲突，需要用到jQuery.noConflict()，这样就不依赖$这个默认符号了。例如：

jQuery.noConflict();
(function($){

})(jQuery);

$.fn.extend({
myFunction: function() {
}
});

获得a标签的onclick属性: $(“a”).attr(“onclick”)
删除onclick属性：$(“a”).removeAttr(“onclick”);
其他补充：如果继续设置元素的onclick属性，如下：
设置onclick属性：$(“a”).attr(“onclick”,”test();”);

要处理缓存就是禁用缓存

1、通过$.post()方法来获取数据，那么默认就是禁用缓存的
2、通过$.get()方法来获取数据，可以通过设置时间戳来避免缓存。可以在URL后面加上+(+newDate)例$.get('ajax.xml?'+(+newDate),function(){//内容});
3、通过$.ajax方法来获取数据，只要设置cache:false即可

影藏：hide()
显示：show()
淡入淡出：fadeIn()==淡入(显示) fadeOut()==淡出(消失)
滑动：slideUp()==向上滑动 slideDown()==向下滑动

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