静态网页布局与动态数据的加载
分析：代码注释里已经概括
&%@ page language=&java& import=&java.util.*& pageEncoding=&UTF-8&%&
&title&发现&/title&
&meta http-equiv=&pragma& content=&no-cache&&
&meta http-equiv=&cache-control& content=&no-cache&&
&meta http-equiv=&expires& content=&0&&
&meta http-equiv=&keywords& content=&keyword1,keyword2,keyword3&&
&meta http-equiv=&description& content=&This is my page&&
&meta name=&viewport& content=&width=device-width, initial-scale=1, maximum-scale=1&&
&link href=&./search.css& rel=&stylesheet& type=&text/css& media=&all&&
&!-- 顶部的静态页面布局和动态数据加载
&div class=&top&&
&div class=&c_lan&&大家在看
&div class=&space&&
&div class=&c_article&&
【战争】这里的黎明静悄悄
&div class=&right&&
&div class=&font&&【神话】封神演义
&div class=&space&&
&div class=&c_article&&
【战争】这里的黎明静悄悄
&div class=&right&&
&div class=&font&&【神话】封神演义
&div class=&space&&
&div class=&c_article&&
【战争】这里的黎明静悄悄
&div class=&right&&
&div class=&font&&【神话】封神演义
&div class=&space&&
&div class=&reverse& id=&reverse&&换一批
&div class=&kong&&
&!-- 世界文学作品栏 --&
&div class=&c_lan&&世界文学
&div class=&new_surrond&&
&div class=&new&&
&img src=&& class=&new_img& style=&display:&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
&div class=&new_content&&文学作品
&div class=&new&&
&img src=&& class=&new_img& style=&display:&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
&div class=&new_content&&文学作品
&div class=&new&&
&img src=&& class=&new_img& style=&display:&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
&div class=&new_content&&文学作品
&div class=&new&&
&img src=&& class=&new_img& style=&display:&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
&div class=&new_content&&文学作品
&div class=&new&&
&img src=&& class=&new_img& style=&display:&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
&div class=&new_content&&文学作品
&div class=&kong&&
&!-- 类别广场栏 --&
&div class=&c_lan&&类别广场
&div class=&guang_surround&&
&img src=&& class=&guang_img& style=&display:&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
1000人关注
&img src=&& class=&guang_img& style=&display:&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
1000人关注
&img src=&& class=&guang_img& style=&display:&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
1000人关注
&img src=&& class=&guang_img& style=&display:&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
1000人关注
&div class=&kong&&
&div class=&extend&&
书籍是人类进步的阶梯
&img src=&& class=&extend_img& style=&display:&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
想的时候来剑圣
每个人的世界都有精彩
&img src=&& class=&extend_img& style=&display:&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
希望读书能让你找到精彩
剑圣阅读会为您推送礼物
&img src=&& class=&extend_img&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
点击查看更多
&!-- 责任编辑栏 --&
&div class=&c_lan&&责任编辑
&div class=&new_surrond&&
&div class=&new&&
&img src=&& class=&new_img&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
&div class=&new&&
&img src=&& class=&new_img&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
&div class=&new&&
&img src=&& class=&new_img&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
&div class=&new&&
&img src=&& class=&new_img&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
&div class=&new&&
&img src=&& class=&new_img&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
&div class=&new&&
&img src=&& class=&new_img&&&img alt=&加载中...& title=&图片加载中...& src=/uploadfile/429.gif&&
&script type=&text/javascript& src = &js/jquery.js&&&/script&
&script type=&text/javascript&&
// 页面初始化时
window.onload = function(){
var num = $(&.font&);
for (var i = 0;i & num. i++){
num.eq(i).css(&color&, getRandomColor());
var $newWidth = $(&.new_img&).width();
$(&.new_img&).css(&height&, $newWidth*1.5);
// 字体颜色的随机值
function getRandomColor(){
var c = '#';
var cArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A',
'B', 'C', 'D', 'E', 'F'];
for (var i = 0; i & 6; i++){
var cIndex = Math.round(Math.random() * 15);
c += cArray[cIndex];
// &换一批&,通过id = reverse相应点击事件,
$(&#reverse&).click(function(){
// 通过json获取数据，改变left，right的文本
url:&sixRandom.shtml&,
type:&GET&,
dataType:&json&,
success:function(data){
var left = $(&.left&);
for (var i = 0; i & left. i++){
left.eq(i).html(&&div class=&font&&[&+data[i*2].tag+&]& + data[i*2].name);
var right = $(&.right&);
for(i=0;i&right.i++){ right.eq(i).html(&&div=&& class=&font&&[&+data[i*2+1].tag+&]&+data[i*2+1].name);
var num = $(&.font&);
for(i=0;i&num.i++){ num.eq(i).css(&color&,getrandomcolor());=&& }=&& });=&& &=&& script&=&& &=&& html=&&&
&/num.i++){&&/right.i++){&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&&/div&
width: 100%;
font-size: 1.1
font-weight: 900;
line-height: 1.1
padding-top: 5
margin-bottom: 15
width: 100%;
background-color: #EEE9BF;
.c_article {
font-size: 1.0
font-weight: 100;
line-height: 1.0
width: 100%;
height: 50
width: 45%;
text-align:
font-size: 0.9
height: 50
line-height: 50
width: 45%;
text-align:
font-size: 0.9
height: 50
line-height: 50
width: 100%;
height: 30
text-align:
color: #EEE9BF;
font-size: 1.1
line-height: 30
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
width: 100%;
height: 10
background-color: #EEE9BF;
width: 30%;
margin-left: 3%;
margin-bottom: 10
width: 100%;
.new_content{
width: 100%;
height: 50
line-height: 1.5
text-align:
font-size: 0.75
.new_surrond{
width: 100%;
width: 45.5%;
margin-left: 2.5%;
margin-bottom: 10
.guang_img{
width: 100%;
.guang_content{
width: 100%;
height: 20
line-height: 1.5
text-align:
font-size: 0.75
.guang_desc{
width: 100%;
height: 15
line-height: 1.2
text-align:
font-size: 0.6
.guang_surround{
width: 100%;
width: 100%;
height:100
.extend_img{
height: 50
margin-top: 25
margin-right: 30
.extend_title{
line-height: 1.2
font-size: 0.9
margin-left: 20
margin-top: 20
display: inline-
.extend_subtitle{
line-height: 1.2
font-size: 0.7
margin-left: 40
margin-top: 20
display: inline-
执行效果图
提示：由于网页太长，有滚动条，导致截图有点不好看，自行脑补吧~JS 怎样获取 script标签中的内容? - CNode技术社区
积分: 8680
题叶, FP, GUI, Writing
jQuery 应该是一样的吧…
比如我吧一个模板文件用 &script type='text/jade' id='tmpl' src='tmpl.jade'& 包含起来,
弱弱得问一声… 这个 type 会不会不科学的…?
然后怎样从内部取出具体的内容呢?
$('script[type=&text/jade&]').each(function () {
var script = $(this).html();
// script就是js代码了
这样还是不安全的说.
$('script[type=&text/jade&]').each(function(){console.log(this.text)});
试了下不行, 我是在 Chrome 里面的,
然后, 如果我吧内容写在标签里面, 而不是用 ssrc=&&, 两段代码就都获取到了.
难道 src 属性的内容只能浏览器自身才能读取么?
笨一点的方法：你获取到script标签的src属性，然后自己发出个ajax请求去获取内容
是不是没放在document的ready以后执行？
我是先加载好, 然后在 console 里输入代码的, 不会是这问题
好像也是… 这办法犀利.
我看到过 Backbone 里用这样的语法引入模板的, 搞不好也这样
浏览器应该是执行src所引入的脚本文件~
如果想获取那个src的文件，个人觉得老雷的说法还可以尝试去做！
内联的可以$(id).html()，对于外部资源，浏览器是首先加载到script然后解释执行的，你这里用src一般做法就是一个xhr请求取回来内容
如果是跨域js文件，岂不是还非常麻烦？
我同事遇到类似问题，把模板文件写成xxx.jade.js的样子，然后用seajs载入。
并且自己做了个小程序，把模板中的空格回车删除，并在开头加入define…笨是笨了点，但问题解决了。不怕跨域。
我现在把模板写在单独的 .js 当脚本传的.
seajs 太复杂了, 我写的也就入门级的练习, 不用也不打紧
前段mvc模板一般都是直接写在html页面,或者写成html文件,后端格式化处理成一个模板js文件,也就是一个模板对象,这样又快又减少http请求.
同样遇到这个问题，前后端同时使用jade 是不能把模板放到内嵌script里的，然后很别扭，我的方法是把jade文件转化成字符串，然后付给一个变量，前端代码中直接引用这个变量 不过这个又失去了jade易读易写的结构，也没找到什么好方法
如果jade能够生成内嵌的script 不去除空格而且复合jade格式的话，这个问题也算解决了
不对 我的问题解决了 可以用内嵌 注意里面的变量#{XX} 前要加\ 看来是我想过来
我就在一直找能这样读取script的src指向的资源的内容的方法，而且，感觉
的方法不能完全满足要求，因为如果是用src属性获取资源的话，浏览器是有缓存的，如果是使用ajax获取json，虽然可以在网页运行时设置缓存，但是那缓存只是缓存到内存中去了，一旦关掉这个页面，再次读取时将会再次获取json，而使用src属性获取资源，就直接从硬盘缓存中获取资源了。
不过使用iframe是可以的，而且直接把jade的文本放在iframe的pre标签里，不过获取iframe的内部标签怎么获取，不要笑，我真不知道，前端的这些东西我都没有系统的学过。网上好像有些方法，不过自己稍微试了一下，好像有问题，不过这种问题应该很容易解决。也许获取iframe的内部标签对你们而言是小儿科，而且这种方法太难看了，（那么一大堆源代码直接作为字符串放在iframe里啊，）所以还是想找个更好的方法。
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的推荐这篇日记的豆列
······2013年10月 Web 开发大版内专家分月排行榜第三
2013年5月 总版技术专家分月排行榜第一
2016年7月 总版技术专家分月排行榜第二2016年3月 总版技术专家分月排行榜第二2015年12月 总版技术专家分月排行榜第二2014年8月 总版技术专家分月排行榜第二2014年7月 总版技术专家分月排行榜第二2013年6月 总版技术专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。}