| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 495 人关注过本帖
标题:新手请教javascript在html里的调用问题。。
只看楼主 加入收藏
笑熬浆糊2013
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2013-12-27
收藏
 问题点数:0 回复次数:0 
新手请教javascript在html里的调用问题。。
给出的code在JSFIDDLE里测试可以使用(http://
HTML:
<div id="greeting">
     <h1>here is a test text. <strong>We believe this is better</strong> than ever.</h1>
</div>





CSS:
strong {
    font-weight: bold;
}






JavaScript:
var h1 = $('div#greeting h1');

h1.hide().contents().each(function () {
    var words;
    if (this.nodeType === 3) {
        words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
        $(this).replaceWith(words);
    } else if (this.nodeType === 1) {
        this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
    }
});

h1.find('span').hide().each(function () {
    if (!$.trim(this.innerHTML)) {
        $(this).remove();
    }
});

h1.show().find('span').each(function (i) {
    $(this).delay(400 * i).fadeIn(600);
});





我放在自己的HTML里是这样的。。:
<!DOCTYPE html>
<html style="" class=" js no-flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <link href="main.css" rel="stylesheet">

  </head>



<script>
$(function(){
var h1 = $('div#greeting h1');

h1.hide().contents().each(function () {
    var words;
    if (this.nodeType === 3) {
        words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
        $(this).replaceWith(words);
    } else if (this.nodeType === 1) {
        this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
    }
});

h1.find('span').hide().each(function () {
    if (!$.trim(this.innerHTML)) {
        $(this).remove();
    }
});

h1.show().find('span').each(function (i) {
    $(this).delay(400 * i).fadeIn(600);
});
});

</script>
 



<body>

<div id="greeting">
     <h1>here is a test text. <strong>We believe this is better</strong> than ever.</h1>

</div>



</body>
</html>


结果JavaScript效果出不来。。求帮助
搜索更多相关主题的帖子: better believe contents function javascript 
2013-12-27 11:24
快速回复:新手请教javascript在html里的调用问题。。
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.023591 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved