1.jQuery 库中的 $() 是什么?
$() 函数是 jQuery() 函数的别称, $() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数,它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。
2、网页上有 5 个 <div> 元素,如何使用 jQuery来选择它们?
3、jQuery 里的 ID 选择器和 class 选择器有何不同?
ID 选择器使用 ID 来选择元素,比如 #element1,而 class 选择器使用 CSS class 来选择元素。当你只需要选择一个元素时,使用 ID 选择器,而如果你想要选择一组具有相同 CSS class 的元素,就要用 class 选择器。
从语法角度来说,ID 选择器和 class 选择器的另一个不同之处是,前者用字符”#”而后者用字符”.”
$('#LoginTextBox') // Returns element wrapped as jQuery object with id='LoginTextBox'
$('.active') // Returns all elements with CSS class active.
4、如何在点击一个按钮时使用 jQuery 隐藏一个图片?
$('#ButtonToClick').click(function(){
$('#ImageToHide').hide();
});
5、$(document).ready() 是个什么函数?为什么要用它?
文档就绪函数,当DOM 完全加载(例如HTML被完全解析DOM树构建完成时)后执行,并适用所有浏览器。
6、JavaScript window.onload 事件和 jQuery ready 函数有何不同?
JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。
另一方面,jQuery ready() 函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用。鉴于这个好处,用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。
7、如何找到所有 HTML select 标签的选中项?
$('[name=NameOfSelectedTag] :selected')
8、jQuery 里的 each() 是什么函数?你是如何使用它的?
遍历函数,可以遍历一个集合
9、你是如何将一个 HTML 元素添加到 DOM 树中的?
文档操作函数,如appendTo等
10、你能用 jQuery 代码选择所有在段落内部的超链接吗?
11、$(this) 和 this 关键字在 jQuery 中有何不同?
$(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等。而 this 代表当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法,直到它被 $() 函数包裹,例如 $(this)。
12、你如何使用jQuery来提取一个HTML 标记的属性 例如. 链接的href?
attr() 方法
13、你如何使用jQuery设置一个属性值?
attr(name, value)
14、jQuery中 detach() 和 remove() 方法的区别是什么?
尽管 detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于 detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用.
15、你如何利用jQuery来向一个元素中添加和移除CSS类?
addClass() 和 removeClass()
16、使用 CDN 加载 jQuery 库的主要优势是什么 ?
节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是,如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次. 因此今时今日,许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库,网站就能有非常好的展示机会。
17、jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?
ajax() 方法更强大,更具可配置性, 让你可以指定等待多久,以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。
18、jQuery 中的方法链是什么?使用方法链有什么好处?
法链是对一个方法返回的结果调用另一个方法,这使得代码简洁明了,同时由于只对 DOM 进行了一轮查找,性能方面更加出色。
19、你要是在一个 jQuery 事件处理程序里返回了 false 会怎样?
这通常用于阻止事件向上冒泡。
20、哪种方式更高效:document.getElementbyId("myId") 还是 $("#myId")?
第一种,因为它直接调用了 JavaScript 引擎。
21、jQuery中有哪几种类型的选择器?
22、请使用jQuery将页面上的所有元素边框设置为2px宽的虚线?
<script language="javascript" type="text/javascript">
$("*").css("border", "2px dotted red");
</script>
23、当CDN上的jQuery文件不可用时,该怎么办?
为了节省带宽和脚本引用的稳定性,我们会使用CDN上的jQuery文件,例如google的jquery cdn服务。但是如果这些CDN上的jQuery服务不可用,我们还可以通过以下代码来切换到本地服务器的jQuery版本:
<script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js "></script>
<script type='text/javascript'>//<!--[CDATA[
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));
}//]]-->
</script>
24、jQuery中的Delegate()函数有什么作用?
回答:delegate()会在以下两个情况下使用到:
1、如果你有一个父元素,需要给其下的子元素添加事件,这时你可以使用delegate()了,代码如下:
$("ul").delegate("li", "click", function(){
$(this).hide();
});
2、当元素在当前页面中不可用时,可以使用delegate()
25、怎样用jQuery编码和解码URL?
encodeURIComponent(url) and decodeURIComponent(url)
26、如何用jQuery禁用浏览器的前进后退按钮?
<script type="text/javascript" language="javascript">
$(document).ready(function() {
window.history.forward(1);
//OR
window.history.forward(-1);
});
</script>
27、如何修改jQuery默认编码(例如默认UTF-8改成改GB2312):
$.ajaxSetup({
ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"}
});
28、JavaScript中的作用域与变量声明提升?
JavaScript的作用域只有两种:全局作用域和局部作用域,局部作用域是按照函数来区分的。在JavaScript中没有块级作用域,函数是js中唯一拥有自身作用域的结构。
声明的提升:
当前作用域内的声明都会提升到作用域的最前面,包括变量和函数的声明。
比如:
(function(){
var a = "1";
var f = function(){};
var b = "2";
var c = "3";
})();
声明会被提升为:
(function(){
var a,f,b,c;
a = "1";
f = function(){};
b = "2";
c = "3";
})();
注意函数表达式并没有被提升,这也是函数表达式与函数声明的区别。进一步看二者的区别:
(function(){
//var f1,function f2(){}; //hoisting,被隐式提升的声明
f1(); //ReferenceError: f1 is not defined
f2();
var f1 = function(){};
function f2(){}
})();
29、如何编写高性能的Javascript?
1、让代码简洁:一些简略的表达方式也会产生很好的优化。比如x=x+1;在不影响功能的情况下可以简写为x++;
2、变量名方法名尽量在不影响语意的情况下简单,比如定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength。
3、关于JS的循环,循环是一种常用的流程控制。JS提供了三种循环:for(;;)、while()、for(in)。在这三种循环中for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;)、while()循环的性能基本持平。当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或–运算符。
4、如果需要遍历数组,应该先缓存数组长度,将数组长度放入局部变量中,避免多次查询数组长度。因为我们常常要根据字符串、数组的长度进行循环,而通常这个长度是不变的,比如每次查询a.length,就要额外进行一个操作,而预先把var len=a.length,则就少了一次查询。
5、尽量选用局部变量而不是全局变量。局部变量的访问速度要比全局变量的访问速度更快,因为全局变量其实是window对象的成员,而局部变量是放在函数的栈里的。
6、尽量少使用eval。每次使用eval需要消耗大量时间,这时候使用JS所支持的闭包可以实现函数模板。
7、减少对象查找。因为JavaScript的解释性,所以a.b.c.d.e,需要进行至少4次查询操作,先检查a再检查a中的b,再检查b中的c,如此往下。所以如果这样的表达式重复出现,只要可能,应该尽量少出现这样的表达式,可以利用局部变量,把它放入一个临时的地方进行查询。
8、字符串连接。如果是追加字符串,最好使用s+=anotherStr操作,而不是要使用s=s+anotherStr。如果要连接多个字符串,应该少使用+=,如s+=a;s+=b;s+=c;应该写成s+=a + b + c; 而如果是收集字符串,比如多次对同一个字符串进行+=操作的话,最好使用一个缓存。怎么用呢?使用JavaScript数组来收集,最后使用join方法连接起来,如下
var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");
30、那些操作会造成内存泄漏?
http://www.jb51.net/article/37685.htm
31、jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?
this指向的是jQuery.fn的实例对象
32、jquery中如何将数组转化为json字符串,然后再转化回来?
$.parseJSON
$.fn.stringify = function() {
return JSON.stringify(this);
}
使用:$(array).stringify();
33、jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
Query中的$.extend浅拷贝,拷贝对象A时,对象B将拷贝A的所有字段,如果字段是内存地址,B将拷贝地址,若果字段是基元类型,B将复制其值。它的缺点是如果你改变了对象B所指向的内存地址,你同时也改变了对象A指向这个地址的字段。
jQuery中的$.extend深拷贝,这种方式会完全拷贝所有数据,优点是B与A不会相互依赖(A,B完全脱离关联), 缺点是拷贝的速度更慢,代价更大。
$.extend(true,a,b)用法
34、jquery.extend 与 jquery.fn.extend的区别?
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
35、jQuery 的队列是如何实现的?队列可以用在哪些地方?
通过函数:queue()、dequeue()以及clearQueue()实现队列的操作。
主要使用场景:对于一系列需要按次序运行的函数特别有用。特别animate动画,ajax,以及timeout等需要一定时间的函数
36、谈一下Jquery中的bind(),live(),delegate(),on()的区别?
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的
delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
差别:
.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理,性能优于.live()
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制
37、jQuery 是通过哪个方法和 Sizzle 选择器结合的?
Sizzle,作为一个独立全新的选择器引擎,出现在jQuery 1.3版本之后,并被John Resig作为一个开源的项目,可以用于其他框架:Mool, Dojo,YUI等。
jQuery.fn.find()进入Sizzle
38、针对 jQuery性能的优化方法?
http://www.frontopen.com/1077.html
*基于Class的选择性的性能相对于Id选择器开销很大,因为需遍历所有DOM元素。
*频繁操作的DOM,先缓存起来再操作。用Jquery的链式调用更好。
比如:var str=$("a").attr("href");
*for (var i = size; i < arr.length; i++) {}
for 循环每一次循环都查找了数组 (arr) 的.length 属性,在开始循环的时候设置一个变量来存储这个数字,可以让循环跑得更快:
for (var i = size, length = arr.length; i < length; i++) {}