新手请教javascript在html里的调用问题。。 - JavaScript论坛

问题点数：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效果出不来。。求帮助