greency

jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/undelegate

Js代码
1.10.4    .bind() .one()
2.10.4.1 如何使用
3..bind( eventType, [eventData], handler(eventObject) )   在匹配的元素上绑定指定类型的事件处理函数
4..bind( eventType, [eventData], preventBubble ) 第三个参数为false，则阻止浏览器默认行为并停止事件冒泡，默认true
5..bind( events ) 绑定多个事件，events的键为事件类型，值为对应的事件处理函数
6..one( eventType, [eventData], handler(eventObject) )    在匹配的元素上绑定指定类型的事件处理函数，这个函数最多执行一次
7.其实是改写了事件处理函数，函数执行时先解绑定，再执行
8.10.4.2 调用过程
9.jQuery.fn.bind → jQuery.event.add
10.jQuery.fn.one → jQuery.event.add
11.10.4.3 源码分析
12./**
13.* bind:
14.* .bind( eventType, [eventData], handler(eventObject) ) 在匹配的元素上绑定指定类型的事件处理函数
15.* .bind( eventType, [eventData], preventBubble ) 第三个参数为false，则阻止浏览器默认行为并停止事件冒泡，默认true
16.* .bind( events ) 绑定多个事件，events的键为事件类型，值为对应的事件处理函数
17.*
18.* one:
19.* .one( eventType, [eventData], handler(eventObject) ) 在匹配的元素上绑定指定类型的事件处理函数，这个函数最多执行一次
20.* 其实是改写了事件处理函数，函数执行时先解绑定，再执行
21.*/
22.jQuery.each(["bind","one"],function( i, name ) {
23.    // 为jQuery对象扩展bind、one方法
24.    jQuery.fn[ name ] = function( type, data, fn ) {
25.        var handler;
26.
27.        // Handle object literals
28.        // 绑定多个事件，key为事件类型，type[key]是事件处理函数
29.        if (typeof type ==="object" ) {//
30.            for (var keyin type ) {
31.                this[ name ](key, data, type[key], fn);
32.            }
33.            returnthis;
34.        }
35.        // 修正参数：如果没有传入data，或data为false，（jQuery的这种写法很巧妙，但是可读性太差）
36.        // 如果有两个参数，则认为忽略了data：type, fn，结果是：type, undefined, fn
37.        // 如果data是false，则认为是type, false, fn，结果是：type, undefined, false
38.        if ( arguments.length === 2 || data ===false ) {
39.            fn = data;
40.            data = undefined;
41.        }
42.
43.        if ( name ==="one" ) {// 只执行一次
44.            handler = function( event ) { // 创建一个新的事件处理函数句柄
45.                jQuery( this ).unbind( event, handler ); // 先删除事件
46.                return fn.apply(this, arguments );// 再执行传入的事件处理函数fn，这里this是DOM元素
47.            };
48.            handler.guid = fn.guid || jQuery.guid++;// 同步guid，重新包装后的函数与原始函数的guid统一
49.        } else {
50.            handler = fn;
51.        }
52.
53.        if ( type ==="unload" && name !=="one" ) {// 如果是unload事件，则只执行一次
54.            this.one( type, data, fn );// 迭代调用，没有清晰的结构很危险
55.        } else {
56.            for (var i = 0, l =this.length; i < l; i++ ) {
57.                jQuery.event.add( this[i], type, handler, data ); // 遍历匹配的元素，并绑定事件处理函数
58.            }
59.        }
60.        // 返回jQuery对象，使得可以继续链式调用
61.        returnthis;
62.    };
63.});
64.10.4.4 jQuery.event.add
65..bind()和.one()都调用了jQuery.event.add来实现，为元素elem添加类型types的句柄handler，事实上所有的事件绑定最后都通过jQuery.event.add来实现。其执行过程大致如下：
66.1. 先调用jQuery._data从$.cache中取出已有的事件缓存（私有数据，Cache的解析详见数据缓存）
67.2. 如果是第一次在DOM元素上绑定该类型事件句柄，在DOM元素上绑定jQuery.event.handle，作为统一的事件响应入口
68.3. 将封装后的事件句柄放入缓存中
69.传入的事件句柄，会被封装到对象handleObj的handle属性上，此外handleObj还会填充guid、type、namespace、data属性；DOM事件句柄elemData.handle指向jQuery.event.handle，即jQuery在DOM元素上绑定事件时总是绑定同样的DOM事件句柄jQuery.event.handle。
70.事件句柄在缓存$.cache中的数据结构如下，事件类型和事件句柄都存储在属性events中，属性handle存放的执行这些事件句柄的DOM事件句柄：
71.elemData = {
72.    events: {
73.        'click' : [
74.            { guid: 5, type: 'click', namespace: '', data: undefined,
75.                handle: { guid: 5, prototype: {} }
76.            },
77.            { ... }
78.        ],
79.        'keypress' : [ ... ]
80.    },
81.    handle: { // DOM事件句柄
82.        elem: elem,
83.        prototype: {}
84.    }
85.}
86.看看jQuery.event.add的源码解析：
87.jQuery.event = {
88.    // Bind an event to an element
89.    // Original by Dean Edwards
90.    // 为元素elem添加类型types的句柄handler
91.    add: function( elem, types, handler, data ) {
92.        // 忽略 Text Comment
93.        if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
94.            return;
95.        }
96.
97.        if ( handler ===false ) {// 如果事件处理函数是false，则用returnFalse代替false
98.            handler = returnFalse; // returnFalse会取消事件的默认行为
99.        } elseif ( !handler ) {
100.            // Fixes bug #7229. Fix recommended by jdalton
101.            return;// 如果handler是undefined null ''，则直接返回，不执行后边的代码
102.        }
103.
104.        var handleObjIn, handleObj;
105.
106.        if ( handler.handler ) {// 如果已经是封装过的jQuery事件对象（JS真是愁人啊，弱类型，只能通过特性、属性判断对象的类型）
107.            handleObjIn = handler; // handleObj是DOM事件句柄对象（丰富后的jQuery.event.handle）
108.            handler = handleObjIn.handler;// handler始终是个函数
109.        }
110.
111.        // Make sure that the function being executed has a unique ID
112.        if ( !handler.guid ) {// 如果没有分配唯一id，则分配一个
113.            handler.guid = jQuery.guid++;
114.        }
115.
116.        // Init the element's event structure
117.        // 内部数据存储在内部对象上，因此elemData不应该为空，除非elem不支持jQuery缓存（embed、object、applet）
118.        var elemData = jQuery._data( elem );// 仅仅调用_data接口一次，后续直接在返回的对象上操作
119.
120.        // If no elemData is found then we must be trying to bind to one of the
121.        // banned noData elements
122.        // 如果elemData不存在，说明是一个不支持缓存的元素上绑定事件，直接返回
123.        if ( !elemData ) {
124.            return;
125.        }
126.
127.        var events = elemData.events,// 事件类型和事件句柄都存储在属性events中
128.            eventHandle = elemData.handle;// 属性handle存放的执行这些事件句柄的DOM事件句柄
129.
130.        if ( !events ) {
131.            elemData.events = events = {};// 初始化一个存放事件的对象，事件名为key，事件函数为value
132.        }
133.
134.        if ( !eventHandle ) {// 初始化一个执行事件函数的函数
135.            elemData.handle = eventHandle =function( e ) {
136.                // Discard the second event of a jQuery.event.trigger() and
137.                // when an event is called after a page has unloaded
138.                // 调用jQuery.event.handler
139.                // jQuery.event.handler是什么意思？
140.                returntypeof jQuery !=="undefined" && (!e || jQuery.event.triggered !== e.type) ?
141.                    jQuery.event.handle.apply( eventHandle.elem, arguments ) :
142.                    undefined;
143.            };
144.        }
145.
146.        // Add elem as a property of the handle function
147.        // This is to prevent a memory leak with non-native events in IE.
148.        // 内存泄漏？
149.        // 将elem作为eventHandle的属性存储，用来避免IE中非本地事件的内存泄漏
150.        eventHandle.elem = elem;
151.
152.        // Handle multiple events separated by a space
153.        // jQuery(...).bind("mouseover mouseout", fn);
154.        types = types.split(" ");// 同时绑定的多个事件可以用空格隔开
155.        // 为什么有的地方用字符串直接量，有的地方要用正则呢？因为正则可以进行全局匹配g
156.
157.        var type, i = 0, namespaces;
158.
159.        while ( (type = types[ i++ ]) ) {// 又一种遍历数组的方法，故意秀技巧么？
160.            handleObj = handleObjIn ?
161.                jQuery.extend({}, handleObjIn) :
162.                { handler: handler, data: data };// 创建事件句柄对象，后边还会添加属性：guid anmespace type
163.
164.            // Namespaced event handlers
165.            // 如果事件字符串中有句号.，则说明有命名空间
166.            if ( type.indexOf(".") > -1 ) {
167.                namespaces = type.split(".");
168.                type = namespaces.shift();// 取出第一个元素
169.                handleObj.namespace = namespaces.slice(0).sort().join(".");// 将于下部分作为命名空间，存储到属性namespace中
170.
171.            } else {
172.                namespaces = [];
173.                handleObj.namespace = ""; // 没有命名空间
174.            }
175.
176.            handleObj.type = type; // 事件类型
177.            if ( !handleObj.guid ) {
178.                handleObj.guid = handler.guid;// 事件对象唯一id
179.            }
180.
181.            // Get the current list of functions bound to this event
182.            var handlers = events[ type ],// 事件句柄队列，取出已经存在函数数组
183.                special = jQuery.event.special[ type ] || {};// 特殊处理的事件
184.
185.            // Init the event handler queue
186.            if ( !handlers ) {// 如果没有绑定事件，则初始化为一个空数组
187.                handlers = events[ type ] = [];//
188.
189.                // Check for a special event handler
190.                // Only use addEventListener/attachEvent if the special
191.                // events handler returns false
192.                // 如果特殊事件没有setup属性或 setup返回false，则用浏览器原生的绑定事件接口addEventListener/addEventListener，例如live事件
193.                if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) ===false ) {
194.                    // Bind the global event handler to the element
195.                    // 绑定事件句柄
196.                    if ( elem.addEventListener ) {
197.                        elem.addEventListener( type, eventHandle,false );// jQuery绑定的事件默认都是起泡阶段捕获
198.
199.                    } else if ( elem.attachEvent ) {
200.                        elem.attachEvent( "on" + type, eventHandle ); // IE事件模型中没有2级DOM事件模型具有的事件捕捉的概念，只有起泡阶段
201.                    }
202.                }
203.            }
204.
205.            if ( special.add ) {// 如果有add方法，就调用
206.                special.add.call( elem, handleObj );
207.
208.                if ( !handleObj.handler.guid ) {// 始终保证事件句柄有唯一的id
209.                    handleObj.handler.guid = handler.guid;
210.                }
211.            }
212.
213.            // Add the function to the element's handler list
214.            // 将句柄对象handleObj，加入到句柄数组handler中，
215.            // handleObj包含以下属性：data 唯一guid 命名空间namespace 事件类型type handler函数
216.            handlers.push( handleObj );
217.
218.            // Keep track of which events have been used, for event optimization
219.            // 记录已经使用的事件，用于事件优化？怎么个优化？
220.            jQuery.event.global[ type ] = true;
221.        }
222.
223.        // Nullify elem to prevent memory leaks in IE
224.        // 将elem置为null，避免IE中的内存泄漏（这行代码真是坑爹啊，没有无数次的测试确认，怎么可能想到这行代码呢）
225.        elem = null;
226.    },
227.    // ...
228.};
229.10.5    .unbind()
230.10.5.1 如何使用
231..unbind( [eventType] [, handler(eventObject)] ) 从匹配的元素上删除一个之前绑定的事件句柄
232.如果没有参数，删除所有事件句柄
233..unbind( eventType, false ) 删除通过.bind( eventType, false )绑定的事件句柄
234..unbind( event )    看不懂。。。
235.10.5.2 调用过程
236.jQuery.fn.unbind → jQuery.event.remove
237.10.5.3 源码分析
238.jQuery.fn.extend({
239.    // 删除句柄：删除一个或多个之前附加的事件句柄，jQuery事件只在起泡阶段捕获，不需要再定义控制捕获阶段的参数
240.    unbind: function( type, fn ) {
241.        // Handle object literals
242.        // 一次删除多个事件句柄，key是事件类型，type[key]是事件句柄（这里是迭代复用）
243.        // !type.preventDefault 表明这不是一个就jQuery事件对象
244.        if (typeof type ==="object" && !type.preventDefault ) {
245.            for (var keyin type ) {
246.                this.unbind(key, type[key]);
247.            }
248.        // 到这里，type可能是字符串，也可能是jQuery事件对象
249.        } else {
250.            for (var i = 0, l =this.length; i < l; i++ ) {
251.                jQuery.event.remove( this[i], type, fn ); // 调用remove删除句柄
252.            }
253.        }
254.
255.        returnthis;
256.    },
257.    // ...
258.};
259.10.5.4 jQuery.event.remove
260..unbind()通过调用jQuery.event.remove，删除之前绑定的一个或多个事件句柄，事实上所有的句柄删除最后都通过jQuery.event.remove实现，其执行过程大致如下：
261.1. 现调用jQuery._data从缓存$.cache中取出elem对应的所有数组（内部数据，与调用jQuery.data存储的数据稍有不同
262.2. 如果未传入types则移除所有事件句柄，如果types是命名空间，则移除所有与命名空间匹配的事件句柄
263.3. 如果是多个事件，则分割后遍历
264.4. 如果未指定删除哪个事件句柄，则删除事件类型对应的全部句柄，或者与命名空间匹配的全部句柄
265.5. 如果指定了删除某个事件句柄，则删除指定的事件句柄
266.6. 所有的事件句柄删除，都直接在事件句柄数组jQuery._data( elem ).events[ type ]上调用splice操作
267.7. 最后检查事件句柄数组的长度，如果为0，或为1但要删除，则移除绑定在elem上DOM事件
268.8. 最后的最后，如果elem对应的所有事件句柄events都已删除，则从缓存中移走elem的内部数据
269.9. 在以上的各个过程，都要检查是否有特例需要处理
270.看看它的源码分析：
271.jQuery.event = {
272.    // ...
273.    /**
274.     * 移除元素elem上的一个或多个或一组事件
275.     * pos 指要移除的是第几个types事件，可以减少遍历次数
276.     * handler的属性guid唯一标识某个事件对象，移除时通过比较guid是否相等
277.     */
278.    remove: function( elem, types, handler, pos ) {// add/remove都是作为jQuery内部接口使用
279.        // don't do events on text and comment nodes
280.        // 忽略文本元素Text和注释元素Comment
281.        if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
282.            return;
283.        }
284.
285.        if ( handler ===false ) {// 替换布尔型handler为函数，保证handler始终是一个函数，使得remove接口的使用更加便捷
286.            handler = returnFalse;
287.        }
288.
289.        var ret, type, fn, j, i = 0, all, namespaces, namespace, special, eventType, handleObj, origType,
290.            elemData = jQuery.hasData( elem ) && jQuery._data( elem ),// 如果在缓存cache中有数据，则取出，否则elemData为undefine
291.            // 因为jQuery._data总是返回一个对象，因此要先判断缓存cache中是否有数组
292.            events = elemData && elemData.events;// 取出事件句柄数组，用正则表达式可以将多行代码合并为一行，这里可以用if-else或三元表达式代替
293.
294.        if ( !elemData || !events ) {// 如果未绑定，则忽略本次调用，直接返回
295.            return;
296.        }
297.
298.        // types is actually an event object here
299.        // 如果types是一个jQuery Event对象，则。。。
300.        if ( types && types.type ) {
301.            handler = types.handler;
302.            types = types.type;
303.        }
304.
305.        // Unbind all events for the element
306.        // 如果types为false（强制转换类型），则移除所有事件
307.        // 如果types是字符串，并且以句号开头，则移除types命名空间下的指定事件（type+types）
308.        if ( !types ||typeof types ==="string" && types.charAt(0) ==="." ) {
309.            types = types || "";
310.
311.            for ( typein events ) {// 遍历events，移除所有已绑定的事件，这里是迭代调用，jQuery的源码很精致，能复用的代码会尽量复用
312.                jQuery.event.remove( elem, type + types );// 全部事件，或某一命名空间下的全部事件
313.            }
314.
315.            return;
316.        }
317.
318.        // Handle multiple events separated by a space
319.        // jQuery(...).unbind("mouseover mouseout", fn);
320.        // 同时移除多个事件，事件之间用空格隔开，使得remove接口很灵活
321.        types = types.split(" ");
322.
323.        // 个人觉的变量i的定义与使用离得那么远，不是好习惯，像这种局部使用的变量，应该哪里用就在哪里定义
324.        // 可能作者觉得集中定义显得代码不凌乱吧
325.        while ( (type = types[ i++ ]) ) {// 有一种循环方式
326.            origType = type;
327.            handleObj = null;
328.            all = type.indexOf(".") < 0;// all在这里表示移除的是type命名空间下的全部事件对象，小于0表示不是以.开头
329.            // all为true表示是事件，false表示命名空间
330.            namespaces = [];
331.
332.            if ( !all ) {// 如果以.开头，即type是命名空间，构建命名空间正则表达式
333.                // Namespaced event handlers
334.                namespaces = type.split(".");// 全部命名空间
335.                type = namespaces.shift();// 取出第一个作为事件类型，其余的为命名空间
336.
337.                namespace = new RegExp("(^|\\.)" +
338.                    jQuery.map( namespaces.slice(0).sort(), fcleanup ).join("\\.(?:.*\\.)?") +"(\\.|$)");
339.                // 这里要动态创建正则，因此用了 new RegExp 的方式
340.            }
341.
342.            eventType = events[ type ]; // 取出type对应的事件对象数组
343.
344.            if ( !eventType ) {// 如果type对应的事件对象数组不存在，则跳过本次循环（既然不存在就不必移除了）
345.                continue;
346.            }
347.
348.            if ( !handler ) {// 没有指定移除哪个事件对象，handler其实是一个带有guid属性的函数，因为通过guid可以找到对应的事件对象，因此这里依然称handler为事件对象
349.                for ( j = 0; j < eventType.length; j++ ) {// 遍历事件对象数组，这里因为是遍历一个动态的数组，所以没有定义eventType.length变量
350.                    handleObj = eventType[ j ];
351.
352.                    if ( all || namespace.test( handleObj.namespace ) ) { // 如果是事件或命名空间匹配
353.                        jQuery.event.remove( elem, origType, handleObj.handler, j );// 取出事件对象，迭代调用remove接口
354.                        // handleObj.handler有guid属性，因此迭代调用remove依然可以匹配到对应handleObj，事实上这里也可以改写为传入handleObj
355.                        // 注意最后一个参数j，remove的pos不为null，就不会在其他地方被splice删除，所以下一行才会splice（这个问题的处理太乱了）
356.                        eventType.splice( j--, 1 );// 如果循环遍历的是一个变化的数组，则可以用这种方式：j++之前先执行j--，保证不会因为数组下标的错误导致某些数组元素遍历不到，秀！
357.                    }
358.                }
359.                // 如果未指定删除哪个事件句柄，则删除事件类型对应的全部句柄，或者与命名空间匹配的全部句柄
360.                // 这里对$.cache的操作，是通过对 eventType = jQuery._data( elem ).events[ type ]的直接操作进行维护，直接操作事件句柄数组
361.                // 如果是我，可能会再开发一个接口供客户端进行这种微操，其实没必要。
362.                continue;
363.            }
364.
365.            // 到这里，说明指定事件句柄handler
366.
367.            special = jQuery.event.special[ type ] || {};// 特例
368.
369.            // 如果没有指定pos，则默认从0开始遍历，这里的pos可以减少遍历次数，提高性能，多么精致的代码
370.            // 本人喜欢这种极致的代码，更喜欢优雅的代码，更注重代码的可读性，稍微的性能下降可以接受
371.            for ( j = pos || 0; j < eventType.length; j++ ) {
372.                handleObj = eventType[ j ];
373.
374.                if ( handler.guid === handleObj.guid ) {// 比较事件函数的guid和时间对象的guid，===可以避免类型转换，稍微提高性能
375.                    // remove the given handler for the given type
376.                    if ( all || namespace.test( handleObj.namespace ) ) {
377.                        if ( pos == null ) { // 如果没有指定pos，匹配到后就删除
378.                            eventType.splice( j--, 1 );// j++之前先j--，避免数组变化导致遍历错误
379.                        }
380.
381.                        if ( special.remove ) { // 如果有自定义的remove方法，则调用（似乎只有live有add remove方法）
382.                            special.remove.call( elem, handleObj );
383.                        }
384.                    }
385.                    // 因为guid是全局唯一的，所以匹配到guid对应的事件就可以退出了
386.                    if ( pos != null ) { // 如果pos不为null，说明是要删除指定的事件对象，任务完成，退出
387.                        break;
388.                    }
389.                }
390.            }
391.
392.            // remove generic event handler if no more handlers exist
393.            // 如果type对应的事件对象数组为空，或者发现只剩一个，则移除绑定在elem上浏览器原生事件
394.            if ( eventType.length === 0 || pos !=null && eventType.length === 1 ) {
395.                // 检查special是否有自定义的teardown，优先调用
396.                // 这一行的巧妙支出在于：
397.                // 1. special不会为null或undefined，如果没有找到会被赋值为{}，是空设置模式的应用
398.                // 2. 首先巧妙的判断special.teardown是否存在，如果不存在则认为是普通事件，如果存在则可以调用teardown
399.                // 3. 在jQuery源码中你看到过没有返回值的函数码？似乎没有，teardown返回false表示失败，还得用普通方式删除
400.                if ( !special.teardown || special.teardown.call( elem, namespaces ) ===false ) {
401.                    jQuery.removeEvent( elem, type, elemData.handle );
402.                }
403.
404.                ret = null; // 这个变量搞笑了，自从定义之后就从来就没用过，明显多余，可以遗留代码里的变量吧
405.                delete events[ type ];// 删除类型属性，还是直接对数组句柄数组操作，根本没有什么缓存微操接口
406.            }
407.        }
408.
409.        // Remove the expando if it's no longer used
410.        // 从jQuery.cache中移除elem的数据，最后检查elemData.events
411.        if ( jQuery.isEmptyObject( events ) ) {
412.            var handle = elemData.handle;
413.            if ( handle ) {
414.                handle.elem = null; // 置空，删除对HTML元素的引用，避免因垃圾回收机制不起作用导致的浏览器内存泄漏
415.                // 这是一个非常好的技巧，我们在JavaScript中引用完HTML元素后一定要置空。
416.            }
417.
418.            delete elemData.events;// 删除存储事件句柄的对象
419.            delete elemData.handle;// 删除DOM事件句柄
420.
421.            if ( jQuery.isEmptyObject( elemData ) ) {// 都删了难道还不是isEmptyObject？有点多余，除非某些浏览器不支持delete，可问题是不支持也得移除数据，还是多余！
422.                jQuery.removeData( elem, undefined,true );// 彻底的从缓存中移走elem的内部数据（存储在属性expando上）
423.            }
424.        }
425.    },
426.
427.    // ...
428.};
429.10.6    .live() .die()
430.10.6.1 如何使用
431.live 在匹配当前选择器的元素上绑定一个事件处理函数，包括已经存在的和未来添加的，即任何添加的元素只要匹配当前选择器，就会被绑定事件处理函数
432..live( eventType, handler ) 在匹配当前选择器的元素上绑定一个指定类型的事件处理函数
433..live( eventType, eventData, handler ) eventData可以传递数据给事件处理函数
434..live( events ) 绑定多个事件
435..die() 删除之前通过.live()绑定的全部事件句柄
436..die( eventType [, handler] )   eventType是字符串事件类型，删除一个或一类之前通过.live()绑定的事件句柄
437..die( eventTypes ) eventTypes是Map对象，删除多类事件句柄
438.10.6.2 调用过程
439.
440..live()方法永远不会将事件绑定到匹配的元素上，而是将事件绑定到祖先元素（document或context），由该祖先元素代理子元素的事件。
441.以 $('.clickme').live('click',function() { … } ) 为例，当在新添加的元素上点击时，执行过程如下：
442.1. click事件被生成，并传递给

