当前位置: 编程技术>WEB前端
本页文章导读:
▪由莫名其妙的错误开始---浅谈jquery的dom节点创建 本来没准备今天发博客的，在一个前端群中，一位老大哥风自由提出了一个简单却很奇特的问题：有一个字符串是这样的：var s = '<html lang="en" >'+ '<head><meta name="csrf-token" content="Oul7Wq.........
▪作品网站（之一） CSS代码如下：
@charset "utf-8";
/* CSS Document */
body{margin:0 auto; font-size:12px;font-family:"宋体";text-align:center;
background-image:url(/blog_article/text.txt); /* for IE6置顶 */
background-attachment:fixed;/* for IE6置顶 */
.........
▪Tomcat正常启动，访问所有页面均报404异常，404异常总结 今天遇到一个问题：Tomcat正常启动，访问所有页面均报404异常
404异常，很常见，大多情况是路径错误、web.xml文件映射路径写错、服务器设置、servlet的jar包未导进去或者没有随项目发布等等.........
[1]由莫名其妙的错误开始---浅谈jquery的dom节点创建
本来没准备今天发博客的，在一个前端群中，一位老大哥风自由提出了一个简单却很奇特的问题：
有一个字符串是这样的：var s = '<html lang="en" >'+ '<head><meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc="/></head><body></body></html>';
怎么通过jquery得到其中content的值？
本来觉得这个问题蛮简单的，既可以通过正则获取，也可以通过jquery的$将这个字符串变成一个jq对象来获取。但是也正是后来这个方法，却带来了问题。
以我的理解，定位content的方法应该为$(s).find("meta").attr("content")，但是这么去获取结果确并不正确。
于是做了简单的尝试：
var s = '<html lang="en" >'+ '<head><meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc="/></head><body></body></html>';
$(s);//[<meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc=">]
$(s);//[<meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc=">]
得到的并不是所详细的结果，而是meta标签。
这就有点奇怪了，风大猜测是因为外面有<html></html>，可能jquery不能把<html>标签变为dom。而在字符串外层套一层div则确实能够正确的获取结果。
但是，这个结果真的正确么？
又做了一个简单的尝试：
var s = '<div><html lang="en" >'+
'<head><meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc="/></head><body></body></html></div>';
$(s);//[<div><meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc="></div>]
'<head><meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc="/></head><body></body></html></div>';
$(s);//[<div><meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc="></div>]
结果并不是我们所想象的那样，而是仍旧去除了html标签，只不过因为套用了一层div，使$(s).find("meta").attr("content")去正确找寻了节点，并不是保护了html标签。
这个问题的原因，相信只有jq的源码能够给我答案了。写了几行简单的测试代码，去通过断点解读一下jq的处理机制：
(function() {
debugger;
$('<html ></html>');
$('<div></div>');
$('<html></html>');
})();
debugger;
$('<html ></html>');
$('<div></div>');
$('<html></html>');
})();
事实证明，除了第一种方式不能正确的获得结果以外，后两种都能正确的获取结果。通过研读jq的源码中对jq对象创建的代码，终于弄清楚了这个原因。
jq对传入的字符串会进行一次正则：
var parsed = rsingleTag.exec( data );//rsingleTag=/^<(\w+)\s*\/?>(?:<\/\1>|)$/
解释一下这个正则吧：
^<(\w+)\s*\/?
以<开头，至少跟着一个字符和任意个空白字符，之后出现0或1次/
>
这个就不说了，前面这些加起来就是<div >这样或者<meta />这样的
(?:<\/\1>|)$
可以匹配<、一个/或者空白并以之为结尾
这些就是</div>或者跟着<br />这种自闭合标签后面的空
这样如果没有任何属性和子节点的字符串（比如'<html></html>'或者'<div></div>'这样）会通过正则的匹配，当通过正则的匹配后则会通过传入的上下文直接创建一个节点：
if ( parsed ) {
return [ context.createElement( parsed[1] ) ];
}//context为上下文
return [ context.createElement( parsed[1] ) ];
}//context为上下文
而未通过节点的字符串，则通过创建一个div节点，将字符串置入div的innerHTML：
tmp = tmp || safe.appendChild( context.createElement("div") );//创建divdom节点
tmp.innerHTML = wrap[1] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[2];//将字符串置入div对象的innerHTML
tmp.innerHTML = wrap[1] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[2];//将字符串置入div对象的innerHTML
而浏览器是不允许div内直接包含<html>的，因此会将html标签过滤。
当过滤了html之后，刚才的字符串变成了：
<head><meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc="/></head><body></body>
jq会从两端向中间去寻找节点的头尾，在这里闭合标签则被寻找为meta标签。
这就是这次所得到的所有结论，总结一下：
如果你的标签是没有子节点和属性的标签，jq会通过正则判定后在你传入的上下文环境直接创建这个节点。
如果你的标签带有子节点或者属性，jq的正则不过，然后会创建一个div，把你的字符串作为div的innerHTML传入，再对div内部的dom节点遍历属性和节点，去获取class啊id啊之类的，然后再创建这个真正的节点。
但是浏览器不允许任何非frame类元素内部有html标签，会将之过滤。
在过滤了html标签后，head标签和body标签就成了两个标签，而jq是从外向内寻找包裹的标签对的，所以这两个标签没有被识别，而meta标签因为是自闭合标签，而且也是从外往内被包裹的最外层闭合标签，因此就成了获取这个标签。
大概就是这样了。
感谢阅读~同时感谢风大~
本文链接
[2]作品网站（之一）
来源: 互联网 发布时间: 2013-11-06
CSS代码如下：
@charset "utf-8";
/* CSS Document */
body{margin:0 auto; font-size:12px;font-family:"宋体";text-align:center;
background-image:url(/blog_article/text.txt); /* for IE6置顶 */
background-attachment:fixed;/* for IE6置顶 */
background:#E8F8F8;
}
a{text-decoration:none;}
a:link{color:#FFFFFF; }
a:visited{color:#FFFFFF;}
a:hover {color:#0d7c32; text-decoration:underline;}
h1{ font-size:30px; font-weight:bold; text-align:left; color:#c48807;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;}
h2{font-size:20px; margin:0px; text-align:left;color:#c48807;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;}
h3{color:#9e6c00; margin:0px; line-height:18px; font-size:18px; text-align:left;}
h4{text-align:center; font-size:20px; color:#087403;}
h5{text-align:center; font-size:20px; color:#ffbd00;}
p{ font-size:14px; font-family:Verdana, Geneva, sans-serif; text-indent:4ex; line-height:24px; margin:0px; text-align:left; }
ul{list-style:none; margin:0px; padding:0;}
li{ list-style:none; line-height:24px; font-size:12px; color:#ffffff;}
img{ float:left; border:0;}
/*头部*/
.top{margin:0 auto;background: url(/blog_article/images/bg_title_01.jpg) center top no-repeat; height:472px;}
/*首页导航*/
.bgnav{background: url(/blog_article/images/bg_nav_01.jpg) no-repeat center top ; height:33px; }
.nav{width: 980px;height: 33px; margin: auto auto; }
.nav img{ clear:both;}
.nav ul {margin:0; padding:0; height:33px; float: left;}
.nav li {text-align: center; line-height: 33px; float: left;padding:0px 3px 0px 3px; margin:0 0px 0 2px; display:inline;
height:33px; font-size:16px; font-weight: bold;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu; font-weight:bold;
}
.nav li a:link { height: 33px;text-decoration: none; font-weight:bold; padding:0px 3px 0px 3px;float:left; color: #000; margin:0 2px 0 2px;}
.nav li a:hover {color: #030;font-weight: bold; background: url(/blog_article/images/nav_bg2.jpg) no-repeat left top;
text-decoration:none; height:33px; float:left; padding:0px 3px 0px 3px; margin:0 2px 0 2px;
}
.formula span{ padding-left:5px; display:inline; }
.FAQ span{ padding-left:5px; display:inline; }
.case span{ padding-left:5px; display:inline; }
.order span{ padding-left:5px; display:inline; }
/*主题内容*/
.main {margin:0 auto;position:relative;}
#AdLayer {position:absolute;width:20px;display:none;height:59px;top:0px;right:-30px;}
.container{width:980px;position:relative; margin:0 auto;}
.center{ float:left; width:980px; position: relative; background:#FFF }
.ct1_l{ background:url(/blog_article/images/fmq_02.jpg) no-repeat left top; height:506px; position:relative; z-index:0; width:575px; float:left;}
.ct1_r{ float:left; position:absolute; z-index:1; width:460px; right:20px;}
.ct1_r h2{ padding-top:10px; color:#064875;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;}
.ct1_r p{ padding-top:10px;}
.ct1_r_fmq{ background:#FFF8CA; margin-top:30px; border:1px solid #DAE6ED;}
.ct2_table{ margin-top:10px; margin-right:20px; width:960px; float:left; display:inline;}
.ct2_activity{ float:left; width:980px;}
.spec1 p{ text-indent:0;}
.ct2{ margin-top:15px; margin-left:10px; float:left; display:inline; width:970px;}
.ct3{ float:left; width:980px;}
.ct4{ margin:15px 15px 0 15px; float:left; display:inline; width:950px;}
.ct4_effect_l{width:392px; float:left;}
.ct4_l{width:392px; float:left; margin-top:10px;}
.ct4_l_top{ width:392px; background:url(/blog_article/images/fmq_14.jpg) repeat-y left top; height:200px;}
.ct4_l_bottom{ background:url(/blog_article/images/fmq_18.jpg) repeat-y left top; height:11px;}
.ct4_effect_r{width:537px; float:right;}
.ct4_r{width:537px; float:right; margin-top:10px;}
.ct4_r_top{ width:537px; background:url(/blog_article/images/fmq_15.jpg) repeat-y right top; height:120px;}
.ct4_r_bottom{ background:url(/blog_article/images/fmq_16.jpg) repeat-y right top; height:10px;}
.ct4_aftermath{ float:left; width:980px;}
.ct4_disease{float:left; width:970px; margin:10px 5px 0 5px; display:inline;}
.ct4_disease h1{ font-size:24px; color:#9f7b2b;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;}
.ct4_coronary{float:left; width:950px; margin:10px 5px 0 15px; display:inline;}
.ct4_coronary h2{ color:#9f7b2b;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;}
.ct4_coronary h1{ font-size:24px; color:#9f7b2b;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;}
.ct5{ margin-left:15px; display:inline; float:left; margin-top:20px;}
.ct6{ margin:5px 10px 0 20px; display:inline; float: left; width:950px; border:1px solid #999;}
/*图片轮播*/
.ct7{ margin:5px 10px 0 20px; display:inline; float: left; width:950px; position:relative;}
#demopage{width:950px; position:relative;margin:5px 10px 0 20px; display:inline; }
.slider{width:944px;height:224px;border:1px solid #CCC;position:relative;overflow:hidden; }
.conbox{position: absolute; float:left /*必要元素*/}
.switcher{position:absolute;bottom:-3px;right:10px;float:right;z-index:99; }
.switcher a{cursor:pointer;float:left;}
.switcher a.cur,.switcher a:hover{width:30px;margin:0 10px;display:inline; }
.ct8{ margin:20px 10px 0 20px; display:inline; float: left; width:950px;}
.ct8 h2{ color:#ba000c; padding-top:10px;}
.ct9 h1{ background-color:#BA000C; color: #FFF; height:36px; line-height:36px;}
.ct10{ margin-top:15px 20px 0 20px; float:left; display:inline; width:940px;}
.ct10 table td{ vertical-align:top; padding-top:20px;}
.ct10 table td h3{ padding-top:5px;}
.ct10 table td p{ padding-top:10px;}
.zzzs {width: 980px;height: 200px;background: #a50000; float:left;}
.zzzs_left {float: left;background: #4d0604;width: 70px;height: 200px;}
.zzzs_right {float: left;width: 910px;height: 200px;background: #a50000;}
.foot{ width:986px; margin:0 auto; text-align:center; font-size:12px; color:#000000; float:left; padding-top:20px;}
.foot a{text-decoration:none;}
.foot a:link{color:#000000;}
.foot a:visited{color:#000000;}
.foot a:hover {color:#000000; text-decoration:underline;}
/*公司简介*/
.topChild{margin:0 auto;background: url(/blog_article/images/bg_title_02.jpg) center top no-repeat; height:199px;}
.ct11{ background:url(/blog_article/images/bg_ct_01.jpg) no-repeat center top; height:460px; }
.ct11_intro{ width:611px; padding-left:290px; padding-top:100px;}
.ct11_intro p{ line-height:28px; color:#595757;}
.ct11_intro h2{ padding-top:30px; text-align:right; color:#064875;}
.ct11_intro a{color:#064875;}
/*产品介绍*/
.ct_introduce{ margin:30px 20px 0 20px; display:inline; float:left; width:940px;}
.ct_introduce h2{color:#064875;}
.ct_introduce hr{ border:1px dashed #064875; margin-top:10px;}
.ct_introduce p{ font-weight:bold; line-height:28px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;}
.ct_introduce span{ color:#064875}
.ct_introduce table td#vertical{ vertical-align:top;}
/*辅酶Q10*/
.ct_fmq{margin:30px 20px 0 20px; display:inline; float:left; width:940px;}
.ct_fmq h1{ color:#064875;}
.ct_fmq img{ padding-top:15px;}
.ct_fmq hr{ border:1px dashed #064875; margin-top:10px;}
.ct_fmq h2{color:#064875; padding-top:30px;}
.ct_fmq P{ padding-top:10px;}
.ct_fmq h3{color:#871d24; padding-top:30px;}
.ct_fmq pre{font-size:14px; line-height:24px; margin:0px; text-align:left; width:940px;}
.ct_fmq span{ font-weight:bold;}
/*证照验证*/
.ct_zzyz h3{ text-align:center; padding:0; color:#064875;}
/*配方推荐*/
.ct_formula{margin:30px 20px 0 20px; display:inline; float:left; width:940px;}
.ct_formula P{ padding-top:0px;}
.ct_formula span{ color:#871d24; font-weight:bold;}
.ct_formula h2#formula{ padding-top:10px; padding-bottom:15px;}
.ct_formula table td#vertical{ vertical-align:top;}
.ct_formula font{ font-weight:bold;}
/*成功案例*/
.ct_case h3{ padding-top:10px; color:#064875;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;}
作者：mylftnt 发表于2013-3-21 22:39:20 原文链接
阅读：0 评论：0 查看评论
[3]Tomcat正常启动，访问所有页面均报404异常，404异常总结
来源: 互联网 发布时间: 2013-11-06
今天遇到一个问题：Tomcat正常启动，访问所有页面均报404异常
404异常，很常见，大多情况是路径错误、web.xml文件映射路径写错、服务器设置、servlet的jar包未导进去或者没有随项目发布等等。
如果是路径错误，仔细检查即可解决问题。
服务器没设置好也会报这个错误，这一般是新手刚开始学时遇到的问题，就是要把eclipse中的tomcat的server location设置为use tomcat installation，在eclipse界面双击tomcat server见如图设置：
如果是servlet的jar包问题，则通过build path引入jar包，在libraries选项卡添加外部jar文件，并在order and export选项卡中勾选应用，最后在deployment and assessment选项中添加它，表明tomcat发布时将它拷贝到项目下WEB-INF\lib目录中。
而今天我遇到的问题却不是其中任何一个，想想我也没动什么东西，只是修改代码时，想用另外一种方法实现上传功能，不料引入一个jar包又删掉后出现了404的问题，很无奈。
问题出来了是要解决的，折腾半天，终于找到问题所在了：删jar包时不小心把发布所包含的webapp给remove掉了，这就难怪报找不到路径了，见图
好了，问题解决。
作者：liyong199012 发表于2013-3-21 21:59:18 原文链接
阅读：37 评论：1 查看评论
最新技术文章: