- 浏览: 320111 次
- 性别:
- 来自: 南昌
文章分类
最新评论
-
j_bird:
你好,想探讨下滑动窗口是怎么计算的,一条群发短信发出去,滑动窗 ...
协议研发 中移动CMPP2.0协议API -
andyliulin:
楼主,现在的magicode 生成器工具的 官网,http: ...
Mgicode 生成器正式发布 -
huazai_wow:
楼主 你只是分析了 在jquery 中 有使用到 jQu ...
jquery event trigger 分析 -
dengkanghua:
CMPP2.0中出现流量控制错误是什么引起的。有什么解决办法吗 ...
协议研发 中移动CMPP2.0协议API -
JohnHust:
[flash=200,200][/flash][url][/u ...
Jquery源码分析(一)
5.4dom元素的内容
prk/彭仁夔 08-08-24 Dom元素提供innserHTML来设定元素的内部的html内容。这可以直接把string的HTML变成Dom元素,同时也可以把Dom元素变成html标签的string.有的时间我们只需要其text内容,不要标签。这个时候可以采用regexp把标签给过滤了,就是text的内容。 第三种的内容是直接显示出来的Dom元素。一个元素的这种内容就是所有子元素。第四种内容指是的元素的value值,特别是Input类型的元素。因为对于Input类型来讲,value就是其元素内部的content。 Jquery也分别就这四种形式提供了实现。 5.4.1 html Html是取内部的html,包含标签,如<div><b>xx</b></div>,html返回就是<b>xx</b>。Html简单,取值就直接innerHTML,设值就直接插入value。 // 设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 // 取得第一个匹配的元素的html内容 html : function(value) { return value == undefined ? (this[0] ? this[0].innerHTML : null) : this.empty().append(value);// 去掉所有子节点,在内部加上value(字符或dom) }, 在这里还是觉得直接采用innerHTML,它的速度会更快。只要加上一个判断,如果value是string的话,就直接采用innerHTML。不需要采用append转来转去。 5.4.2 text Jquery的text可以把document.createTextNode(text)的节点加到已经除去所有子元素的当前元素的内部。觉得对于IE,采用insertAdjacentText速度会更快。取值话,text会把当前元素的所有文本节点都连串成字符串。 // text() // 取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。 // 对HTML和XML文档都有效。 // text(val) // 设置所有匹配元素的文本内容.与 html() 类似, 但将编码 HTML // "<" 和 ">" 替换成相应的HTML实体). text : function(text) { if (typeof text != "object" && text != null)//设值 return this.empty()// 除去元素中所有的子元素,加上创建的文本节点 .append((this[0] && this[0].ownerDocument || document) createTextNode(text)); //取值,这里可以看text可以是对象,如是对象, //对所有属性对应的元素(一定要是dom元素(节点))进行取值。 var ret = ""; jQuery.each(text || this, function() { // 所有匹配元素包含的文本内容组合起来 jQuery.each(this.childNodes, function() { if (this.nodeType != 8)// 8:注释 ret += (this.nodeType != 1// 元素的话,递归子元素 ? this.nodeValue: jQuery.fn.text([this])); }); }); return ret; }, 5.4.3 value // 获得第一个匹配元素的当前值。 // 在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。 // 设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为select元件赋值 val : function(value) { if (value == undefined) {//取值 if (this.length) {//如果当前jquery对象不是空集合 var elem = this[0]; //对select中option,我们会采用<option>xx</option> //<option value=xx/>的形式 if (jQuery.nodeName(elem, 'option')) //value属性是否选中 return (elem.attributes.value || {}).specified ? elem.value: elem.text; //处理select的value if (jQuery.nodeName(elem, "select")) { var index = elem.selectedIndex, values = [], options = elem.options, one = elem.type == "select-one"; if (index < 0) return null;//没有选中选择项 // 不管是单选还是多选,找到所有的选中的选项 //对于单选而言,这样的判断实现减少for的次数,提高效率 //一般的实现都是直接采用for循环,可见jquery代码之优化 for (var i = one ? index : 0, max = one ? index + 1 : options.length;i < max; i++) { var option = options[i]; if (option.selected) { // 嵌套调用本函数,调用其option的部分进行处理, //找到option的指定的值 value = jQuery(option).val(); if (one) return value; //单选直接返回值 values.push(value);//多选返回数组 } } return values; } else//不要进行特殊的处理,但要去回车符 return (this[0].value || "").replace(/\r/g, ""); } //空集合时返回 return undefined; } if (value.constructor == Number)value += '';//转换成字符的形式 return this.each(function() { if (this.nodeType != 1) return;//不是元素不处理。 //如果元素是radio|checkbox,设定的值为Array的形式 //那么本元素的value值或name值在数组中,就设定为选中。 if (value.constructor == Array && /radio|checkbox/.test(this.type)) this.checked = (jQuery.inArray(this.value, value) >= 0 || jQuery .inArray(this.name, value) >= 0); //如果元素是select,先把value转换成数组 //再判断其options的value在这个数组中不,在的话,就设定为选中。 else if (jQuery.nodeName(this, "select")) { var values = jQuery.makeArray(value); jQuery("option", this).each(function() {//给option设值 this.selected = (jQuery.inArray(this.value, values) >= 0 || jQuery.inArray( this.text, values) >= 0); }); if (!values.length) this.selectedIndex = -1;//如果空值 } else //其他的不要特殊处理,直接设值。 this.value = value; }); }, 5.4.4 content Jquery的Content其实就是元素的所有的子元素的集合。 jQuery.each( { contents : function(elem) {// iframe?就是文档,或者所有子节点 return jQuery.nodeName(elem, "iframe") ? elem.contentDocument || elem.contentWindow.document : jQuery .makeArray(elem.childNodes); } }, function(name, fn) {// 注册到jQuery对象中去,可以调用同名方法 jQuery.fn[name] = function(selector) { var ret = jQuery.map(this, fn);// 每个元素都执行同名方法 if (selector && typeof selector == "string") ret = jQuery.multiFilter(selector, ret);// 过滤元素集 return this.pushStack(jQuery.unique(ret));// 构建jQuery对象 }; });
发表评论
-
[转载]jquery.validate.js的基本用法入门
2011-03-10 22:35 2852[转载]jquery.validate.js的基本用法入门 j ... -
使用javascript动态创建SVG对象的问题
2011-01-11 17:18 4705无沙备忘录系列 -平时的一些研究,有时也会颇费功夫,然 ... -
evaluate mxGraph
2010-06-10 16:09 1689To evaluate mxGraph: - Navigate ... -
js中的prototype与constructor
2010-06-09 10:53 2868并且每个函数都有一个默认的prototype属性。 如果这个函 ... -
Jquery1.2.6 源码分析
2008-08-29 00:13 14080jQuery是一个非常优秀的J ... -
jquery fx分析
2008-08-28 19:37 62388 FX分析 prk/彭仁夔 ... -
jqueyr fx源码(修改)
2008-08-28 19:33 2631/* * author:prk date:2008-08-0 ... -
jquery.ajax
2008-08-27 16:50 80657.2 jquery.ajax ... -
jquery event domready
2008-08-26 17:39 41066.3 domReady的处理 ... -
jquery event trigger 分析
2008-08-26 17:37 113056.2.2 trigger ... -
jquery event addEvent 分析
2008-08-26 17:36 111546.2 事件的处理 ... -
jquery event 封装的源源分析
2008-08-26 17:35 45666.Event分析 ... -
jquery position
2008-08-25 16:34 87215.2.3 position ... -
jquery wrap
2008-08-25 08:12 44465.3.5 wrap ... -
jquery class
2008-08-22 23:18 53385.1.2 Class prk/彭仁夔 2008- ... -
jquery attr
2008-08-22 23:16 75825 DOM元素 prk/彭仁夔 ... -
jquery Selector (修改)
2008-08-21 17:10 3069/** * author:prk * date:2008- ... -
CSS selector (jquery的源码分析,修改)
2008-08-21 17:09 43413.3、采用CSS方式查找Dom节点 ... -
如何找到Dom元素
2008-08-20 22:10 27753、如何找到Dom元素 ... -
Jquery源码分析(修改)
2008-08-20 22:07 5719Jquery源码分析 ...
相关推荐
JQuery开发手册 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc]) jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get...
2.3.5 jQuery.data(element, key, value) 29 2.3.6 jQuery.data([element], [key]) 30 2.4 队列控制 30 2.4.1 queue(name) 30 2.4.2 queue(name, callback) 31 2.4.3 queue(name, queue) 32 2.4.4 dequeue(name) 33 ...
本文实例讲述了jQuery中element选择器用法。分享给大家供大家参考。具体分析如下: 此选择器能够匹配具有指定标签名的元素。例如: 代码如下:$(“div”) 以上代码能够选取所有的div元素。 语法结构: 代码如下:$...
$.jQuery( selector [, context] ), .jQuery( element ), .jQuery( elementArray ), .jQuery( jQueryObject ), .jQuery( ) $.jQuery( html [, ownerDocument] ), .jQuery( html, props ) $.jQuery( fn ) jQuery ...
Auto-Save your content when editing in HTML input and textarea DOM element. http://geniuscarrier.com/autosave-a-jquery-plugin/
jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。...<p>This is a paragraph with little content. <p>This is another small paragraph. ...
elements (Element, Array<Element>) : 用于封装成jQuery对象的DOM元素 示例 设置页面背景色。 jQuery 代码: $(document.body).css( "background", "black" ); ----------------------------------------------...
jQuery.LazyContent 任何内容的延迟加载变得容易 任何内容 包括src/jquery.lazy_content.js $ ( ".elements" ) ....包括src/jquery.lazy_content.js和src/jquery.lazy_content_img.js $ ( "img.lazy" ) . la
jQuery blockUI plugin Version 2.39 (23-MAY-2011) Demos: $(document).ready(function() { $('#demo1').click(function() { $.blockUI({ message: $('#loginForm') }); setTimeout($.unblockUI, 2000); ...
// dom element }返回值: jQuery 装入一个远程HTML内容到一个DOM结点。 默认使用get方法发送请求,但如果指定了额外的参数,将会使用post方法发送请求。在 jQuery 1.2中,可以在URL参数中指定一个jQuery...
jQuery 1.11.0 速查表 核心 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold) jQuery 对象访问 each(callback) size() length selector ...
direction: 'LTR', // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left startingPage: 0, // index of the first page to be ...
// Otherwise, we inject the element directly into the jQuery object var ret = jQuery( elem || [] ); ret.context = document; ret.selector = selector; return ret; } // HANDLE: $(expr, [context])...
jquery-日历 jQuery 日历插件 克隆只需使用: git clone https://github.com/a2wd/jquery-calendar.git 要使用确保你有一个指向 ... meta name =" viewport " content =" width=device-width, initial-scale=1.0
element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :last :not :even :odd :eq :gt :lt :header :animated ...
element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :last :not :even :odd :eq :gt :lt :header :animated ...
Auto-Save your content when editing in HTML input and textarea DOM element. http://geniuscarrier.com/autosave-a-jquery-plugin/