当前位置: 编程技术>WEB前端
本页文章导读:
▪记录一个字典表缓存问题的处理实例 我这里说的字典表,是指存放一些被系统共用的信息,比如,最常见的省市信息。
比如在 chinabyte.com 的某次调查中,我从页面上截取了下列内容:
1,省市信息是通过dictionary.js中的js动.........
▪理清offsetparent()、offsetLeft/offsetTop、offset()、position() 简而言之,它们的概念如下:
① offsetparent() 指的是元素的第一级拥有定位属性(absolute/relative/fixed)的父元素。
② offsetLeft/offsetTop 元素boder外侧,到其offsetparent()的border内侧的偏移量。
③ offse.........
▪jQuery.clean源码分析 一、jQuery.clean使用方法jQuery.clean( elems, context, fragment, scripts );二、思路分析1、处理参数context,确保其为文档根节点document2、处理参数elems数组(循环遍历数组) 2.1、elem为数字,转换为字符串.........
[1]记录一个字典表缓存问题的处理实例
来源: 互联网 发布时间: 2013-10-16
我这里说的字典表,是指存放一些被系统共用的信息,比如,最常见的省市信息。
比如在 chinabyte.com 的某次调查中,我从页面上截取了下列内容:
1,省市信息是通过dictionary.js中的js动态加载的,这也是我们常用的办法,因为需要联动。
2,实际的省市信息存在一个js文件中
3,dictionary_data.js文件部分内容的截图
作者:honghunter 发表于2013-1-6 10:07:00 原文链接
阅读:47 评论:0 查看评论
[2]理清offsetparent()、offsetLeft/offsetTop、offset()、position()
来源: 互联网 发布时间: 2013-10-16
简而言之,它们的概念如下:
① offsetparent() 指的是元素的第一级拥有定位属性(absolute/relative/fixed)的父元素。
② offsetLeft/offsetTop 元素boder外侧,到其offsetparent()的border内侧的偏移量。
③ offset() 返回{left:xx, top: yy}, 它表示元素对于文档的绝对偏移量。
④ position() 返回{left:xx, top: yy}, 它表示元素magrin外部,到其offsetparent()的border内侧的距离。参考资料:
1. offsetparent()的定义:jQuery 遍历 - offsetParent() 方法
2. offset()与position()的区别:Jquery中的offset()和position()深入剖析
作者:JustOneRoad 发表于2013-1-6 15:01:49 原文链接
阅读:0 评论:0 查看评论
[3]jQuery.clean源码分析
一、jQuery.clean使用方法
jQuery.clean( elems, context, fragment, scripts );
二、思路分析
1、处理参数context,确保其为文档根节点document
2、处理参数elems数组(循环遍历数组)
2.1、elem为数字,转换为字符串
2.2、elem为非法值,跳出本次循环
2.3、elem为字符串
2.4、字符串不存在实体编号或html标签,则创建文本节点
2.5、字符串为实体编号或html标签
1 创建一个div元素并插入到文档碎片中
2 处理xhtml风格标签
3 将elem包裹起来,并将包裹后的字符串作为div的innerHTML
4 如果包裹深度大于1,只留下第一层包裹元素
5 清除在ie6,7中空table标签自动加入的tbody
6 将在ie9以下浏览器中剔除的开头空白字符串作为div元素的第一个文本子节点
7 将elem重新赋值为div的子节点集合(nodeList对象),
8 移除本次循环中文档碎片中的div,保持下一次循环中干净的div元素
2 处理xhtml风格标签
3 将elem包裹起来,并将包裹后的字符串作为div的innerHTML
4 如果包裹深度大于1,只留下第一层包裹元素
5 清除在ie6,7中空table标签自动加入的tbody
6 将在ie9以下浏览器中剔除的开头空白字符串作为div元素的第一个文本子节点
7 将elem重新赋值为div的子节点集合(nodeList对象),
8 移除本次循环中文档碎片中的div,保持下一次循环中干净的div元素
2.3、如果elem为文本节点,则直接添加到要返回的ret数组中,否则将elem(nodeList对象)中的节点合并到数组
2.4、修复在ie6、7中type为radio,checkbox类型的节点的选中状态(checked)失效的bug
3、处理参数fragment
3.1、将ret中各节点添加到文档碎片fragment中
3.2、提取节点中的script子节点,并将其添加到ret数组中,添加的script位置为其原父元素位置后面
4、返回ret数组
三、源码注释分析
1、函数中用到的变量及函数
1 var nodeNames = "abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|" +
2 "header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
3
4 wrapMap = {
5 option: [ 1, "<select multiple='multiple'>", "</select>" ],
6 legend: [ 1, "<fieldset>", "</fieldset>" ],
7 thead: [ 1, "<table>", "</table>" ],
8 tr: [ 2, "<table><tbody>", "</tbody></table>" ],
9 td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
10 col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
11 area: [ 1, "<map>", "</map>" ],
12 _default: [ 0, "", "" ]
13 },
14
15 rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,
16 rtagName = /<([\w:]+)/,
17 rtbody = /<tbody/i,
18 rhtml = /<|&#?\w+;/,
19 rleadingWhitespace = /^\s+/,
20 rcheckableType = /^(?:checkbox|radio)$/,
21 rscriptType = /\/(java|ecma)script/i;
22
23
24 // 设置复选框checkbox或单选框radio表单元素的默认选中状态
25 function fixDefaultChecked( elem ) {
26 if ( rcheckableType.test( elem.type ) ) {
27 elem.defaultChecked = elem.checked;
28 }
29 }
30
31 // 创建一个安全的文档碎片
32 function createSafeFragment( document ) {
33 var list = nodeNames.split( "|" ),
34 safeFrag = document.createDocumentFragment(); // ie6,7,8浏览器把safeFrage作为HTMLDocument类型
35
36 // 针对ie9以下浏览器版本
37 if ( safeFrag.createElement ) {
38 while ( list.length ) {
39 safeFrag.createElement(
40 list.pop()
41 );
42 }
43 }
44 return safeFrag;
45 }
2 "header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
3
4 wrapMap = {
5 option: [ 1, "<select multiple='multiple'>", "</select>" ],
6 legend: [ 1, "<fieldset>", "</fieldset>" ],
7 thead: [ 1, "<table>", "</table>" ],
8 tr: [ 2, "<table><tbody>", "</tbody></table>" ],
9 td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
10 col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
11 area: [ 1, "<map>", "</map>" ],
12 _default: [ 0, "", "" ]
13 },
14
15 rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,
16 rtagName = /<([\w:]+)/,
17 rtbody = /<tbody/i,
18 rhtml = /<|&#?\w+;/,
19 rleadingWhitespace = /^\s+/,
20 rcheckableType = /^(?:checkbox|radio)$/,
21 rscriptType = /\/(java|ecma)script/i;
22
23
24 // 设置复选框checkbox或单选框radio表单元素的默认选中状态
25 function fixDefaultChecked( elem ) {
26 if ( rcheckableType.test( elem.type ) ) {
27 elem.defaultChecked = elem.checked;
28 }
29 }
30
31 // 创建一个安全的文档碎片
32 function createSafeFragment( document ) {
33 var list = nodeNames.split( "|" ),
34 safeFrag = document.createDocumentFragment(); // ie6,7,8浏览器把safeFrage作为HTMLDocument类型
35
36 // 针对ie9以下浏览器版本
37 if ( safeFrag.createElement ) {
38 while ( list.length ) {
39 safeFrag.createElement(
40 list.pop()
41 );
42 }
43 }
44 return safeFrag;
45 }
2、源码分析
1 jQuery.extend({
2 clean: function( elems, context, fragment, scripts ) {
3
4 // 声明变量
5 var i, j, elem, tag, wrap, depth, div, hasBody, tbody, len, handleScript, jsTags,
6 safe = context === document && safeFragment,
7 ret = [];
8
9 // 确保变量context为文档根节点document
10 if ( !context || typeof context.createDocumentFragment === "undefined" ) {
11 context =
2 clean: function( elems, context, fragment, scripts ) {
3
4 // 声明变量
5 var i, j, elem, tag, wrap, depth, div, hasBody, tbody, len, handleScript, jsTags,
6 safe = context === document && safeFragment,
7 ret = [];
8
9 // 确保变量context为文档根节点document
10 if ( !context || typeof context.createDocumentFragment === "undefined" ) {
11 context =
最新技术文章:
 
站内导航:
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!