<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CQ-CSER &#187; Dom</title>
	<atom:link href="http://cq-cser.cn/tag/dom/feed/" rel="self" type="application/rss+xml" />
	<link>http://cq-cser.cn</link>
	<description>计算机爱好者</description>
	<lastBuildDate>Wed, 02 May 2012 10:01:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>前端开发部分总结[兼容性、DOM操作、跨域等]</title>
		<link>http://cq-cser.cn/2010/03/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e9%83%a8%e5%88%86%e6%80%bb%e7%bb%93%e5%85%bc%e5%ae%b9%e6%80%a7%e3%80%81dom%e6%93%8d%e4%bd%9c%e3%80%81%e8%b7%a8%e5%9f%9f%e7%ad%89/</link>
		<comments>http://cq-cser.cn/2010/03/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e9%83%a8%e5%88%86%e6%80%bb%e7%bb%93%e5%85%bc%e5%ae%b9%e6%80%a7%e3%80%81dom%e6%93%8d%e4%bd%9c%e3%80%81%e8%b7%a8%e5%9f%9f%e7%ad%89/#comments</comments>
		<pubDate>Thu, 04 Mar 2010 05:09:43 +0000</pubDate>
		<dc:creator>cq</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[WEB]]></category>
		<category><![CDATA[Dom]]></category>
		<category><![CDATA[跨域]]></category>

		<guid isPermaLink="false">http://cq-cser.cn/?p=941</guid>
		<description><![CDATA[ 作者: 木子博客 发表于 2010-03-03 23:33 原文链接 项目背景：.Net 3.5+MySQL+jQuery+WebService 在公司做这个项目已经6个多月了，总结一些问题，也算是抛砖引玉吧，希望园子里更多的朋友一起分享一些技巧。 1、 WebService方法返回值不能为void。 当WebService方法返回值为void时，FF和Chrome会持续等待，认为这个请求没有结束，而在IE中一切是正常的。 2、当input的type=&#8221;button&#8221;时或者使用button时，点击后会触发form的submit。 当时查找页面刷新的问题找了很久，最后才发现是button会自动触发form的submit，导致当前页面的刷新。 3、js设置document.domain只能从二级域名设置到顶级域名。 比如访问moozi.cnblogs.com，可以在这个页面中写document.domain=&#8217;cnblogs.com&#8217;;如果把域设置为cnblogs.com之后，无法再使用document.domain=&#8217;moozi.cnblogs.com&#8217;;。 4、使用DOM片段创建iframe，当跨域时，不能用js写iframe的域。 比如你在moozi.cnblogs.com/test.html页面用js把域设置为document.domain=&#8217;cnblogs.com&#8217;，而此时你再用var ifrm=createElement(&#8216;iframe&#8217;) ，这时将不能用js设置iframe的域也为&#8217;cnblogs.com&#8217;，只能让ifrm.src=&#8217;test2.htm&#8217;，并在test2.htm中设置域document.domain=&#8217;cnblogs.com&#8217;。 5、当你修改过当前域的时候，CKEditor是正常的，而tinyMCE需要重新设置域。  CKEditor能自动识别当前域，并不出错。tinyMCE需要人为的设置。同时，如果你是用CKFinder上传文件，而需要修改它的输入代码，不然会因为域不同而出现没有权限的错误提示。 6、使用tinyMCE，尽管你的初始化代码只有一句，但是可能出现多次初如化。发生原因未知，在不确定的情况下会出现此BUG。 7、开发js组件的时候，要时刻注意闭包和this的指代，这方面之前吃了不少亏。 8、将字符串转换成jQuery对象时，要注意字符串html代码的闭合标签。  比如：var html=&#8217;&#60;span&#62;test&#60;/span&#62;&#38;nbsp;&#8217;var jqEl=$(html);此时，jqEl会把html里的&#8217;&#38;nbsp;&#8217;丢掉。 9、jQuery1.2.6和jQuery1.3在细节的处理上有一些区别。 jQuery1.2.6处理hasClass(&#8216;.className&#8217;)会出错，而jQuery1.3不会。 10、尽量少用jQuery的each，多用js原生的代码，性能较高。 Related posts:一级域名和二级域名跨域的解决方案 JQuery进行跨域请求


Related posts:<ol><li><a href='http://cq-cser.cn/2010/01/%e4%b8%80%e7%ba%a7%e5%9f%9f%e5%90%8d%e5%92%8c%e4%ba%8c%e7%ba%a7%e5%9f%9f%e5%90%8d%e8%b7%a8%e5%9f%9f%e7%9a%84%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88/' rel='bookmark' title='Permanent Link: 一级域名和二级域名跨域的解决方案'>一级域名和二级域名跨域的解决方案</a></li>
<li><a href='http://cq-cser.cn/2010/01/jquery%e8%bf%9b%e8%a1%8c%e8%b7%a8%e5%9f%9f%e8%af%b7%e6%b1%82/' rel='bookmark' title='Permanent Link: JQuery进行跨域请求'>JQuery进行跨域请求</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<div> 作者: <a href="http://www.cnblogs.com/moozi/" target="_blank">木子博客</a> 发表于 2010-03-03 23:33 <a href="http://www.cnblogs.com/moozi/archive/2010/03/03/1677843.html" target="_blank">原文链接</a></div>
<div>
<div>
<p>项目背景：.Net 3.5+MySQL+jQuery+WebService</p>
<p>在公司做这个项目已经6个多月了，总结一些问题，也算是抛砖引玉吧，希望园子里更多的朋友一起分享一些技巧。</p>
<p>1、 WebService方法返回值不能为void。</p>
<p>当WebService方法返回值为void时，FF和Chrome会持续等待，认为这个请求没有结束，而在IE中一切是正常的。</p>
<p>2、当input的type=&#8221;button&#8221;时或者使用button时，点击后会触发form的submit。</p>
<p>当时查找页面刷新的问题找了很久，最后才发现是button会自动触发form的submit，导致当前页面的刷新。</p>
<p>3、js设置document.domain只能从二级域名设置到顶级域名。<span id="more-941"></span></p>
<p>比如访问moozi.cnblogs.com，可以在这个页面中写document.domain=&#8217;cnblogs.com&#8217;;如果把域设置为cnblogs.com之后，无法再使用document.domain=&#8217;moozi.cnblogs.com&#8217;;。</p>
<p>4、使用DOM片段创建iframe，当跨域时，不能用js写iframe的域。</p>
<p>比如你在moozi.cnblogs.com/test.html页面用js把域设置为document.domain=&#8217;cnblogs.com&#8217;，而此时你再用var ifrm=createElement(&#8216;iframe&#8217;) ，这时将不能用js设置iframe的域也为&#8217;cnblogs.com&#8217;，只能让ifrm.src=&#8217;test2.htm&#8217;，并在test2.htm中设置域document.domain=&#8217;cnblogs.com&#8217;。</p>
<p>5、当你修改过当前域的时候，CKEditor是正常的，而tinyMCE需要重新设置域。</p>
<p> CKEditor能自动识别当前域，并不出错。tinyMCE需要人为的设置。同时，如果你是用CKFinder上传文件，而需要修改它的输入代码，不然会因为域不同而出现没有权限的错误提示。</p>
<p>6、使用tinyMCE，尽管你的初始化代码只有一句，但是可能出现多次初如化。发生原因未知，在不确定的情况下会出现此BUG。</p>
<p>7、开发js组件的时候，要时刻注意闭包和this的指代，这方面之前吃了不少亏。</p>
<p>8、将字符串转换成jQuery对象时，要注意字符串html代码的闭合标签。</p>
<p> 比如：var html=&#8217;&lt;span&gt;test&lt;/span&gt;&amp;nbsp;&#8217;var jqEl=$(html);此时，jqEl会把html里的&#8217;&amp;nbsp;&#8217;丢掉。</p>
<p>9、jQuery1.2.6和jQuery1.3在细节的处理上有一些区别。</p>
<p>jQuery1.2.6处理hasClass(&#8216;.className&#8217;)会出错，而jQuery1.3不会。</p>
<p>10、尽量少用jQuery的each，多用js原生的代码，性能较高。</p></div>
</div>


<p>Related posts:<ol><li><a href='http://cq-cser.cn/2010/01/%e4%b8%80%e7%ba%a7%e5%9f%9f%e5%90%8d%e5%92%8c%e4%ba%8c%e7%ba%a7%e5%9f%9f%e5%90%8d%e8%b7%a8%e5%9f%9f%e7%9a%84%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88/' rel='bookmark' title='Permanent Link: 一级域名和二级域名跨域的解决方案'>一级域名和二级域名跨域的解决方案</a></li>
<li><a href='http://cq-cser.cn/2010/01/jquery%e8%bf%9b%e8%a1%8c%e8%b7%a8%e5%9f%9f%e8%af%b7%e6%b1%82/' rel='bookmark' title='Permanent Link: JQuery进行跨域请求'>JQuery进行跨域请求</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://cq-cser.cn/2010/03/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e9%83%a8%e5%88%86%e6%80%bb%e7%bb%93%e5%85%bc%e5%ae%b9%e6%80%a7%e3%80%81dom%e6%93%8d%e4%bd%9c%e3%80%81%e8%b7%a8%e5%9f%9f%e7%ad%89/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Dom Ready和Dom Load[zz]</title>
		<link>http://cq-cser.cn/2010/02/dom-ready%e5%92%8cdom-loadzz/</link>
		<comments>http://cq-cser.cn/2010/02/dom-ready%e5%92%8cdom-loadzz/#comments</comments>
		<pubDate>Sat, 13 Feb 2010 08:12:25 +0000</pubDate>
		<dc:creator>cq</dc:creator>
				<category><![CDATA[WEB]]></category>
		<category><![CDATA[Dom]]></category>
		<category><![CDATA[Load]]></category>
		<category><![CDATA[Ready]]></category>

		<guid isPermaLink="false">http://cq-cser.cn/?p=813</guid>
		<description><![CDATA[1、Dom Ready 真不知道这个标题该怎么取，暂时就先凑活着用了。 用jQ的人很多人都是这么开始写脚本的： $(function(){ // do something }); 其实这个就是jq ready()的简写，他等价于： $(document).ready(function(){ //do something }) //或者下面这个方法，jQuer的默认参数是：“document”； $().ready(function(){ //do something }) 这个就是jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。 一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。 那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。 2、Dom Load 用原生的js的时候我们通常用onload时间来做一些事情，比如： window.onload=function(){ //do something } //或者经常用到的图片，假设这个 document.getElementById("imgID").onload=function(){ //do something } 这种就是Dom Load，他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。  那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。 3.用个最常用的例子说明Dom Ready和Dom Load两者的区别 Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要&#60;img&#62;标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等； Dom Load是在整个document文档（包括了加载图片等其他信息）加载完成后就可以直接对dom进行操作，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等； 比如一个图片浏览的效果，通常如果图片尺寸很大的情况下，为了防止图片把页面撑开通常会限定图片的宽度或高度，如果是单张图片或者是多张规格比例统一的图片下我们可以直接在&#60;img&#62;上价格宽度或者高度的属性&#60;img src=“img.jpg” alt=”码头的大照片” width=“100” height=“90”&#62;，比如（推荐）或者可以在css样式中加宽度或者高度的属性。但是如果这些张规格比例不统一的图片要浏览呢？那就有问题，你设置宽高很可能造成图片严重失真。在ie6之后ie7，ie8还有其他主流浏览器支持css2.1中min-width，max-width，min-height，max-width，这样我们就可以用min-width，max-width，min-height，max-width解决这些问题，但是ie6除非是抛弃性能问题用css表达式（当然old9(http://old9.blogsome.com/2008/10/26/css-expression-reloaded/)和怿飞(http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/)有关于css表达式性能问题的解决方案,大家可以看一下）。这个时候ie的做好解决方案就是用Dom Ready而不是Dom Load，因为通常大图片加载的时候会一点一点的加载，这个在尺寸大，字节多，网速慢的时候表现的非常明显，用Dom [...]


Related posts:<ol><li><a href='http://cq-cser.cn/2010/01/%e7%a6%81%e6%ad%a2%e5%8f%b3%e9%94%ae%e4%bb%a3%e7%a0%81/' rel='bookmark' title='Permanent Link: 禁止右键代码'>禁止右键代码</a></li>
<li><a href='http://cq-cser.cn/2010/02/evalfunctionpackerefunctionc/' rel='bookmark' title='Permanent Link: eval(function(p,a,c,k,e,r){e=function(c)'>eval(function(p,a,c,k,e,r){e=function(c)</a></li>
<li><a href='http://cq-cser.cn/2009/12/div%e7%a7%bb%e5%8a%a8/' rel='bookmark' title='Permanent Link: DIV移动'>DIV移动</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><span style="widows: 2; text-transform: none; text-indent: 0px; border-collapse: separate; font: 14px arial, sans-serif; white-space: normal; orphans: 2; letter-spacing: normal; color: #000000; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span style="border-collapse: collapse; font-size: 13px;"></p>
<div style="margin: 0px; max-width: 650px; color: #000000; padding-top: 0.5em;">
<div style="margin: 0px;">
<div style="margin: 0px;">
<div style="margin: 0px;">
<h2><strong>1、Dom Ready</strong></h2>
<p>真不知道这个标题该怎么取，暂时就先凑活着用了。</p>
<p>用jQ的人很多人都是这么开始写脚本的：</p>
<pre style="font-size: 11px;">$(function(){

// do something

});</pre>
<p>其实这个就是jq ready()的简写，他等价于：<span id="more-813"></span></p>
<pre style="font-size: 11px;">$(document).ready(function(){
//do something
})
//或者下面这个方法，jQuer的默认参数是：“document”；
$().ready(function(){
//do something
})</pre>
<p>这个就是jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。</p>
<p>一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。</p>
<p>那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。</p>
<h2><strong>2、Dom Load</strong></h2>
<p>用原生的js的时候我们通常用onload时间来做一些事情，比如：</p>
<pre style="font-size: 11px;">window.onload=function(){
//do something
}
//或者经常用到的图片，假设这个
document.getElementById("imgID").onload=function(){
//do something
}</pre>
<div style="margin: 0px;">这种就是Dom Load，他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。<span> </span></div>
<div style="margin: 0px;">那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。</div>
<h2><strong>3.用个最常用的例子说明Dom Ready和Dom Load两者的区别</strong></h2>
<div style="margin: 0px;">
<ol>
<li>Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要&lt;img&gt;标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等；</li>
<li>Dom Load是在整个document文档（包括了加载图片等其他信息）加载完成后就可以直接对dom进行操作，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等；</li>
</ol>
</div>
<div style="margin: 0px;">比如一个图片浏览的效果，通常如果图片尺寸很大的情况下，为了防止图片把页面撑开通常会限定图片的宽度或高度，如果是单张图片或者是多张规格比例统一的图片下我们可以直接在&lt;img&gt;上价格宽度或者高度的属性&lt;img src=“img.jpg” alt=”码头的大照片” width=“100” height=“90”&gt;，比如（推荐）或者可以在css样式中加宽度或者高度的属性。但是如果这些张规格比例不统一的图片要浏览呢？那就有问题，你设置宽高很可能造成图片严重失真。在ie6之后ie7，ie8还有其他主流浏览器支持css2.1中min-width，max-width，min-height，max-width，这样我们就可以用min-width，max-width，min-height，max-width解决这些问题，但是ie6除非是抛弃性能问题用css表达式（当然old9(<a style="color: #2244bb;" href="http://old9.blogsome.com/2008/10/26/css-expression-reloaded/" target="_blank">http://old9.blogsome.com/2008/10/26/css-expression-reloaded/</a>)和怿飞(<a style="color: #2244bb;" href="http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/" target="_blank">http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/</a>)有关于css表达式性能问题的解决方案,大家可以看一下）。这个时候ie的做好解决方案就是用Dom Ready而不是Dom Load，因为通常大图片加载的时候会一点一点的加载，这个在尺寸大，字节多，网速慢的时候表现的非常明显，用Dom Load，通常是先把页面撑开，加载完成后再把图片重设宽高，图片加载多少时间，这个页面就会撑开多久，用户会非常难受！！</div>
<div style="margin: 0px;"><strong><span style="color: #ff0000;">这点可以看我做的一个的一个小demo</span></strong>：<a style="color: #2244bb;" href="http://www.css88.com/demo/domready/" target="_blank">http://www.css88.com/demo/domready/</a>(注意第二次测试的时候要清除缓存)</div>
<p><strong>Dom Ready在jQ中的基本的写法：</strong></p>
<pre style="font-size: 11px;">$().ready(function() {

$("#big_A").width("100px");

});</pre>
<p>在原生的js中没有Dom Ready的直接方法，只有Dom Load的方法就是load事件。</p>
<p>有牛人封装了很多方法，jq，YUI等js库也是封装出来的，呵呵。</p>
<p>以下是来自<a style="color: #2244bb;" href="http://www.cnblogs.com/rubylouvre/archive/2009/12/30/1635645.html" target="_blank">http://www.cnblogs.com/rubylouvre/archive/2009/12/30/1635645.html</a>的一个<strong>Dom Ready的方法</strong>：</p>
<pre style="font-size: 11px;">new function(){

dom = [];

dom.isReady = false;

dom.isFunction = function(obj){

return Object.prototype.toString.call(obj) === "[object Function]";

}

dom.Ready = function(fn){

dom.initReady();//如果没有建成DOM树，则走第二步，存储起来一起杀

if(dom.isFunction(fn)){

if(dom.isReady){

fn();//如果已经建成DOM，则来一个杀一个

}else{

dom.push(fn);//存储加载事件

}

}

}

dom.fireReady =function(){

if (dom.isReady)  return;

dom.isReady = true;

for(var i=0,n=dom.length;i&lt;n ;i++){

var fn = dom[i];

fn();

}

dom.length = 0;//清空事件

}

dom.initReady = function(){

if (document.addEventListener) {

document.addEventListener( "DOMContentLoaded", function(){

document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除加载函数

dom.fireReady();

}, false );

}else{

if (document.getElementById) {

document.write("&lt;script id=\"ie-domReady\" defer='defer'src=\"//:\"&gt;&lt; \/script&gt;");

document.getElementById("ie-domReady").onreadystatechange = function() {

if (this.readyState === "complete") {

dom.fireReady();

this.onreadystatechange = null;

this.parentNode.removeChild(this)

}

};

}

}

}

}</pre>
<p>使用方法：</p>
<pre style="font-size: 11px;">dom.Ready(function(){

alert("我的domReady！")

});

dom.Ready(function(){

alert("我的domReady测试多重加载1！")

});

dom.Ready(function(){

alert("我的domReady测试多重加载2!")

});

dom.Ready(function(){

alert(document.getElementById("test").innerHTML)

});</pre>
<p>点击查看demo：<a style="color: #2244bb;" href="http://www.css88.com/demo/domready/" target="_blank">http://www.css88.com/demo/domready/</a>(注意第二次测试的时候要清除缓存)</div>
</div>
</div>
</div>
<p></span></span></p>
<div style="background-color: #ffffff; margin: 0px; max-width: 650px;"></div>


<p>Related posts:<ol><li><a href='http://cq-cser.cn/2010/01/%e7%a6%81%e6%ad%a2%e5%8f%b3%e9%94%ae%e4%bb%a3%e7%a0%81/' rel='bookmark' title='Permanent Link: 禁止右键代码'>禁止右键代码</a></li>
<li><a href='http://cq-cser.cn/2010/02/evalfunctionpackerefunctionc/' rel='bookmark' title='Permanent Link: eval(function(p,a,c,k,e,r){e=function(c)'>eval(function(p,a,c,k,e,r){e=function(c)</a></li>
<li><a href='http://cq-cser.cn/2009/12/div%e7%a7%bb%e5%8a%a8/' rel='bookmark' title='Permanent Link: DIV移动'>DIV移动</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://cq-cser.cn/2010/02/dom-ready%e5%92%8cdom-loadzz/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

