jquery中的知识点

 

jquery在简历中也有提到，应该也作一些相应的准备

onload和document.ready()的区别

• 一、咱们能够在页面中使用多个document.ready()，但只能使用一次onload()。

• 二、document.ready()函数在页面DOM元素加载完之后就会被调用，而onload()函数则要在全部的关联资源（包括图像、音频）加载完毕后才会调用。

jquery中的选择器

• 一、基本选择器：直接根据id、css类名、元素名返回匹配的dom元素。
• 二、层次选择器：也叫作路径选择器，能够根据路径层次来选择相应的DOM元素。
• 三、过滤选择器：在前面的基础上过滤相关条件，获得匹配的dom元素。

jquery实现对url的编码和解码

encodeURIComponent(url) 
 decodeURIComponent(url)

jquery中链式调用的好处

• 1:可以精简代码
• 2:提升了程序执行的性能

jquery的好处

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

jQuery是如何处理缓存的

• 1 经过$.post()方法来获取数据，那么默认就是禁用缓存的。

• 2 经过$.get()方法 来获取数据，能够经过设置时间戳来避免缓存。能够在URL后面加上+(+new Date)例 $.get('ajax.xml?'+(+new Date),function () { //内容 });3 经过$.ajax方法来获取数据，只要设置cache:false便可。

jquery中的on(),live(),bind(),delegate()的区别

.bind()是直接绑定在元素上，也很好的解决了浏览器在事件处理中的兼容问题。若是不人为的设置stopPropagation(Moder Browser), cancelBubble(IE)，那么它的全部父元素，祖宗元素都会受之影响
当咱们在a 上面点击的时候，首先会触发它自己所绑定的click事件，而后会一路往上，触发它的父元素，祖先元素上全部绑定的click事件。
缺点

• 它会绑定事件到全部的选出来的元素上
• 它不会绑定到在它执行完后动态添加的那些元素上
• 当元素不少时，会出现效率问题
• 当页面加载完的时候，你才能够进行bind()，因此可能产生效率问题

.live()则是经过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。一旦事件冒泡到document上，jQuery将会查找selector/event metadata,而后决定那个handler应该被调用。当handler在执行的时候，由于有冒泡的参与，确实会有一些延迟，可是绑定的时候是特别的快。
优势：

• 这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给全部的元素挨个绑定
• 那些动态添加的elemtns依然能够触发那些早先绑定的事件，由于事件真正的绑定是在document上
• 你能够在document ready以前就能够绑定那些须要的事件

缺点：

• 从1.7开始已经不被推荐了，因此你也要开始逐步淘汰它了。
  Chaining没有被正确的支持
• 当使用event.stopPropagation()是没用的，由于都要到达document
• 由于全部的selector/event都被绑定到document, 因此当咱们使用matchSelector方法来选出那个事件被调用时，会很是慢
• 当发生事件的元素在你的DOM树中很深的时候，会有performance问题

.delegate()则是更精确的小范围使用事件代理，性能优于.live()。它不会把全部的event所有绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.

优势：

• 你能够选择你把这个事件放到那个元素上了
• chaining被正确的支持了
• jQuery仍然须要迭代查找全部的selector/event data来决定那个子元素来匹配，可是由于你能够决定放在那个根元素上，因此能够有效的减少你所要查找的元素。
  -能够用在动态添加的元素上

.on则是新版本中支持的事件，比上面三者都好

$和$.fn,$.extend和 $.fn.extend的区别

$.fn是指jQuery的命名空间，fn上的成员(方法function及属性property)，会对jQuery实例每个有效。
查看代码不难发现：

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {}
};

原来jQuery.fn = jQuery.prototype.

因此，它是对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可使用这个“成员函数”。

那么$.extend和$.fn.extend同理

jQuery.extend = jQuery.fn.extend = function() {
//这里能够看出jQuery.extend和jQuery.fn.extend实际上是同一个方法
//不一样的地方只是内部的this不一样
//调用$.extend() this 为$
//调用$.fn.extend() this 为$.fn
//因此若是传入两个对象的话，其功能是同样的
var src, copyIsArray, copy, name, options, clone,
    target = arguments[0] || {},
    i = 1,
    length = arguments.length,
    deep = false;

// Handle a deep copy situation
if ( typeof target === "boolean" ) {
    deep = target;
    target = arguments[1] || {};
    // skip the boolean and the target
    i = 2;
}

// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
    target = {};
}

// extend jQuery itself if only one argument is passed
if ( length === i ) {
    target = this;
    //若是只传入一个对象 在这里将目标对象替换为this，即$或$.fn
    --i;
}

for ( ; i < length; i++ ) {
    // Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) {
    // Extend the base object
    for ( name in options ) {
        src = target[ name ];
        copy = options[ name ];

        // Prevent never-ending loop
        if ( target === copy ) {
            continue;
// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
    if ( copyIsArray ) {
        copyIsArray = false;
        clone = src && jQuery.isArray(src) ? src : [];

} else {
    clone = src && jQuery.isPlainObject(src) ? src : {};
}
    target[ name ] = jQuery.extend( deep, clone, copy );
} else if ( copy !== undefined ) {
    //这里是题主最关心的地方
    //其实质就是$[name] = fn或$.fn[name] = fn
    target[ name ] = copy;
}
    }
    }
    }
    // Return the modified object
    return target;
};

jquery中attr和prop的区别

• 对于HTML元素自己就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素咱们本身自定义的DOM属性，在处理时，使用attr方法。