，待

处理
443.2. 因为

没有直接绑定click事件，因此事件沿着DOM树进行冒泡传递
444.3. 事件冒泡传递直到到达DOM树的根节点，在根节点上绑定了.live()指定的原始事件处理函数（在1.4以后的版本中，.live()绑定事件到上下文context，以提升性能）
445.4. 执行.live()指定的事件处理函数
446.5. 原始事件处理函数检查event的target属性以确定是否继续执行，检查的方式是 $(event.target).closes
447.6. 如果匹配，则原始事件处理函数执行，上下位被设置为找到的元素
448.因为第5步的检查是在执行原始事件处理函数之前，因此元素可以在任何时候添加，并且事件可以生效
449.调用过程：
450.$('div').live('click',function(){ alert(1); } )
451.jQuery.fn.live → jQuery.event.add → jQuery._data → jQuery.event.special.live.add → jQuery.event.add
452.$('div').die('click',function(){ alert(1); } )
453.jQuery.fn.die → jQuery.fn.unbind → jQuery.event.remove jQuery._data
454.调试过程中发现个有趣的现象：在父节点上绑定live事件，而不是具体的时间类型？
455.
456.10.6.3 源码分析
457.看看.live()/.die()的源码分析：
458.// 事件类型修正
459.var liveMap = {
460.    focus: "focusin",
461.    blur: "focusout",
462.    mouseenter: "mouseover",
463.    mouseleave: "mouseout"
464.};
465.// die 移除用live附加的一个或全部事件处理函数
466.// 对应关系：bind-unbind, live-die, delegate-undelegate
467./**
468.* live 在匹配当前选择器的元素上绑定一个事件处理函数，包括已经存在的，和未来添加的，即任何添加的元素只要匹配当前选择器就会被绑定事件处理函数
469.* .live( eventType, handler ) 在匹配当前选择器的元素上绑定一个指定类型的事件处理函数
470.* .live( eventType, eventData, handler ) eventData可以传递给事件处理函数
471.* .live( events ) 绑定多个事件
472.*
473.*
474.* 参考文档：
475.* http://api.jquery.com/live
476.* http://www.codesky.net/article/doc/201004/20100417042278.htm
477.* http://hi.baidu.com/silveringsea/blog/item/55cd25016ecde30c1c958341.html
478.*
479.* 如何使用
480.* 示例
481.* 局限
482.* 修正
483.*
484.* live被翻译为鲜活绑定、延迟绑定（更准确些）
485.* live通过委派，而不是在匹配元素上直接绑定事件来实现
486.*
487.* 官方文档翻译：事件代理
488.* .live()方法能对尚未添加到DOM文档中的元素生效。
489.* .live()方法永远不会将事件绑定到匹配的元素上，而是将事件绑定到祖先元素（document或context），由该祖先元素代理子元素的事件。 *
490.* 以 $('.clickme').live('click', function() { … } ) 为例，当在新添加的元素上点击时，执行过程如下：
491.* 1. click事件被生成，并传递给

，待

处理
492.* 2. 因为

没有直接绑定click事件，因此事件沿着DOM树进行冒泡传递
493.* 3. 事件冒泡传递直到到达DOM树的根节点，在根节点上绑定了.live()指定的原始事件处理函数（在1.4以后的版本中，.live()绑定事件到上下文context，以提升性能）
494.* 4. 执行.live()指定的事件处理函数
495.* 5. 原始事件处理函数检查event的target属性以确定是否继续执行，检查的方式是 $(event.target).closest(".clickme")
496.* 6. 如果匹配，则原始事件处理函数执行，上下位被设置为找到的元素
497.*
498.* 因为第5步的检查是在执行原始事件处理函数之前，因此元素可以在任何时候添加，并且事件可以生效
499.*
500.*/
501.jQuery.each(["live","die"],function( i, name ) {
502.    jQuery.fn[ name ] = function( types, data, fn, origSelector /* Internal Use Only */ ) {
503.        var type, i = 0, match, namespaces, preType,
504.            selector = origSelector || this.selector, // 选择器表达式
505.            // 很巧妙，如果没有origSelector，那么采用当前jQuery对象的选择器，、
506.            // 可是，如果origSelector为true，后边的处理对象就变成了以origSelector为选择器的jQuery对象
507.            context = origSelector ? this : jQuery( this.context );// 上下文,
508.            // 这里也是，如果没有origSelector，那么上下文就变成当前jQuery对象的上下文
509.            // 可是，如果origSelector为true（类型转换），当前jQuery对象就变成上下文了
510.            // 就是在这里，通过一个内部变量，改变了选择器表达式和上下分，区分开了live/die和delegate/undelegate，用同样的代码实现了两种接口
511.
512.        // 一次绑定或删除多个事件
513.        if (typeof types ==="object" && !types.preventDefault ) {// types不是jQuery事件对象
514.            for (var keyin types ) {// 迭代复用
515.                context[ name ]( key, data, types[key], selector );
516.            }
517.
518.            returnthis;
519.        }
520.
521.        // 如果是die，移除origSelector匹配元素上的所有通过live绑定的事件
522.        // 没有指定事件类型 + origSelector + origSelector是CSS选择器
523.        if ( name ==="die" && !types &&
524.                    origSelector && origSelector.charAt(0) ==="." ) {
525.
526.            context.unbind( origSelector );// 事实上bind/unbind是基础，add/remove/tigger/handle是所有事件的基础
527.
528.            returnthis;
529.        }
530.
531.        // 修正参数（如果data为false或没有传入data参数）
532.        // 完整：types, data, fn, origSelector
533.        // types, false, fn, origSelector
534.        // 或 types, fn, origSelector
535.        if ( data ===false || jQuery.isFunction( data ) ) {
536.            fn = data || returnFalse;
537.            data = undefined;
538.        }
539.
540.        types = (types || "").split(" "); // 多个事件用空格隔开
541.
542.        while ( (type = types[ i++ ]) !=null ) {// 遍历事件类型数组
543.            match = rnamespaces.exec( type );// 取到第一个.后的命名空间
544.            namespaces = "";
545.
546.            if ( match ) {// 如果有命名空间，即事件类型后还有.
547.                namespaces = match[0]; // .+命名空间
548.                type = type.replace( rnamespaces,"" );// 过滤.+命名空间，初学者会尝试用indexOf查找.的位置，然后截取
549.            }
550.
551.            if ( type ==="hover" ) {// 将hover分解为mouseenter mouseleave，继续遍历
552.                types.push( "mouseenter" + namespaces, "mouseleave" + namespaces );
553.                continue;
554.            }
555.
556.            preType = type; //
557.
558.            if ( liveMap[ type ] ) {// 修正事件名名，修正其实不准确，比如遇到focus，绑定了两个：focus focusin，不会造成两次事件响应么？
559.                types.push( liveMap[ type ] + namespaces );// 将修正后的事件类型入队，因为用了while循环，所有不必担心遍历动态数组的问题
560.                type = type + namespaces; // 再恢复type，包含了命名空间，这不是蛋疼么，把命名空间去掉只为了检测hover和是否需要修正？
561.
562.            } else {
563.                type = (liveMap[ type ] || type) + namespaces;// 修正事件名，这里可以直接写成：type + namespaces
564.                // 这行的逻辑有点问题，已经知道liveMap[ type ]是false了，这个地方的代码有些重复
565.            }
566.            /**
567.             * 上边的if-else改写为：
568.             * if ( liveMap[ type ] ) types.push( liveMap[ type ] + namespaces )
569.             * type = type + namespaces
570.             */
571.
572.            // 这里开始live的特殊处理，虽说live/die的逻辑比较接近，再加上delegate/undelegate，复用的粒度小但是很精髓
573.            // 同时为了减少接口，并没有将公共部分提取出来，总的来说，live/die这段代码出来的还是刚刚好
574.            if ( name ==="live" ) {
575.                // bind live handler
576.                for (var j = 0, l = context.length; j < l; j++ ) {
577.                    // 绑定到上下文，事件类型经过liveConvert后变为 live.type.selector
578.                    // 前边做了那么多铺垫，这行才是关键！
579.                    // add: function( elem, types, handler, data ) {
580.                    // context[j] 如果有origSelector则是当前jQuery对象，如果没有则是当前jQuery对象的上下文
581.                    // live事件的格式比较特殊，应该trigger里会有live的特殊处理，live的处理在特例special里
582.                    jQuery.event.add( context[j],"live." + liveConvert( type, selector ),
583.                        { data: data, selector: selector, handler: fn, origType: type, origHandler: fn, preType: preType } );
584.                }
585.
586.            } else {
587.                // unbind live handler
588.                // 删除live绑定的事件句柄
589.                context.unbind( "live." + liveConvert( type, selector ), fn );
590.            }
591.        }
592.
593.        returnthis;
594.    };
595.});
596./**
597.* live执行句柄，live绑定的事件调用链：add.eventHandle → handler function liveHandler → _data → handler
598.* @param event
599.* @return
600.*/
601.function liveHandler( event ) {
602.    var stop, maxLevel, related, match, handleObj, elem, j, i, l, data, close, namespace, ret,
603.        elems = [],
604.        selectors = [],
605.        events = jQuery._data( this, "events" );
606.
607.    // Make sure we avoid non-left-click bubbling in Firefox (#3861) and disabled elements in IE (#6911)
608.    if ( event.liveFired ===this || !events || !events.live || event.target.disabled || event.button && event.type ==="click" ) {
609.        return;
610.    }
611.
612.    if ( event.namespace ) {
613.        namespace = new RegExp("(^|\\.)" + event.namespace.split(".").join("\\.(?:.*\\.)?") +"(\\.|$)");
614.    }
615.
616.    event.liveFired = this;
617.
618.    var live = events.live.slice(0);// 返回一个新的数组，而不改变原来的数组
619.
620.    for ( j = 0; j < live.length; j++ ) {
621.        handleObj = live[j];
622.
623.        if ( handleObj.origType.replace( rnamespaces,"" ) === event.type ) {
624.            selectors.push( handleObj.selector );
625.
626.        } else {
627.            live.splice( j--, 1 );
628.        }
629.    }
630.
631.    match = jQuery( event.target ).closest( selectors, event.currentTarget );
632.
633.    for ( i = 0, l = match.length; i < l; i++ ) {
634.        close = match[i];
635.
636.        for ( j = 0; j < live.length; j++ ) {
637.            handleObj = live[j];
638.
639.            if ( close.selector === handleObj.selector && (!namespace || namespace.test( handleObj.namespace )) && !close.elem.disabled ) {
640.                elem = close.elem;
641.                related = null;
642.
643.                // Those two events require additional checking
644.                if ( handleObj.preType ==="mouseenter" || handleObj.preType ==="mouseleave" ) {
645.                    event.type = handleObj.preType;
646.                    related = jQuery( event.relatedTarget ).closest( handleObj.selector )[0];
647.
648.                    // Make sure not to accidentally match a child element with the same selector
649.                    if ( related && jQuery.contains( elem, related ) ) {
650.                        related = elem;
651.                    }
652.                }
653.
654.                if ( !related || related !== elem ) {
655.                    elems.push({ elem: elem, handleObj: handleObj, level: close.level });
656.                }
657.            }
658.        }
659.    }
660.
661.    for ( i = 0, l = elems.length; i < l; i++ ) {
662.        match = elems[i];
663.
664.        if ( maxLevel && match.level > maxLevel ) {
665.            break;
666.        }
667.
668.        event.currentTarget = match.elem;
669.        event.data = match.handleObj.data;
670.        event.handleObj = match.handleObj;
671.
672.        ret = match.handleObj.origHandler.apply( match.elem, arguments );
673.
674.        if ( ret ===false || event.isPropagationStopped() ) {
675.            maxLevel = match.level;
676.
677.            if ( ret ===false ) {
678.                stop = false;
679.            }
680.            if ( event.isImmediatePropagationStopped() ) {
681.                break;
682.            }
683.        }
684.    }
685.
686.    return stop;
687.}
688.// 在live事件类型type后增加上selector，作为命名空间
689.function liveConvert( type, selector ) {
690.    // . > `
691.    // 空格 > &
692.    // 在type后增加上selector，作为命名空间
693.    return (type && type !=="*" ? type +"." :"") + selector.replace(rperiod,"`").replace(rspaces,"&");//
694.}
695.10.7    .deletege() .undelegate()
696.10.7.1 如何使用
697..delegate( selector, eventType, handler )   在匹配选择器表达式selector的元素上，将一个事件句handler柄绑定到一个或多个事件上
698.无论是现有的还是将来添加的，基于一组特定的根元素（即上下文）
699..delegate( selector, eventType, eventData, handler )    Map型对象eventData的属性将被复制到事件句柄handler
700..delegate( selector, events )   绑定一个或多个事件句柄
701..undelegate()   在当前jQuery对象上，移除所有live事件句柄
702..undelegate( selector, eventType, handler ) 在当前jQuery对象上，移除live. eventType.selector事件句柄
703.为当前选择所匹配的所有元素移除一个事件处理程序，现在或将来，基于一组特定的根元素。
704..undelegate( selector, events ) 在当前jQuery对象上，移除多个live事件句柄，events是Map型对象，key
705..undelegate( namespace )    在当前jQuery对象上，移除命名空间匹配的live事件句柄
706.从接口的含义看，.deletege()/.undelegate()与.live()/.die()的区别在于绑定事件时的上下文不同，上下文即事件绑定到的元素：
707..deletege()/.undelegate()   当前jQuery对象
708..live()/.die() 当前jQuery对象的上下文，经常是document，也可以是构造jQuery对象时指定的上下文
709.
710.10.7.2 调用过程
711.jQuery.fn.delegate → jQuery.fn.live → jQuery.event.add
712.jQuery.fn.undelegate → jQuery.fn.unbind/die
713.10.7.3 源码分析
714.// 事件代理，调用live方法实现
715.delegate: function( selector, types, data, fn ) {
716.    // 因为传递了参数selector，live时的上下文变为this，而不是this.context
717.    returnthis.live( types, data, fn, selector );
718.},
719.// 删除事件代理，调用unbind或die实现
720.undelegate: function( selector, types, fn ) {
721.    if ( arguments.length === 0 ) {
722.        returnthis.unbind("live" );// 在当前jQuery对象上直接unbind，不需要在去查找上下文
723.
724.    } else {
725.        // jQuery.fn[ die ] = function( types, data, fn, origSelector /* Internal Use Only */ ) {
726.        returnthis.die( types,null, fn, selector );//　带有选择器字符串，改变了die里的上下文context变量
727.    }
728.},
729.本节小节：
730.1. .bind()/.unbind()高级接口的基础，add/remove/tigger/handle是所有的基础，最后才是调用浏览器原生接口
731.2. .deletege()/.undelegate()与.live()/.die()的区别在于绑定事件时的父节点不同
732.原文链接：http://nuysoft.iteye.com/blog/1199674

