jquery面试需要看的基本东西

1. offset() 方法的学习
offset().left offset().top 表示离document的距离。（浏览器可以看到的地方的距离）
2. position与offset的区别：
a.使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
b.使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移。
c.使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移。
3.$(window).scrollTop() scroll这个事件。
4.
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
5.jquery 的each循环用return false; //跳出循环
$("img").size(); 计算元素个数。
6.$("img").length;
7.返回传给jQuery()的原始选择器。
$("ul")
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector + "</li>")
.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
结果：
ul
ul li
div#foo ul:not([class])
9.重点中的重点：
取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
10. jquery的detach方法。
11.
这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get(0);
[ <img src="test1.jpg"/> ]
-----------------------------------------------------
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get().reverse();
[ <img src="test2.jpg"/> <img src="test1.jpg"/> ]
这里只是数组中的值位置换了，但是页面中并没有变化。
10.prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素(siblings作为第一个选择器的同辈)
11. jquery的width,innerWidth,outerWidth
这个我们知道，width指的是content的width.
innerWidth指的是包含padding的距离。
outerWidth指的是包含border的距离。
12. jquery的each方法
无参数的时候；
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
$(selector).each(function(index,element))
13.
html代码：
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").size();
结果：2
14.
html代码：<img src="test1.jpg"/> <img src="test2.jpg"/>
jquery代码：$("img").length;
显示结果：2
15.
jquery代码：$("ul")
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector + "</li>")
.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
显示结果：ul
ul li
div#foo ul:not([class])
16.
$('.yan1 .yan2').bind('click',function(){
alert($(this).index());
},function(){alert('hellor world')});
这样写点击之后只会触发一个函数。hello world这个函数。

17. data的用法（）
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
第二种用法：
<img class='yan3' src="test2.jpg" data-flag='yanjinyun'/>
$('.yan3').data('flag')
第三种用法：
<img class='yan4' src="test2.jpg" data-flag-name='yanjinyun2'/>
$('.yan4').data('flagName')
18.removeData
这个方法是不能移除标签中的属性的，只能通过，
$('.yan3').removeData('flag');//这个方法只是删除缓存。
$('.yan3').removeAttr('data-flag');
19.队列控制
queue(e,[q])
dequeue([queueName])
clearQueue([queueName])
20.
jquery如果类似于disable等属性，用prop属性，其他的用attr属性。
21.position方法是相对最近的一个相对的距离。
22. juqery中$('div')表示的是div的元素。而$('<div>')表示是创建一个div元素。
$('<div></div>')也是。
23.wrap是每个都添加一个，而wrapAll是每个都添加一个。
24.
参数html描述:
把所有段落内的每个子内容加粗
jQuery 代码:
$("p").wrapInner("<b></b>");参数elem描述:
把所有段落内的每个子内容加粗
jQuery 代码:
$("p").wrapInner(document.createElement("b"));
25.
HTML 代码:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>jQuery 代码:
$('.inner').wrapInner(function() {
return '<div class="' + $(this).text() + '" />';
});结果:
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>
26. animate
$('.yan1').animate({marginTop:'300px'},2000);
（1）必须写大括号，（2）如果有-的必须用大写代替。
27.queue函数
显示队列长度
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
debugger;//1
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
debugger;//8
}
debugger;
runIt();
28.grep函数
过滤数组中小于 0 的元素。
$.grep( [0,1,2], function(n,i){
return n > 0;
});
[1, 2]
排除数组中大于 0 的元素，使用第三个参数进行排除。
$.grep( [0,1,2], function(n,i){
return n > 0;
}, true);
[0]
----------------------------------------------------------------------
29.$.grep(使用过滤函数过滤数组元素。
var ss= $.grep( [3,1,2], function(n,i){
alert(n+' '+i);//3,0 1,1 2,2
return n > 0;
});
ss的值是1,2
30.stop 停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
31.andSelf() 加入先前所选的加入当前元素中
选取所有div以及内部的p，并加上border类
<div><p>First Paragraph</p><p>Second Paragraph</p></div>
$("div").find("p").andSelf().addClass("border");
<div class="border">
<p class="border">First Paragraph</p>
<p class="border">Second Paragraph</p>
</div>

31.add 把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
<p>Hello</p><span>Hello Again</span>
$("p").add("span")
[ <p>Hello</p>, <span>Hello Again</span> ]
====================================================
jquery的选择方法的简述
32. filter 筛选出与指定表达式匹配的元素集合。
$("p").filter(".selected")
33. is 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
$("input[type='checkbox']").parent().is("form")
34. map 将一组元素转换成其他数组（不论是否是元素数组）
你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
35.has保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。
$('li').has('ul').css('background-color', 'red');
36.not
删除与指定表达式匹配的元素
$("p").not( $("#selected")[0] )
37.slice，从a开始，b个数。
$("p").slice(0, 1).wrapInner("<b></b>");
==========================================================
Jquery的查找方法
38.children closest
closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
39. find next
40. nextall nextUntil
nextall 查找当前元素之后所有的同辈元素。
nextUntil 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
parentsUntil 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
41
prev 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll 查找当前元素之前所有的同辈元素
prevUntil 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
42.siblings
43.fadeIn fadeOut fadeToggle
fadeTo
用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度
$("p").fadeTo("slow", 0.66);
44.slideDown slideUp slideToggle
45.animate stop
============================================================================
jquery高级方法的使用：
46. $.browser
$.browser.msie
$.browser.safari
$.browser.opera
$.browser.msile
47.$.support
boxModel: 如果这个页面和浏览器是以W3C CSS盒式模型来渲染的，则等于true。通常在IE 6和IE 7的怪癖模式中这个值是false。在document准备就绪前，这个值是null。
cssFloat: 如果用cssFloat来访问CSS的float的值，则返回true。目前在IE中会返回false,他用styleFloat代替。
hrefNormalized: 如果浏览器从getAttribute("href")返回的是原封不动的结果，则返回true。在IE中会返回false，因为他的URLs已经常规化了。
htmlSerialize: 如果浏览器通过innerHTML插入链接元素的时候会序列化这些链接，则返回true，目前IE中返回false。
leadingWhitespace: 如果在使用innerHTML的时候浏览器会保持前导空白字符，则返回true，目前在IE 6-8中返回false。
noCloneEvent: 如果浏览器在克隆元素的时候不会连同事件处理函数一起复制，则返回true，目前在IE中返回false。
objectAll: 如果在某个元素对象上执行getElementsByTagName("*")会返回所有子孙元素，则为true，目前在IE 7中为false。
opacity: 如果浏览器能适当解释透明度样式属性，则返回true，目前在IE中返回false，因为他用alpha滤镜代替。
scriptEval: 使用 appendChild/createTextNode 方法插入脚本代码时，浏览器是否执行脚本，目前在IE中返回false，IE使用 .text 方法插入脚本代码以执行。
style: 如果getAttribute("style")返回元素的行内样式，则为true。目前IE中为false，因为他用cssText代替。
tbody: 如果浏览器允许table元素不包含tbody元素，则返回true。目前在IE中会返回false，他会自动插入缺失的tbody。
===================================================================================
48.$.each的用法

var ss={
a:'1',
b:'2',
c:'3'
}
$.each(ss,function(index,item){
if(item == '2'){
return true;//return false
}
alert(item);
});

return true 和continue;一样。

return false和break;一样。

49.