新手请教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效果出不来。。求帮助