你可能感兴趣的:(JQuery)

C# 开发教程-入门基础天马3798 教程系列整理 c#开发语言
1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
html 删除事件,html 事件的添加和删除列蒂齐亚 html 删除事件
jQuery在jQuery1.7版本中bind()unbind(),live()die(),on()off(),delegate()下面我们给li元素添加事件bind()旧版写法:事件不能适用脚本创建的新元素live()旧版写法:适用脚本创建的新元素写法，但性能极不好on()新版写法，事件不能适用脚本创建的新元素(接收多个函数绑定)这三种方法都是基于要给添加事件的元素本身。$("ulli").bi
动态生成的html元素绑定click事件 .NET跨平台 Jquery及其组件 html jquery
第一篇博客，开启技术博客的生涯，欢迎大家批评指教（坚信妹子也可以做好程序猿）今天想说帮公司做项目的时候遇到的一个小问题，动态添加html元素以后再去事件监听出问题。在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况。就是上面的一张表格要动态实现添加行，然后序列号还要随着增加，当删除的时候序列号依旧是按顺序排列。刚开始使用jQuery的on方法来解决，但是发现一个问题会出现事件绑定很多次
前端页面实现table可拖动改变列宽牧码人 js jQuery js 表格拖动 css colResizable
此处实现页面的table表格可以自由拖动列宽，拖动时表格内文字不换行，超出部分以...代替，实现步骤如下：1.首先引入jQuery和colResizable的js文件，colResizable支持表格拖动改变列宽，但基于jQuery，（1）colResizable可以去：http://www.bacubacu.com/colresizable/#rangeSlider下载（2）引入文件：2.编写j
关于jquery的on(“click”,function(){}),事件绑定无效微特尔普拉斯 javascript jquery
之前在做jquery时,遇到一个问题,就是我在append一个给啊标签绑定click点击事件时不起作用,jquery的版本时3.4.1,也找不到起的错误.就是没触发:$(self).find(".comment-action.cancel").off("click");//console.log("点击了取消回复的按钮!");$(self).find(".comment-action.cancel
（hilo）摇钱树项目梳理大胡子111
摇钱树项目用到了：1.jquery（js库）2.hilo.js(游戏框架)3.tida.js（淘宝相关api--要在淘宝中实现摇一摇功能）4.原生陀螺仪（因为要在微信中实现摇一摇功能）5.静态文件资源预加载项目组成部分：1.摇钱树2.摇一摇按钮3.树下礼包4.游戏标题5.树上的红包和金币6.音乐7.获奖记录7.活动规则（活动说明/玩法介绍）8.红包雨下落9.地上红包10.获奖/失败层11.玩法介绍
jQuery Easyui 源码分析之combo组件 90后北京程序员前端-easyui easyui之combobox
/***jQueryEasyUI1.3.1*该源码完全由压缩码翻译而来，并非网络上放出的源码，请勿索要。*/(function($){functionsetSize(target,width){varopts=$.data(target,"combo").options;varcombo=$.data(target,"combo").combo;varpanel=$.data(target,"co
jquery打包到webpack项目不cong明的亚子前端 webpack jquery javascript
入口文件—index.jswindow.$=require('jquery')webpack.config.jsconstwebpack=require('webpack')module.exports={...plugins:[...newwebpack.ProvidePlugin({$:'jquery',jQuery:'jquery'})...]...}
通过前端实现导出生成pdf文件并下载银河小铁皮 vue 原生JS 前端 javascript vue.js
通过前端实现导出生成pdf文件并下载使用jspdf.js+html2canvas插件，实现前端生成pdf并下载的功能步骤如下1、先通过npm安装插件npminstalljspdf.jsnpminstallhtml2canvas2、单独在utils文件夹下，新建文件，存放处理代码/*eslint-disable*///不使用JQuery版的importhtml2canvasfrom'html2can
java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署一梵sheji288 java mybatis vue.js
java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、
TypeScript---类型批注 Anglie
TS通过类型批注提供静态类型，方便在编译时启动类型检查，这不是必须的，甚至可以被忽略，去使用js常规的动态类型。基本类型的批注是number,bool,string,弱类型或动态类型的结构可以是任意类型。将类型批注导出到一个单独的文件，方便使用类型已经被编译成为js的ts脚本的类型信息可用。批注可以为一个现有的js库声明。就像已经为node.js和jquery.js所做的那样。当没有给出类型时，T
基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件练练科技 java 课程设计 mysql
基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署鸿源网络数据库 mysql java
java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署源新网络 java 开发语言
基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
jQuery选择器 VaporGas 前端 jquery 前端 javascript 学习
jQuery选择器jQuery选择器类似于CSS选择器，用来选取网页中的元素$("h3").css("background","#09F");代码分析：获取并设置网页中所有元素的背景“h3”为选择器语法，必须放在$()中$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法jQuery选择器分类jQuery选择器功能强大，种类也很多，分类如下：类CSS选择器基本选择器层次
Java架构师学习路线网络全息测量心得体会
(1)第一步：研究spring,hibernate。通过研究jeecms开源框架。也同时学习css,html,javascript,jquery.以前都学习过，不过没有系统学习过，现在必须系统学习。同时看cms相关的论文。然后，改造jeecms能够改为自己的一个开源框架，以后开发cms系统都用我自己开发的框架，作为第一阶段的成果。(2)第二步：学习开源工作流引擎Activiti5，jbpm4.4以
AJAX实时表单验证系统三年九班蓝同学
本文还有配套的精品资源，点击获取简介：在网页开发中，"ajax验证表单"是一项关键任务，确保数据符合格式和规则，提升数据质量和用户体验。本应用通过使用JavaScript和XMLHttpRequest对象实现后台验证，无需页面刷新。它包括前端验证、事件处理、Ajax调用、服务器端处理、响应处理、用户体验和安全性等关键步骤，以jQuery库简化开发流程，创建高效、安全的表单验证系统。1.表单验证的重
利用jQuery框架的ajax请求获取json格式的数据听海边涛声 jquery ajax json
Document$('#btn').click(()=>{$.get('http://localhost:8080/jsajaxproject/jquery_json','username=tom&age=20',(data)=>{//alert(data)alert(data.name+'\t'+data.age+'\t'+data.gender)},'json')})点击按钮：
jquery加载页面的方法(页面加载完成就执行) JaosnY JQuery jquery 自动加载
转自http://www.jb51.net/article/27444.htmjquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别。1、$(function(){$("#a").click(function(){//addingyourcodehere});});2、$(document).ready(functi
jquery事件上心心上
jquery事件事件函数列表：blur()元素失去焦点focus()元素获得焦点change()表单元素的值发生变化click()鼠标单击dblclick()鼠标双击mouseover()鼠标进入（进入子元素也触发）mouseout()鼠标离开（离开子元素也触发）mouseenter()鼠标进入（进入子元素不触发）mouseleave()鼠标离开（离开子元素不触发）hover()同时为mousee
node模块 weiweiweb888 前端 javascript bootstrap
模块系统模块化介绍传统开发的问题随着项目的扩大，然后代码就越来越庞大，如果没有很好的规划，后期维护非常复杂（甚至就维护不了）。比如：前端html中有很多特效会依赖js文件。比如：index.html:bootstrap以上就是一个依赖关系，bootstrap依赖于jquery。先引入jquery后引入bootstrap。而且随着项目的扩大，我们的html页面也就随之增加，并且每一个html页面都会
jQuery中的ajax通信技术的讲解盛夏绽放 jquery ajax okhttp
jQuery提供了多种方法来处理AJAX请求，这些方法简化了异步请求的创建和处理。以下是一些常用的jQueryAJAX方法及其演示：1.$.ajax()（1）解释这个方法是最基础也是最强大的AJAX方法，它可以接受一个配置对象来构建并发送HTTP请求。（2）示例：这是一个GET请求模版$.ajax({url:'https://api.example.com/data',//请求的URL地址type
记录-小程序720°VR（跳转H5页面实现）久违的小技巧小程序小程序 vr javascript
全景浏览提前准备1拍照支架/照片合成软件（KolorAutopanoGiga4.0）或者全景相机2pannellum（pannellum是一个轻量级、免费和开源的Web全景查看器。它使用HTML5、CSS3、JavaScript和WebGL构建，没有插件。）3H5页面引入pannellum.js/css文件，swiper/jquery文件（因为需要在全景图底部显示可切换图片，与dom操作/ajax
HTML表格一壶浊酒.. 前端开发 html 前端
table,tr,td{border:lpxsolidsilver;}表格标题表头单元格HTMLCSSJavaScriptJQuery标准单元格合并行：rowspan在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。rowspan属性table,tr,td{border:1pxsolidsilver;}姓名:小明喜欢水果:苹果香蕉合并列：cols
前端篇—ajax wolf67 Django django js ajax
文章目录前言一、基于JS的ajax实现1.1基础1.2完整代码示例1.3应用二、JSON和JSONP2.1什么是JSON2.2JSON语法2.3应用2.4json与django交互2.5json与xml比较三、基于jQuery的ajax实现3.1基础方法3.2快捷方法用法示例四、跨域请求4.1同源机制4.2jsonp的js实现（未完成）4.3jsonp的jQuery实现4.4jsonp的ajax实
菜谱推荐系统(前台android原生,后台java,SSH,mysql) weixingliang_123 菜谱食谱 android 数据库 java 编程语言 mysql
Android菜谱推荐系统(前台android原生,后台java,SSH,mysql)(程序代码,MySQL数据库)【运行环境】MyEclipse(后台)Eclipse(前台)JDK1.7tomcat7【技术栈】JAVA,JSP,mvc,SSH,MYSQL,HTML,CSS,JAVASCRIPT,JQUERY,android原生【项目包含内容】【下载全套源码】【项目功能介绍】
【jQuery】前端八股文面试题菜鸟una 前端八股文面试题前端 jquery javascript
jQuery这个问的没有那么多，暂时我被问到的就这几个。大家可以直接订阅专栏。文章目录jQuery1.jQuery常见的方法有哪几个？2.在jQuery中，常见使用委托的事件有哪些？1）点击事件（click）2）鼠标悬停事件（mouseenter和mouseleave）3）表单提交事件（submit）4）输入框变化事件（change）3.在jQuery中，常见的鼠标事件方法有哪些？1）click（
jQuery第八章原生ajax 小涛涛啊！ jquery jquery
第八章原生ajax1：ajax的概念AJAX=AsynchronousJavaScriptandXML（异步的JavaScript和XML）。AJAX不是新的编程语言，而是一种使用现有标准的新方法。*AJAX异步请求数据。什么是AJAX？AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着
java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档影伴设计 java 开发语言前端
java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://pan.b
第三章：发送AJAX请求的几种方式 Muko_0x7d2 AJAX ajax
1.jquery发送Ajax请求1.1引进jQuery资源进入bootcdn.cn网站搜索jQuery复制script标签放到目标html文件head标签中添加跨源的属性的设置crossorigin="anonymous"1.2jQuery发送请求的四个参数：url参数（可以没有）函数响应体类型（一般为json）1.3GET请求请求类型为get参数在名称里面//1.发送GET请求$('button
web前段跨域nginx代理配置刘正强 nginx cms Web
nginx代理配置可参考server部分 server { listen 80; server_name localhost;
spring学习笔记 caoyong spring
一、概述 a>、核心技术 : IOC与AOP b>、开发为什么需要面向接口而不是实现接口降低一个组件与整个系统的藕合程度，当该组件不满足系统需求时，可以很容易的将该组件从系统中替换掉，而不会对整个系统产生大的影响 c>、面向接口编口编程的难点在于如何对接口进行初始化,(使用工厂设计模式)
Eclipse打开workspace提示工作空间不可用 0624chenhong eclipse
做项目的时候，难免会用到整个团队的代码，或者上一任同事创建的workspace， 1.电脑切换账号后，Eclipse打开时，会提示Eclipse对应的目录锁定，无法访问，根据提示，找到对应目录，G:\eclipse\configuration\org.eclipse.osgi\.manager，其中文件.fileTableLock提示被锁定。解决办法，删掉.fileTableLock文件，重
Javascript 面向对面写法的必要性？一炮送你回车库 JavaScript
现在Javascript面向对象的方式来写页面很流行，什么纯javascript的mvc框架都出来了：ember 这是javascript层的mvc框架哦,不是j2ee的mvc框架我想说的是，javascript本来就不是一门面向对象的语言，用它写出来的面向对象的程序，本身就有些别扭，很多人提到js的面向对象首先提的是：复用性。那么我请问你写的js里有多少是可以复用的，用fu
js array对象的迭代方法换个号韩国红果果 array
1.forEach 该方法接受一个函数作为参数，对数组中的每个元素使用该函数 return 语句失效 function square(num) { print(num, num * num); } var nums = [1,2,3,4,5,6,7,8,9,10]; nums.forEach(square); 2.every 该方法接受一个返回值为布尔类型
对Hibernate缓存机制的理解归来朝歌 session 一级缓存对象持久化
在hibernate中session一级缓存机制中，有这么一种情况：问题描述：我需要new一个对象，对它的几个字段赋值，但是有一些属性并没有进行赋值，然后调用 session.save()方法，在提交事务后，会出现这样的情况： 1：在数据库中有默认属性的字段的值为空 2：既然是持久化对象，为什么在最后对象拿不到默认属性的值？通过调试后解决方案如下：对于问题一，如你在数据库里设置了
WebService调用错误合集 darkranger webservice
Java.Lang.NoClassDefFoundError: Org/Apache/Commons/Discovery/Tools/DiscoverSingleton 调用接口出错，一个简单的WebService import org.apache.axis.client.Call;import org.apache.axis.client.Service; 首先必不可
JSP和Servlet的中文乱码处理 aijuans Java Web
JSP和Servlet的中文乱码处理前几天学习了JSP和Servlet中有关中文乱码的一些问题，写成了博客，今天进行更新一下。应该是可以解决日常的乱码问题了。现在作以下总结希望对需要的人有所帮助。我也是刚学，所以有不足之处希望谅解。一、表单提交时出现乱码：在进行表单提交的时候，经常提交一些中文，自然就避免不了出现中文乱码的情况，对于表单来说有两种提交方式：get和post提交方式。所以
面试经典六问 atongyeye 工作面试
题记：因为我不善沟通，所以在面试中经常碰壁，看了网上太多面试宝典，基本上不太靠谱。只好自己总结，并试着根据最近工作情况完成个人答案。以备不时之需。以下是人事了解应聘者情况的最典型的六个问题： 1 简单自我介绍关于这个问题，主要为了弄清两件事，一是了解应聘者的背景，二是应聘者将这些背景信息组织成合适语言的能力。我的回答：(针对技术面试回答，如果是人事面试，可以就掌
contentResolver.query()参数详解百合不是茶 android query()详解
收藏csdn的博客,介绍的比较详细,新手值得一看 1.获取联系人姓名一个简单的例子，这个函数获取设备上所有的联系人ID和联系人NAME。 [java] view plain copy public void fetchAllContacts() {
ora-00054:resource busy and acquire with nowait specified解决方法 bijian1013 oracle 数据库 kill nowait
当某个数据库用户在数据库中插入、更新、删除一个表的数据，或者增加一个表的主键时或者表的索引时，常常会出现ora-00054:resource busy and acquire with nowait specified这样的错误。主要是因为有事务正在执行（或者事务已经被锁），所有导致执行不成功。 1.下面的语句
web 开发乱码征客丶 spring Web
以下前端都是 utf-8 字符集编码一、后台接收 1.1、 get 请求乱码 get 请求中，请求参数在请求头中；乱码解决方法： a、通过在web 服务器中配置编码格式：tomcat 中，在 Connector 中添加URIEncoding="UTF-8"； 1.2、post 请求乱码 post 请求中，请求参数分两部份， 1.2.1、url？参数，
【Spark十六】： Spark SQL第二部分数据源和注册表的几种方式 bit1129 spark
Spark SQL数据源和表的Schema case class apply schema parquet json JSON数据源准备源数据 {"name":"Jack", "age": 12, "addr":{"city":"beijing&
JVM学习之:调优总结 -Xms -Xmx -Xmn -Xss BlueSkator -Xss -Xmn -Xms -Xmx
堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。典型设置： java -Xmx355
jqGrid 各种参数详解(转帖) BreakingBad jqGrid
jqGrid 各种参数详解分类：源代码分享个人随笔请勿参考解决开发问题 2012-05-09 20:29 84282人阅读评论(22) 收藏举报 jquery 服务器 parameters function ajax string
读《研磨设计模式》-代码笔记-代理模式-Proxy bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflect.Proxy; /* * 下面
应用升级iOS8中遇到的一些问题 chenhbc ios8 升级iOS8
1、很奇怪的问题，登录界面，有一个判断，如果不存在某个值，则跳转到设置界面，ios8之前的系统都可以正常跳转，iOS8中代码已经执行到下一个界面了，但界面并没有跳转过去，而且这个值如果设置过的话，也是可以正常跳转过去的，这个问题纠结了两天多，之前的判断我是在 -(void)viewWillAppear:(BOOL)animated 中写的，最终的解决办法是把判断写在 -(void
工作流与自组织的关系？ comsci 设计模式工作
目前的工作流系统中的节点及其相互之间的连接是事先根据管理的实际需要而绘制好的，这种固定的模式在实际的运用中会受到很多限制，特别是节点之间的依存关系是固定的，节点的处理不考虑到流程整体的运行情况，细节和整体间的关系是脱节的，那么我们提出一个新的观点，一个流程是否可以通过节点的自组织运动来自动生成呢？这种流程有什么实际意义呢？这里有篇论文，摘要是：“针对网格中的服务
Oracle11.2新特性之INSERT提示IGNORE_ROW_ON_DUPKEY_INDEX daizj oracle
insert提示IGNORE_ROW_ON_DUPKEY_INDEX 转自：http://space.itpub.net/18922393/viewspace-752123 在 insert into tablea ...select * from tableb中，如果存在唯一约束，会导致整个insert操作失败。使用IGNORE_ROW_ON_DUPKEY_INDEX提示，会忽略唯一
二叉树:堆 dieslrae 二叉树
这里说的堆其实是一个完全二叉树,每个节点都不小于自己的子节点,不要跟jvm的堆搞混了.由于是完全二叉树,可以用数组来构建.用数组构建树的规则很简单: 一个节点的父节点下标为: (当前下标 - 1)/2 一个节点的左节点下标为: 当前下标 * 2 + 1 &
C语言学习八结构体 dcj3sjt126com c
为什么需要结构体，看代码 # include <stdio.h> struct Student //定义一个学生类型，里面有age, score, sex, 然后可以定义这个类型的变量 { int age; float score; char sex; } int main(void) { struct Student st = {80, 66.6,
centos安装golang dcj3sjt126com centos
#在国内镜像下载二进制包 wget -c http://www.golangtc.com/static/go/go1.4.1.linux-amd64.tar.gz tar -C /usr/local -xzf go1.4.1.linux-amd64.tar.gz #把golang的bin目录加入全局环境变量 cat >>/etc/profile<
10.性能优化-监控-MySQL慢查询 frank1234 性能优化 MySQL慢查询
1.记录慢查询配置 show variables where variable_name like 'slow%' ; --查看默认日志路径查询结果：--不用的机器可能不同 slow_query_log_file=/var/lib/mysql/centos-slow.log 修改mysqld配置文件：/usr /my.cnf[一般在/etc/my.cnf，本机在/user/my.cn
Java父类取得子类类名 happyqing java this 父类子类类名
在继承关系中，不管父类还是子类，这些类里面的this都代表了最终new出来的那个类的实例对象，所以在父类中你可以用this获取到子类的信息！ package com.urthinker.module.test; import org.junit.Test; abstract class BaseDao<T> { public void
Spring3.2新注解@ControllerAdvice jinnianshilongnian @Controller
@ControllerAdvice，是spring3.2提供的新注解，从名字上可以看出大体意思是控制器增强。让我们先看看@ControllerAdvice的实现： @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Component public @interface Co
Java spring mvc多数据源配置 liuxihope spring
转自：http://www.itpub.net/thread-1906608-1-1.html 1、首先配置两个数据库 <bean id="dataSourceA" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close&quo
第12章 Ajax（下） onestopweb Ajax
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
BW / Universe Mappings blueoxygen BO
BW Element OLAP Universe Element Cube Dimension Class Charateristic A class with dimension and detail objects (Detail objects for key and desription) Hi
Java开发熟手该当心的11个错误 tomcat_oracle java 多线程工作单元测试
#1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目可以在属性文件中配置，那么使它成为
推行国产操作系统的优劣 yananay windows linux 国产操作系统
最近刮起了一股风，就是去“国外货”。从应用程序开始，到基础的系统，数据库，现在已经刮到操作系统了。原因就是“棱镜计划”，使我们终于认识到了国外货的危害，开始重视起了信息安全。操作系统是计算机的灵魂。既然是灵魂，为了信息安全，那我们就自然要使用和推行国货。可是，一味地推行，是否就一定正确呢？先说说信息安全。其实从很早以来大家就在讨论信息安全。很多年以前，就据传某世界级的网络设备制造商生产的交

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他